Слайдер CSS3 или JavaScript Как они сделали это?

Question

Я работаю над новым сайтом и хотел выяснить, как Apple и IBM сделали слайдер на своем сайте.

Примеры: http://www.ibm.com/us/en/sandbox/ver2/ и http://www.apple.com/imac/

Обратите внимание, как текст и изображения скользят в противоположных направлениях. Похоже, что они делают это с помощью CSS3, но я не могу понять, как они получают щелчок по кнопкам ниже, чтобы они работали без замены классов.

Может ли кто-нибудь дать некоторое представление?

Answer 1

Конкретно, глядя на слайдер Apple, происходит несколько вещей.

Они используют JS для подключения к событию click, и когда они это делают, они изменяют атрибут на <ul>, это, в свою очередь, меняет CSS, который, используя переходы CSS3, обеспечивает анимацию.

Итак, заглянув в код:

Вот фрагмент кода HTML. Вы можете видеть атрибуты exited и entered. Это изменения с использованием javascript, когда требуется новый раздел (с помощью onclick)

<ul class="ul-slider" page="1" style="width: 970px; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 5px; " exited="previous">
    <li class="pb-macbook" exited="previous">...</li>
    <li class="pb-macbookpro" exited="previous">...</li>
    ...
</ul>
...
<ul class="ul-slider" page="3" style="width: 930px; margin-top: 0px; margin-right: 25px; margin-bottom: 0px; margin-left: 25px; " entered="next">
    <li class="pb-keyboard started" entered="next">...</li>
    <li class="pb-magicmouse started" entered="next">...</li>
    <li class="pb-magictrackpad started" entered="next">...</li>
    ...
</ul>

Затем, изучая CSS (http://images.apple.com/global/styles/productbrowser.css),, мы видим ряд CSS3-переходов / свойств и стилей преобразования

предоставляется небольшой фрагмент, вы можете увидеть, как различные значения атрибутов entered или exited влияют на преобразования, которые в свою очередь анимируются переходами.

.productbrowser ul.exited ,
.productbrowser ul[exited] { display:none; }
.productbrowser li[exited]  ,
.productbrowser li[toenter]  { -webkit-animation-name:none; -webkit-animation-duration:0;

.productbrowser li[exited="next"] ,
.productbrowser li[toenter="next"],
.productbrowser li[enter="next"]   { -webkit-transform:translate3d( 3000px, 0, 0); }

Они минимизировали JS, поэтому я не могу показать вам, как это работает, но это не слишком сложно.

Я надеюсь, что это имеет смысл и полезно :) 1026 *

Answer 2

В Интернете доступно множество javascript-скриптов JQuery, поэтому вы можете использовать этот тип слайдера. И у тебя в JQuery их много.

Вы также можете приобрести этот тип вещи, используя файлы JavaScript.

Вы можете посетить Меню и навигация из Dynamic Drive для получения дополнительной информации. Вы также можете получить источник, по которому можно узнать, что вы ищете ..