`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

The anchor tag fails to trigger the onClick function in React

Is there a way to modify the border shape of items in the navigation bar?

The average duration for each API request is consistently recorded at 21 seconds

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Adjusting the height of a table column to accommodate lengthy text without disrupting the layout of adjacent columns

I am facing an issue where the images (IMG) do not align properly when I test the responsiveness using Chrome

What might be the reason behind the failure to implement my color class on the text within the <p> element?

Attach an event listener to a class, then use the removeEventListener method to detach the listener and eliminate any remaining references, ensuring proper functionality of the

Transforming a Processing (cursor) file into an interactive webpage

Setting up NextJS on Vercel for website deployment can encounter a common error known as ENOENT Error, which is caused by the absence of a specific file or

Updating every occurrence of a string in the visible text of a webpage: A step-by-step guide

Having a problem with the hover effect on the navbar component

Is the HTML encoded character displaying strangely due to spacing issues?

posting data and redirecting fails when using an ajax button

How to extract JSON data without HTML tags in Android Studio

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

Guide on how to dynamically add AJAX JSON array response to an HTML table

How can we retrieve an API response using Fetch, manipulate it with JSON.stringify(), and what are the next steps in

Leveraging split and map functions within JSX code

Error encountered while utilizing a custom third-party component within an Angular project during static analysis