Для разработчиков веб -сайтов добавление эффекта скольжения или карусели в содержимое дисплея является очень распространенной потребностью. Есть так много платных и бесплатных плагинов каруселей. Многие из них предлагают много полезных параметров конфигурации и динамических эффектов.
Много раз, если вашему проекту нужна легкая карусель, ему не требуется много функций. В то же время, ваш проект-использовать начальную загрузку (самый популярный фронтальный фронт с открытым исходным кодом). Вы можете обратиться к официальному компоненту начальной загрузки.
Эта статья покажет вам, как добавить интересные анимационные эффекты в карусель начальной загрузки. В то же время убедитесь, что этот компонент JS свободно расширяется и быстро запускается.
Введение в animate.css
Чтобы сделать эффект анимации, который я написал себе, достойным похвалы, я использовал очень известную библиотеку анимации CSS3 с открытым исходным кодом, которую ярко называют animate.css. Написано Дэном Иденом.
Это код, который позволяет мне сосредоточиться на поставленной задаче, а не объяснять анимации CSS3.
Использование animate.css требует 2 шага:
1. Представьте animate.min.css в документе HTML.
2. Добавьте анимированный класс вашего кожизанимации в элементы, чтобы быть анимацией на веб -странице.
Далее вы используете имя класса об анимации, которые вы видите на веб -сайте animate.css, чтобы заменить свою учебу.
Представление компонента каруселей Bootstrap
Компонент каруселей начальной загрузки имеет три основные части.
--- Карусель указывает количество страниц, отображаемых на слайде , предоставляя пользователю визуальную подсказку и обеспечивая скользящую навигацию.
--- вход в карусель , класс, называемый .carousele-inner, содержащий во внешней границе. Представляет каждый независимый ползунок. Картинки могут быть размещены на каждой картинке. Вы также можете добавить заголовок. Вы также можете добавить имя класса Carousel-Caption в элемент HTML. Bootstrap будет иметь свой собственный стиль. Мы можем добавить анимации через эти элементы.
--- Наконец, есть стрелка управления каруселью , которая является функцией, которая позволяет пользователю скользить вперед и назад.
Чтобы просто отобразить демонстрацию, изображения не будут добавлены. Сначала сосредоточьтесь на кадюре как анимации.
Строительство HTML -структуры
Вот те, которые вам нужно процитировать в свой проект:
jQuery
CSS и JavaScript's Bootstrap
Animate.css
Стили -таблица и документация JS.
Чтобы ускорить процесс разработки, шаблоны и необходимые файлы ссылаются с официального веб -сайта Bootstrap.
Ниже приведен код каруселей начальной загрузки :
<div id = "Carousel-example-Generic" data-ride = "carousel"> <!-Индикаторы-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "#carousel-example-generic" data-to-to-to "1"> </li> <li> <li> <li> <li> <li> <li> <li data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <!-обертка для слайдов-> <div role = "listbox"> <!-Первый слайд-> <viv> <div> <H3 Data-animation = "Animated BounceInleft"> Это определение данных. BounceInright "> Это заголовок для слайда 1 </h3> <button Data-animation =" Animated Zoominup "> Button </button> </div> </div> <!-/.item-> <!-Второй слайд-> <div> </h3 data-animation =" Animated Boundindown "> <pap> </h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> Boundindown "> Bounceinup"> Это заголовок для слайда 2 </h3> <кнопка data-animation = "Animated Zoominright"> Кнопка </button> </div> </div> <!-/.Item-> <!-Третий слайд-> <div> <H3 Data-animation = "Animated Zoominleft"> <prop> </h3 </h3 </h3 </h3 </h3 </h3 </h3 </h3. Data-animation = "Animated Flipinx"> Это под заголовком для слайда 3 </h3> <кнопка Data-animation = "Animated Lightspeedin"> Button </button> </div> </div> <!-/.Item-> </div> <!-/.carousele-inner-> <! data-slide = "prev"> <span aria-hidden = "true"> </span> <pran> предыдущий </span> </a> <a href = "#carousel-example-Generic" role = "button" data-slide = "next"> <span aria-hidden = "true"> </span> <pan> next </span> </a> </div>--->-
Если приведенный выше код не ошибается, вы увидите карусель, которая может работать при открытии ее в браузере. Все выше не содержит линии кода JavaScript. Если вы не добавляете изображения,
Просто добавьте значение Min-Hight в блок класса.
Добавьте анимацию анимации данных в элементы в заголовке карусели, используя эту специальную библиотеку анимации в качестве их значения.
Если вы хотите испытать другие анимации из библиотеки Animate.css, используйте имя класса анимации по вашему выбору вместо значения свойства анимации данных.
Мы используем значение атрибута анимации данных в коде JavaScript.
Хотя в некоторых случаях можно найти простую автоматическую карусель, мы имеем больший контроль над этим случаем.
На первом шаге в этом направлении удалите значение Data-ride = "carousel" из элемента и инициализируйте значение атрибута данных без написания какого-либо кода. Тем не менее, мы намерены использовать код JS для управления каруселью, поэтому это свойство данных не нужно.
Добавить стиль CSS в карусель
Теперь используйте свое творчество, чтобы добавить стили к названию карусели в соответствии с вашими предпочтениями. Правила стиля, которые я собираюсь написать, - это демонстрации, которые работают гладко.
Более конкретно, мы увеличиваем контроль свойств задержки анимации. Определите, когда начинается каждая анимация (обратите внимание, что для простой демонстрации префикс браузера опущен)
.carousele-Caption H3: первая детская {анимация-задержка: 1S;}. Carousel-Caption H3: nth-child (2) {animation-delay: 2s;}. Кнопка Carousel-Caption {Animation-Delay: 3S;}В приведенном выше фрагменте кода убедитесь, что анимация элемента начинается упорядоченным образом. Другие эффекты могут быть сделаны. Например, вы можете выбрать первые два названия, чтобы появиться одновременно. Тогда есть кнопка кнопки. Вы можете решить для себя и повеселиться.
Напишите код jQuery:
Мы начинаем инициализацию этой карусели и добавляем код в ваш пользовательский файл JavaScript:
var $ mycarousel = $ ('#carousel-example-generic'); // инициализировать карусель $ mycarousele.carouseel ();Мы динамически настроили карусель, а затем давайте решим эту анимацию.
Чтобы оживить заголовок первого слайда, сценарий должен работать после загрузки страницы в браузере. Последующее слайд -шоу входит в нашу поле зрения под анимацией, и наш код работает на событии Slide.bs.carousele. Это означает, что один и тот же код работает дважды: страница загружается один раз, а событие Slide.bs.carousel - один раз.
Поскольку нам нравится следовать принципу невыполнения, мы намерены инкапсулировать наш код в функции и ссылаться на них, когда это необходимо.
Код:
функция doAnimations (elems) {var animendev = 'webkitanimationend animationend'; elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('animation'); // Добавить классы animate.css в // элементы, которые должны быть анимация // Удалить классы animate.css // aintement event (function (). $ this.removeclass ($ animationType); FunctionDoanimations ($ FirstAnimatingElems); // Пауза Carousel $ mycarousel.carousel ('pause'); // Прикрепить нашу функцию doanimations () к // carousel's slide.bs.carouseel Event $ mycarouse.on ('slide.b.carousel', e) $ animatingElems = $ (e.relatedTarget) .find ("[Data-Animation ^= 'Animated']");Давайте проанализируем приведенный выше код.
Посмотрите на функцию doanimations ()
Задачи, выполняемые этой функцией doanimations (), следующие.
Он начинается с кеш -строк, содержащих имя события AnimationEnd в переменной. Это событие говорит нам, что вы, возможно, догадались, когда каждая анимация заканчивается. Нам нужна информация для этого момента, потому что после окончания каждой анимации мы удаляем класс animate.css. Если мы не сделаем удаление, название Carousel будет иметь анимацию только один раз, то есть просто отображает определенное слайд в первой карусели.
var animationendev = 'webtanimationend animationend';
Затем наша функция проходит через каждый элемент, который мы хотим иметь анимацию, и получить значение свойства анимации данных. Подумайте о том, что упоминается выше, это значение содержит класс animate.css, который мы хотим добавить к элементу, чтобы оно имело эффект анимации.
elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('animation'); // и т. Д.});Наконец, функция doanimations () динамически добавляет к каждому элементу класса animate.css для выполнения анимации. Когда анимация заканчивается, прослушивание события также прилагается. После того, как анимация закончилась, мы удаляем класс, добавленный из animate.css. Это гарантирует, что следующая карусель вернулась в текущую область. (Вы пытаетесь удалить этот код и посмотреть, что произойдет)
$ this.addclass ($ animationtype) .one (animendev, function () {$ this.removeclass ($ animationType);});Первая анимация заголовка
Когда страница загружается в браузер, мы оживляем содержимое в первом слайде:
var $ firstAnimatingElmes = $ mycarousel.find ('. Item: first') .find ("[data-animation ^= 'Animated']"); Doanimations ($ FirstAnimatingElems);В этом коде мы находим первый свет, мы хотим получить значение атрибута анимации из названия анимации с помощью анимации данных. Затем мы передаем переменную $ FirstAnimatingElems в качестве параметра функции doanimations (), а затем выполнять функцию.
Функция остановки карусели
Когда контент первого экрана был выполнен, мы останавливаем эту функцию карусели.
$ mycarousel.carousel ('пауза');
Это особенность, в которой компонент каруселей начальной загрузки предотвращает постоянное вращение. Постоянное вращение может сделать посетителей несчастными.
В этом случае я рекомендую убедиться, что карусель не переходит непосредственно к следующему свету, пока все анимации не работают. Это можно контролировать, установив опцию «Интервал» в коде инициализации:
$ mycarousel.carousel ({интервал: 4000});По моему мнению, титул бесконечной петли карусель прыгает каждый раз, когда скольжение в поле зрения не идеально.
Анимация на титул карусели
Шаги, описанные ниже, необходимы для того, чтобы стать видимым для анимационного названия карусели каждого слайда.
Во -первых, мы добавляем слушателя событий на Slide.bs.carousel.
Событие сразу же запускается, когда вызывается метод экземпляра слайда.
$ mycarousel.on ('slide.bs.carousel', function (e) {// do thothe ...});Затем мы выбираем текущие огни и находим элементы, которые мы хотим добавить анимации. В следующем коде используется свойство.
var $ animatingElems = $ (e.relatedTarget) .find ("[data-animation ^= 'Animated']");
Наконец, мы называем функцию doanimations () и передаем $ animatingElems в качестве параметра.
Doanimations ($ animatingElems);
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.
Замечательное обмен темами: jquery picture carousel javascript picture carousel bootstrap picture carousel
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.