CODEWITHSUNDEEP
javascripthtmlcssslide
user2370460
user2370460

Reputation: 7820

CSS/JavaScript slide DIV out and slide DIV in

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?

Upvotes: 3

Views: 24315

Answers (4)

user3880179
user3880179

Reputation:

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

Upvotes: 6

Oscar
Oscar

Reputation: 678

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.

Upvotes: 0

speak
speak

Reputation: 5392

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

Upvotes: 1

Herb
Herb

Reputation: 345

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/

Upvotes: 0

Related Questions