`Animate your divs with slide in and slide out effects using

Question

`Animate your divs with slide in and slide out effects using

Currently, I am in the process of replicating a website and facing some challenges.

This site is my inspiration for the project.

I have managed to create a sliding effect using CSS, making the div slide in and out from the same direction. However, I want the pages to slide in and out similar to the model site, which I'm struggling to achieve with CSS alone. While I am proficient in HTML/CSS, my JavaScript skills are lacking. I came across this fiddle, but it only provides a toggle animation rather than the specific sliding effect I need - sliding in from the right, then out to the left while resetting at the end. Additionally, I require the current div to slide out simultaneously as the next one slides in, all within the same timeframe.

For reference, here is the Fiddle with code.

.panel{
    width:0px;
    height:0px;
    overflow: hidden;
position:relative;
    left:100%;
    background: none;
    z-index: 2;
-moz-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s;
    -webkit-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s;
-o-transition: all .8s ease-in-out,  width 0s ease 1s, border-width 0s ease 1s;
transition: all .8s ease;
transition-delay:0s;
margin:0px;

}

.panel:target{
width:100%;
height:auto;
    margin:0px 0 0;
padding:0;
    background-color: transparent;
position:relative;
left:0;
z-index:3;
}

<div id="overall-wrap">
<!-- Header with Navigation -->

 <div id="header">
    <a href="#home"><img class="header" src="images/logo.png" width="133" height="86" alt="Wildfire Images"></a>
    <nav>
    <ul id="navigation">
        <li><a class="scroll" href="#home">Home</a></li>
        <li><a class="scroll" href="#about">About Us</a>
            <ul>
              <li><a class="scroll" href="#contact">Contact Us</a></li>
            </ul>
        </li>
    </ul>
    </nav>
    <div class="clearfix"></div>
</div>

 
<div class="clearfix"></div>



      <div id="home" class="panel"></div>

<!-- About Us -->
 
      <div id="about" class="panel">
          <div class="content">
              <div class="bg-about effect2">
              <div class="about-wrapper">
                <div class="about-text">
                <h2> About Us</h2>
                <p>Wildfire Images is a Sydney based boutique Portrait Photography Studio dedicated to candidly capturing all that is beautiful, fun and elegant about you and your loved ones.</p>
                <p>At Wildfire Images, we tailor every shoot to you, your trade mark smile, your rapturous laugh, your devotion to those you love, the cheeky, the serious and all those gorgeous things in between that will always be unmistakably you.</p>
                <p>Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.</p>
                <p class="strong">Contact us today on 9150 6275.</p>
                </div>
                <div class="about-image"><img src="images/aboutme.jpg" width="200" height="300" alt="WildFire Studios"></div>
              </div>
              </div>
              <!-- ... -->
          </div>
          <div class="clearfix"></div>
      </div>

<!-- /About Us -->

<!-- Contact -->

<div id="contact" class="panel">
    <div class="content">
        <div class="bg-contact effect2">
        <img src="images/contact-image.jpg" width="900" height="419" alt="Contact Wildfire"/>
        
       <div id="form-wrapper">
         <div id="form-outer">
         <div id="text-wrap">
           <div id="contact-left">
           <h2>Contact</h2>
           <div id="phone">
           <h3>Phone</h3><p>9150 6275</p></div>
           <div id="email">
           <h3>Email</h3><p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcd5d2dad3fccbd5d0d8dad5ced9d5d1dddbd9cf92dfd3d192ddc9">[email protected]</a><p></div>
           </div>
           <div id="contact-right"><h3>Address</h3><p>Studio 18,</p><p>442-444 King Georges Rd</p><p>BEVERLY HILLS NSW 2209</p></div>
           </div>
           <div class="clear"></div>
           <div id="form-inner">
           <form name="contact" action="contact.php" method="post" onBlur="MM_validateForm('name','','R','email','','RisEmail','subject','','R','message','','R');return document.MM_returnValue">
             <input name="name" type="text" class="field" id="name" placeholder="Name"/>
             <input name="email" type="email" class="field" id="email" placeholder="Email"/>
             <input name="subject" type="text" class="field" id="subject" placeholder="Subject" />
             <textarea name="message" class="field_textarea" id="message" placeholder="Message"></textarea>
             <input type="submit" value="Send" name="submit" class="submit"/>
           </form>
           </div>
         </div>
       </div>
          
        </div>
        <!-- ... -->
    </div>
</div>
<!-- /Contact -->

