способ, чтобы страница скользить в и из любого направления

Question

У меня есть страница, которая состоит из различных div тегов, распространившихся по всему сайту (высота и ширину = 100%)

Один из них виден на и они должны заменить друг друга на действие (щелчок кнопки или около того).

Я ищу сценарий или плагин, который позволяет мне выдвигаться и одновременно перемещаться в другом div.

I.e. div1 присутствует, и я нажимаю на кнопку, и теперь div1 сдвигается влево, а одновременно Div2 слайд справа.

Я попробовал несколько вещей, включая живой JQuery в, slideToggle, тумблеры ..

Answer 1

Проверить это демо, чтобы увидеть, если он решит вашу проблему без 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%); 
}