CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2018381
user2018381

Reputation:

A way to let pages slide in and out from any direction

I have a page that consists of different div tags that spread over the whole site (height and width = 100%)

One of these is visible at a time and they ought to substitute each other upon action (click of a button or so).

I'm looking for a script or plugin that lets me slide out and simultaneously slide in another div.

I.e. div1 is present and I click on a button and now div1 slides out to the left and simultaneously div2 slides in from the right.

I've tried several things including jQuery's animate, slideToggle, Toggle..

Upvotes: 1

Views: 85

Answers (1)

imsky
imsky

Reputation: 3279

Check this demo out to see if it solves your problem without JavaScript: http://www.designmadeingermany.de/slideshow/

/* The Basic Style for all Pages */

.page { 
position: absolute; 
width: 100%; 
height: 100%; 
}



/* The Pages */

#i1 { left: 0%; background-color: #fff; }
#i1 { left: 100%; background-color: #fff; }
#i2 { left: 200%; background-color: #bbb; }
#i3 { left: 300%; background-color: #777; }



/* The Transition Effect */

.page { 
-webkit-transition: -webkit-transform 0.8s;
-moz-transition: -moz-transform 0.8s;
-o-transition: -o-transform 0.8s;
transition: transform 0.8s;
}



/* The Sliding Action */
/* TranslateX for better Performance. Translate3D for better Performance on Ipad. */

#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); }
#a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); }
#a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -o-transform: translateX(-300%); transform: translateX(-300%); }



/* The First Page - Initial Positioning without Anchor */

.page { 
-webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%);
}

Upvotes: 1

Related Questions