<!-- Portraits -->
<div id="portraits" class="panel">
    <div class="content">
       <div class="gallery-big effect2">
       <div id="gallery-big-text-wrap">
           <h2>Portraits</h2>
           <p>Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.</p>
           <p>Contact us today on 9150 6275.</p>
           </div>  
          <!--k gallery start-->
          <img src="images/baby-06-portrait-gallery.jpg" width="798" height="531">
           <img src="k/ki_galleries/all-about-me/AEP_0486.jpg" width="798" height="1200">
          <img src="k/ki_galleries/all-about-me/AEP_0653.jpg" width="798" height="1200">
          <img src="k/ki_galleries/all-about-me/DSC_0548.jpg" width="799" height="1200">
          <img src="k/ki_galleries/all-about-me/DSC_2652-edit.jpg" width="799" height="1200">
          <img src="images/family.jpg" width="798" height="532">
          <img src="k/ki_galleries/all-about-me/DSC_4052.jpg" width="799" height="1200">
        
      </div>
    </div>
</div>
<!-- /Portraits -->
</div>

You can view the new site at wixwebsite.seobrasov.com

Please keep in mind that the sliding effect should seamlessly work for more than two divs, allowing smooth transitions from div 1 to div 3 without revealing div 2.

javascript html css

Answer 1

Answer №1

To achieve this effect, create two divs: one for the current page display and another for the upcoming page to load.

Implement a click event on links to animate the transition of the current page sliding to the left, then set its CSS position to the right once the animation completes:

$("#page1").stop().animate({
    left:"-100%"
}, 500, function(){
    $(this).css("left", "100%");
});

$("#page2").stop().animate({
    left:"10%"
}, 500);

Try it out on JSFiddle

Explore a JSFiddle with a 3-page menu

Answer 2

To achieve this effect, create two divs: one for the current page display and another for the upcoming page to load.

Implement a click event on links to animate the transition of the current page sliding to the left, then set its CSS position to the right once the animation completes:

$("#page1").stop().animate({
    left:"-100%"
}, 500, function(){
    $(this).css("left", "100%");
});

$("#page2").stop().animate({
    left:"10%"
}, 500);

Try it out on JSFiddle

Explore a JSFiddle with a 3-page menu

Answer 3

Answer №2

If you're looking to enhance your website's user experience, there are two options you can consider-

One possibility is to implement a jQuery-based plugin such as bxSlider. This tool doesn't require extensive jQuery knowledge and is relatively easy to understand. You can find more information on how to use it here:
Alternatively, you could opt for a pure CSS 3 solution. By leveraging the transition property in CSS 3 along with transformation functions like ease-in/ease-out, you can create smooth animations. Check out a demo showcasing this approach here:

Answer 4

If you're looking to enhance your website's user experience, there are two options you can consider-

One possibility is to implement a jQuery-based plugin such as bxSlider. This tool doesn't require extensive jQuery knowledge and is relatively easy to understand. You can find more information on how to use it here:
Alternatively, you could opt for a pure CSS 3 solution. By leveraging the transition property in CSS 3 along with transformation functions like ease-in/ease-out, you can create smooth animations. Check out a demo showcasing this approach here:

Answer 5

Answer №3

Don't miss out on this latest update: Check out the updated JS Fiddle! (http://jsfiddle.net/jPneT/2705/)

This version utilizes 3 different views
You will start on the default view
Simple navigation methods provided

JavaScript File:

$(document).ready(function(){
    var currentPageIndex = -1;
    var pages = [
        $('div.l1'),
        $('div.l2'),
        $('div.l3'),
    ];
    var viewsWidth = 200; 
    var showPage = function(index){
        if(index === currentPageIndex){return;}
        var currentPage = pages[currentPageIndex];
        if(currentPage){
            currentPage.stop().animate({left: -viewsWidth})
        }
        var nextPage = pages[index];
        nextPage
            .stop()
            .css({left: viewsWidth})
            .animate({left: 0}) 
        currentPageIndex = index;
    }
    // Display the default page
    showPage(0);
    $('a.l1').click(showPage.bind(null, 0));
    $('a.l2').click(showPage.bind(null, 1));
    $('a.l3').click(showPage.bind(null, 2));

    $('.left-right').mouseover(function(){
        $('.slider').stop().animate({
            right: 0    
        }, 400);                        
    }).mouseout(function(){
        $('.slider').stop().animate({
            right: '-200px'    
        }, 400);     
    });

});

HTML:

<a class="l1">1</a><a class="l2">2</a><a class="l3">3</a>

<div class="left-right">
    <div class="l1">L1 view</div>
    <div class="l2">L2 view</div>
    <div class="l3">L3 view</div>
</div>

CSS:

.left-right {
    overflow:hidden;
    height:200px;
    width:200px;
    position:relative;
    background-color:#333;
    clear: left;
}
div.l1,div.l2,div.l3 {
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:-200px;
    color:#fff;
}
a.l1,a.l2,a.l3 {
    display: block;
    width: 50px;
    height: 50px;
    float: left;
    cursor: pointer;
    opacity: 0.6;
}
a:hover {
    opacity: 1
}

.l1{
    color: red;
    background-color:red;
}
.l2{
    color: green;
    background-color:green;
}
.l3{
    color: blue;
    background-color:blue;
}

Answer 6

Don't miss out on this latest update: Check out the updated JS Fiddle! (http://jsfiddle.net/jPneT/2705/)

