[Слайд и карусель] Карусель эффекты на основе anime.js

[Скопировать ссылку]
admin Опубликовано 16-11-2018 12:27:50 | Показать все сообщения |Режим чтения Печать Назад Вперед
Ээффекты на основе anime.js

Краткое описание

Это динамический круговой эффект карусели, основанный на anime.js. Когда эффект карусели переключается, изображение вращается по круговой траектории, а разница в скорости движения между различными изображениями создает визуальный эффект разности.

Совместимость
Поделиться:


Краткое руководство[size=1.15em]
Это динамический круговой эффект карусели, основанный на anime.js. Когда эффект карусели переключается, изображение вращается по круговой траектории, а разница в скорости движения между различными изображениями создает визуальный эффект разности.
Как использовать
Представьте файлы base.css и demo.css и файлы anime.min.js и demo.js на странице.


  1. <font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><link href = "css / base.css" rel = "stylesheet">  </font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  2. <link href = "css / demo.css" rel = "stylesheet">  </font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  3. <script type = "text / javascript" src = "js / anime.min.js"> </ script>             </font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  4. <script type = "text / javascript" src = "js / demo.js"> </ script>             </font></font><font></font>
Скопировать код
HTML
Основная структура HTML карусели выглядит следующим образом:
  1. <font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><section class = "page-wrapper" id = "coidea"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  2.   <div class = "слайдер"></font></font><font></font>
  3.    <font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  4.     <ul class = "slider-list"></font></font><font></font>
  5.       <font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  6.       <li class = "slider-list__item slider-list__item_active"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  7.         <span class = "back__element"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  8.           <img src = "assets / img / back_apple_002.png" /></font></font><font></font>
  9.         </span><font></font>
  10.         <span class="main__element"><font></font>
  11.           <img src="assets/img/bottle_apple_002.png" /><font></font>
  12.         </span><font></font>
  13.         <span class="front__element"><font></font>
  14.           <img src="assets/img/front_apple_002.png" /><font></font>
  15.         </span><font></font>
  16.         <span class="title__element"><font></font>
  17.           <span class="title">apple</span><font></font>
  18.         </span><font></font>
  19.         <span class="more__element"><font></font>
  20.           <span class="content"><font></font>
  21.             <span class="headline">apple</span><font></font>
  22.             <span class="excerpt">Lorem ipsum dolor, ...</span><font></font>
  23.             <span class="link"><font></font>
  24.               <div class="fill"></div><font></font>
  25.               <a href="#">Open catalog</a><font></font>
  26.             </span><font></font>
  27.           </span><font></font>
  28.         </span><font></font>
  29.        </li><font></font>
  30. <font></font>
  31.       <li class="slider-list__item"><font></font>
  32.         <span class="back__element"><font></font>
  33.           <img src="assets/img/back_grapes_001.png" /><font></font>
  34.         </span><font></font>
  35.         <span class="main__element"><font></font>
  36.           <img src="assets/img/bottle_grapes_001.png" /><font></font>
  37.         </span><font></font>
  38.         <span class="front__element"><font></font>
  39.           <img src="assets/img/front_grapes_001.png" /><font></font>
  40.         </span><font></font>
  41.         <span class="title__element"><font></font>
  42.           <span class="title">grapes</span><font></font>
  43.         </span><font></font>
  44.         <span class="more__element"><font></font>
  45.           <span class="content"><font></font>
  46.             <span class="headline">grapes</span><font></font>
  47.             <span class="excerpt">Lorem ipsum dolor, .../span><font></font>
  48.             <span class="link"><font></font>
  49.               <div class="fill fill-dark"></div><font></font>
  50.               <a href="#">Open catalog</a><font></font>
  51.             </span><font></font>
  52.           </span><font></font>
  53.         </span><font></font>
  54.        </li><font></font>
  55. <font></font>
  56.        <li class="slider-list__item"><font></font>
  57.         <span class="back__element"><font></font>
  58.           <img src="assets/img/back_strawberry_003.png" /><font></font>
  59.         </span><font></font>
  60.         <span class="main__element"><font></font>
  61.           <img src="assets/img/bottle_strawberry_003.png" /><font></font>
  62.         </span><font></font>
  63.         <span class="front__element"><font></font>
  64.           <img src="assets/img/front_strawberry_003.png" /><font></font>
  65.         </span><font></font>
  66.         <span class="title__element"><font></font>
  67.           <span class="title">strawberry</span><font></font>
  68.         </span><font></font>
  69.         <span class="more__element"><font></font>
  70.           <span class="content"><font></font>
  71.             <span class="headline">strawberry</span><font></font>
  72.             <span class="excerpt">Lorem ipsum dolor, ...</span><font></font>
  73.             <span class="link"><font></font>
  74.                 <div class="fill"></div><font></font>
  75.               <a href="#">Open catalog</a><font></font>
  76.             </span><font></font>
  77.           </span><font></font>
  78.         </span><font></font>
  79.        </li><font></font>
  80.        <font></font>
  81.     </ul><font></font>
  82.     <font></font>
  83.     <div class="slider__nav-bar"><font></font>
  84.       <a class="nav-control"></a><font></font>
  85.       <a class="nav-control"></a><font></font>
  86.       <a class="nav-control"></a><font></font>
  87.     </div><font></font>
  88.     <font></font>
  89.     <div class="slider__controls"><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  90.       <a class="slider__arrow slider__arrow_prev"> </a></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  91.       <a class="slider__arrow slider__arrow_next"> </a></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  92.     </ Div></font></font><font></font>
  93. <font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  94.   </ Div>      </font></font><font></font>
  95. <font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  96. </ Section></font></font><font></font>
Скопировать код
Официальный URL-адрес плагина карусели: https://coidea.website/categories/challenges/circular-slider-with-anime-js/


Сообщение слишком большое

Для просмотра Вам необходимо авторизироваться.
Если Вы еще не зарегистрированы, перейдите по ссылке: Регистрация.

x
Ответить

Магия Жалоба

Чтобы ответить, вам надо авторизироваться в системе Вход | Регистрация

Правила начислений  Разрешить ответные письма, чтобы напомнить автору

Сектор творческих людей
Горячая линия

638638758

С понедельника по воскресенье с 9:00 до 23:00

Обратной связь

admin@artace.ru Онлайн

QR-код

Powered by Discuz! X3.4© 2001-2018 Comsenz Inc.