Анімаційний банер для сайту
Зараз я докладно розпишу, як працює слайдер, а потім розповім, як його поставити на сайт і що потрібно знати, щоб змінити картинку або змінити динаміку і сюжет кожного слайда. По-перше, скажу, що я досить багато провозився з цим слайдером, очищав його від купи непотрібного сміття (у вигляді картин, css і js-файлів і зайвого коду). По-друге скажу, що даний анімаційний слайдер допоміг мені зробити презентацію на одному сайті, яка вийшла досить непоганою та функціональною. Банер представляє собою чотири слайди, в якому є якась інформація у вигляді тексту і картинок. Кожна картинка і блок з текстом плавно виїжджають зверху, знизу, праворуч або ліворуч, і кожен елемент має свій час для появи. І так показано чотири слайди з різною анімацією виїзду інформації.
З навігації є стрілочки, щоб переглянути наступний слайд або повернутися до попереднього. Також є буліти, за допомогою яких теж можна керувати банером, і індикатор часу зміни слайдів у вигляді кола з червоною смужкою, що рухається.
Встановлення анімаційного банера на сайт
1. Завантажуємо архів з мого сайту, натиснувши кнопку "Завантажити"
2. Розпаковуємо архів у корінь вашого сайту
3. Прописуємо шляхи до css та js файлів на сторінці, де у вас буде розміщено цей банер. Між і вставляємо наступний код:
У наступному рядку:
можна буде видалити, тому що це йде підключення латинських шрифтів, а у вас у слайдері швидше за все будуть українські шрифти
4. Вставляємо цей код, туди, де у вас буде слайдер:
Слайдер готовий! Тепер поговоримо про його управління та зміну слайдів. Я просто скажу, що за що відповідає, а ви самі вже пробуватимете і експериментуватимете. Не забуваємо, що всі цифри в html коді представлені впікселів, а елементи позиціонуються щодо лівого краю і верху.
data-initial-left - відповідає за позицію з якої координати з лівого боку виїжджатиме блокdata-initial-top - відповідає за позицію з якої координати зверху виїжджатиме блокdata-final-left - кінцева позиція елемента в слайдері щодо лівого краюdata-final-top - кінцева позиція елемента в слайдері відносно верхуdata-duration - з якою швидкістю з'являтиметься зображення або текстdata-fade-start - прозорість при стартовій позиції елемента (значення вказується у відсотках)data -delay - через який час елемент почне з'являтися (у секундах)