This version utilizes 3 different views
You will start on the default view
Simple navigation methods provided

JavaScript File:

$(document).ready(function(){
    var currentPageIndex = -1;
    var pages = [
        $('div.l1'),
        $('div.l2'),
        $('div.l3'),
    ];
    var viewsWidth = 200; 
    var showPage = function(index){
        if(index === currentPageIndex){return;}
        var currentPage = pages[currentPageIndex];
        if(currentPage){
            currentPage.stop().animate({left: -viewsWidth})
        }
        var nextPage = pages[index];
        nextPage
            .stop()
            .css({left: viewsWidth})
            .animate({left: 0}) 
        currentPageIndex = index;
    }
    // Display the default page
    showPage(0);
    $('a.l1').click(showPage.bind(null, 0));
    $('a.l2').click(showPage.bind(null, 1));
    $('a.l3').click(showPage.bind(null, 2));

    $('.left-right').mouseover(function(){
        $('.slider').stop().animate({
            right: 0    
        }, 400);                        
    }).mouseout(function(){
        $('.slider').stop().animate({
            right: '-200px'    
        }, 400);     
    });

});

HTML:

<a class="l1">1</a><a class="l2">2</a><a class="l3">3</a>

<div class="left-right">
    <div class="l1">L1 view</div>
    <div class="l2">L2 view</div>
    <div class="l3">L3 view</div>
</div>

CSS:

.left-right {
    overflow:hidden;
    height:200px;
    width:200px;
    position:relative;
    background-color:#333;
    clear: left;
}
div.l1,div.l2,div.l3 {
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:-200px;
    color:#fff;
}
a.l1,a.l2,a.l3 {
    display: block;
    width: 50px;
    height: 50px;
    float: left;
    cursor: pointer;
    opacity: 0.6;
}
a:hover {
    opacity: 1
}

.l1{
    color: red;
    background-color:red;
}
.l2{
    color: green;
    background-color:green;
}
.l3{
    color: blue;
    background-color:blue;
}

Answer 7

Answer №4

I have made some adjustments to your code in order to support the necessary navigation.

To achieve this, I wrapped the divs in a container that displays only one box at a time.

<div id="mainbox">
        <div class="left-right">
            <div class="red box">Red Div !</div>
            <div class="green box">Green Div !</div>
        </div>
</div>

For the CSS styling, it looks like this:

#mainbox {
    height:200px;
    width:200px;
    overflow:hidden;
}

I then modified the left positions to -100% on mouseover and back to 0 on mouseout.

$(document).ready(function(){
    $('.left-right').mouseover(function(){
         $('.left-right').stop().animate({
            left: '-100%'    
        }, 400);                        
    }).mouseout(function(){
        $('.left-right').stop().animate({
                left:'0'
        }, 400);     
    });

});

Here is a working JSFiddle Demo for reference

Answer 8

I have made some adjustments to your code in order to support the necessary navigation.

To achieve this, I wrapped the divs in a container that displays only one box at a time.

<div id="mainbox">
        <div class="left-right">
            <div class="red box">Red Div !</div>
            <div class="green box">Green Div !</div>
        </div>
</div>

For the CSS styling, it looks like this:

#mainbox {
    height:200px;
    width:200px;
    overflow:hidden;
}

I then modified the left positions to -100% on mouseover and back to 0 on mouseout.

$(document).ready(function(){
    $('.left-right').mouseover(function(){
         $('.left-right').stop().animate({
            left: '-100%'    
        }, 400);                        
    }).mouseout(function(){
        $('.left-right').stop().animate({
                left:'0'
        }, 400);     
    });

});

Here is a working JSFiddle Demo for reference

`Animate your divs with slide in and slide out effects using

Answer №1

Try it out on JSFiddle

Explore a JSFiddle with a 3-page menu

Answer №2

Answer №3

Answer №4

Similar questions

Extension ConfirmButtonExtender

Achieve full height Bootstrap styling by nesting it inside a row div

Why would someone opt to utilize process.env.PORT in their code?

"Enhance your website with a dynamic carousel feature using Twitter Bootstrap's JavaScript

The animation isn't loading

The HTML modal closing button is unresponsive and the contents inside are misaligned, causing functionality issues

PHP function that allows toggling only the first item in an accordion

Implement a sequence of animations within a div using jQuery

The navigation bar vanishes as soon as I click the Modal button

Creating interactive buttons with CSS and jQuery

Retrieving data from a script within a React component

The fixed navigation bar shows a flickering effect while scrolling at a slow pace

Words spilling onto the picture

Conceal div elements containing identical information by utilizing jQuery

`In TypeScript Angular, encountering challenges with accessing object properties`

The footer seems to be malfunctioning

When the enter key is pressed, the form will be automatically submitted

Issue encountered: Unforeseen command: POST karma

Once the recursive function executes (utilizing requestAnimationFrame), socket.emit can finally be triggered

How is it that this JavaScript task does not trigger an error: const a = (1, 2, 3, 4);