#javascript #html #css #slider
#javascript #HTML #css #слайдер
Вопрос:
Я работаю над новым сайтом и хотел выяснить, как Apple и IBM создали слайдер на своем веб-сайте.
Примеры: http://www.ibm.com/us/en/sandbox/ver2/ и http://www.apple.com/imac/
Обратите внимание на то, как текст и изображения перемещаются в противоположных направлениях. Похоже, они делают это с помощью CSS3, но я не могу понять, как они заставляют onclick кнопок ниже работать без замены классов.
Кто-нибудь может дать некоторое представление?
Ответ №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, поэтому я не могу показать вам, как это работает, но это не слишком сложно.
Я надеюсь, что это имеет смысл и полезно 🙂
Комментарии:
1. Да, это имеет смысл, я изначально вставил неправильный URL, я искал этот эффект: apple.com/imac однако, зная, что вы там показали, я на самом деле должен быть в состоянии понять, как сделать другой эффект с тем, что вы показали мне выше.
Ответ №2:
В Интернете доступно множество jQuery javascripts, так что вы можете реализовать этот тип слайдера с его помощью. И у ya jQuery их предостаточно.
Вы также можете получить информацию такого рода, используя файлы javascript.
Вы можете посетить Меню и навигацию Dynamic Drive для получения дополнительной информации. Вы также можете получить источник, с помощью которого вы можете узнать то, что вы ищете..
Комментарии:
1. Это не меню. А jQuery и MooTools (мои предпочтения) похожи на то, что я ищу, но все они перемещают элементы в одном направлении.
2. Вам нужно использовать javascript, поскольку вы не можете иметь событие click в css.
3. Он хочет знать, как работают анимации, а не как работает событие щелчка. Я -1 бы этот ответ, потому что он не затрагивает вопрос и не полезен.
4. @Alastair Pitts: Я также предоставил текст, в котором Брайан может получить основную идею о том, как работает навигация или слайдер.
5. Я понимаю это, но он не искал скрипт, он пытался понять, как они работают. (Оригинальный вопрос) Кто-нибудь может дать некоторое представление? — Это означает, что он ищет информацию, которая поможет ему понять, как достигается эффект. С вашей ссылкой все в порядке, если он просто запрашивал скрипты, но это не то, о чем спрашивали. Кроме того, чтение скриптов не всегда очень полезно.