CSS/JavaScript slide DIV out and slide DIV in

Question

I am wanting to be able to slide a div out (to the left), while sliding another div in (from the right) at the same time.

My HTML code is like this:

<body>
    <div id="content">
        <div id="page1">
            <!-- Content Area 1 -->
        </div>
        <div id="page2">
            <!-- Content Area 1 -->
        </div>
    </div>
</body>

Currently I am using

document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "inline";

to switch between the pages, but I would like to have the transition as smooth as possible.

Is there a way I can do this, without jQuery and preferably just in CSS?
If not, how can I do it in jQuery?

Not sure off the top of my head (CSS isn't my game) - but there are plenty of tutorials out there for them — tymeJV
– tymeJV, Commented Jul 30, 2014 at 18:59
Is it a toggled effect? or when something is clicked, hovered, etc? I tinkered a bit with jsfiddle.net/Lt7Qr — ebriggs
– ebriggs, Commented Jul 30, 2014 at 19:24

score 6 · Accepted Answer · 2014-07-31 14:27:45Z

6

Yes you can do it with pure css by using animation keyframes.

HTML

<div id="content">
    <div id="page1" class="page">
        <!-- Content Area 1 -->        
    </div>
    <div id="page2" class="page">
        <!-- Content Area 1 -->        
    </div>
</div>

CSS

html,body {
    height: 100%;    
    overflow: hidden;
}

#content {
    position: relative;
    height: 100%;
}
.page {
    position: absolute;
    top:0;

    height: 100%;  
    width: 100%;
}
#page1 {
    background: #d94e4e;
    left:-100%;
    -webkit-animation: left-to-right 5s linear forwards;
    animation: left-to-right 5s linear forwards;
}
#page2 {    
    background: #60b044;    
    left:0;    
    -webkit-animation: right-to-left 5s linear forwards;
    animation: right-to-left 5s linear forwards;
}

@-webkit-keyframes left-to-right{
    from{left:-100%}
    to{left:0}
}
@-webkit-keyframes right-to-left{
    from{left:0}
    to{left:100%}
}

@keyframes left-to-right{
    from{left:-100%}
    to{left:0}
}
@keyframes right-to-left{
    from{left:0}
    to{left:100%}
}

However there is one huge limitation to this method. CSS can't handle any real events. So if you want this animation to appear when a button is clicked or something, you'll have to use JavaScript.

Demo jsFiddle

Edited Now the left one enters and the right one exits at the same time.

UPDATE The same example using translate3d => jsFiddle

edited Jul 31, 2014 at 14:27

answered Jul 30, 2014 at 19:36

user3880179

Sign up to request clarification or add additional context in comments.

1 Comment

speak Over a year ago

This could be easily achieved using translate3d, which will also allow you to tap into a device's GPU for smoother animations.

speak · Accepted Answer · 2014-07-30 19:34:18Z

1

here's an (almost) full CSS solution:

If you can be more specific about what you want I can happily tweak or guide you through the code to help you.

It relies on using translate3d:

transform: translate3d(-200px, 0, 0);

DEMO

answered Jul 30, 2014 at 19:34

speak

5,4224 gold badges38 silver badges42 bronze badges

Comments

Herb · Accepted Answer · 2014-07-30 19:22:05Z

0

using jQuery

http://jsfiddle.net/5EsQk/

<div id="content">
         <div id="page1" style="width: 100px; height: 100px; color: white; background-color:silver; float: left; margin-left: -90px;">
             Content Area 1
    </div>
    <div id="page2" style="width: 100px; height: 100px; color: white; background-color:silver; float: right; margin-right: -90px;">
        Content Area 1
    </div>
</div>

$(document).ready(function() {
    $('#page1').animate({
        marginLeft: "+=90"
    }, 5000);
    $('#page2').animate({
        marginRight: "+=90"
    }, 5000);
});

edited fiddle => http://jsfiddle.net/5EsQk/1/

edited Jul 30, 2014 at 19:22

answered Jul 30, 2014 at 19:12

Herb

3451 silver badge17 bronze badges

1 Comment

user2370460 Over a year ago

Hi, sorry, I was wanting one div to come in and the other to go out - like the one that is coming in would push the other one out.

Oscar · Accepted Answer · 2014-07-30 19:46:26Z

0

Very much possible without jQuery, using only CSS and CSS transitions.

You can set up your CSS so that if <div id="content"> has no class .showPage2, it shows page 1. If it does have .showPage2, it shows page 2.

The transition is then only triggered by toggling the class using (native) Javascript. The animation is handled by CSS transitions. This means that if by any change the browser does not support CSS3 transitions, the user will still see the correct page; only not with the fancy transition. CSS3 transitions are generally very smooth.

This is what the CSS would look like:

#content
{
    position: relative;
    overflow: hidden;
}
#content #page1
{
    position: absolute;
    left: 0%;

    width: 100%;
    height: 100%;

    transition: left .5s ease-out;
    -webkit-transition: left .5s ease-out;
}
#content #page2
{
    position: absolute;
    left: 100%;

    width: 100%;
    height: 100%;

    transition: left .5s ease-out;
    -webkit-transition: left .5s ease-out;
}

#content.showPage2 #page1
{
    left: -100%;
}
#content.showPage2 #page2
{
    left: 0%;
}

And the Javascript could look something like this:

function showPage1()
{
    document.getElementById("content").setAttribute("class", "")
}
function showPage2()
{
    document.getElementById("content").setAttribute("class", "showPage2")
}

I hope this handles it in a way that fits your needs.

answered Jul 30, 2014 at 19:46

Oscar

6776 silver badges13 bronze badges

2 Comments

user2370460 Over a year ago

Hi, I can't seem to get this to work; can you give me a jsfiddle example?

Oscar Over a year ago

Here you go: jsfiddle.net/ne9WC/2 (click the pages to switch them). Hope it helps!

Collectives™ on Stack Overflow

CSS/JavaScript slide DIV out and slide DIV in

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related