03:33 Parallax-слайдер контента на CSS3 и jQuery | |
 Сегодня мы хотим поделиться с вами простым примером Parallax-слайдера контента. Используя CSS animation, мы сможем управлять анимацией каждого отдельного элемента слайдера и создать Parallax-эффект посредством анимации фона самого слайдера. Такая идея пришла в голову под впечатлением от слайдера, использованного на странице веб-сайта Kendo UI, платформы для разработки современных интерфейсов на HTML. Нам сразу же захотелось воссоздать подобный эффект на собственном примере. Как это работает Слайдер состоит из нескольких слайдов, в каждом из которых присутствует элемент h2, абзац, ссылка и отсек для изображения: Ядро данного слайдера заключается в анимации для каждого элемента. Мы будем управлять поведением элементов за счет классов направления для соответствующих слайдов. Например, когда мы будем прокручивать текущий слайд вправо, мы зададим ему класс «da-slide-toright». У нас будет 4 разных класса для каждого и возможных направлений слайдов. .da-slide-fromright .da-slide-fromleft .da-slide-toright .da-slide-toleft Используя данные классы, мы сможем управлять анимацией каждого элемента: /* Slide in from the right*/.da-slide-fromright h2{animation: fromRightAnim1 0.6s ease-in 0.8s both;}.da-slide-fromright p{animation: fromRightAnim2 0.6s ease-in 0.8s both;}.da-slide-fromright .da-link{animation: fromRightAnim3 0.4s ease-in 1.2s both;}.da-slide-fromright .da-img{animation: fromRightAnim4 0.6s ease-in 0.8s both;}/* Adjust animations for different behavior of each element: */@keyframes fromRightAnim1{0%{ left: 110%; opacity: 0; }100%{ left: 10%; opacity: 1; }}@keyframes fromRightAnim2{0%{ left: 110%; opacity: 0; }100%{ left: 10%; opacity: 1; }}@keyframes fromRightAnim3{0%{ left: 110%; opacity: 0; }1%{ left: 10%; opacity: 0; }100%{ left: 10%; opacity: 1; }}@keyframes fromRightAnim4{0%{ left: 110%; opacity: 0; }100%{ left: 60%; opacity: 1; }} Опции При запуске плагина cslider, нам будут доступны следующие опции: $('#da-slider').cslider({current : 0,// индекс начального слайдаbgincrement : 50,// инкремент позиционирования фона// (parallax-эффект) при скольженииautoplay : false,// слайд-шоу вкл. / выкл.interval : 4000// временная задержка между трансформациями}); Parallax-эффект будет реализован за счет сдвига фона слайдера в обратном направлении скольжения слайдов. Посредством bgincrement мы можем управлять числом пикселей, на которое он будет сдвинут. Демо-файлы * Демо 1: Стандартные опции * Демо 2: Слайд-шоу (различные анимации) Учтите, что мы используем простенькую версию отката для браузеров, не поддерживающих анимацию и переходы в CSS (такие все еще встречаются). Надеемся, что вам понравился наш сегодняшний эксперимент, и вы найдете ему применение! Посмотреть демо | Скачать исходные файлы Внимание! У вас нет прав для просмотра скрытого текста. | |
|
| |
| Всего комментариев: 0 | |
