Ідея тут полягає в тому, щоб створити вигляд слайд-шоу без каруселі. Іншими словами, ми робимо серію зображень слайдом зліва направо і повторюємо, коли досягнуто кінця зображень. Фокус у тому, що ми використовуємо одне фонове зображення з анімацією CSS для (...)
Ідея тут полягає в тому, щоб створити вигляд слайд-шоу без каруселі. Іншими словами, ми робимо серію зображень слайдом зліва направо і повторюємо, коли досягли кінця зображень.
Фокус у тому, що ми використовуємо одне фонове зображення з анімацією CSS для переміщення його по екрану та повторення, коли це буде зроблено. Це створює ілюзію галереї зображень, коли ми дійсно використовуємо одне зображення.
Налаштування HTML
Ось план того, як потрібно структурувати наш HTML:
Ми працюємо з двома елементами: один, який ми викликаємо .container, відповідає точній ширині області перегляду, і інший, який ми викликаємо, .sliding-backgroundякий знаходиться позаду .containerі переповнює його. По суті, ми використовуємо .containerяк маску, щоб приховати всю ширину, .sliding-backgroundколи вона прокручується по екрану.
Це означає, що нам потрібно створити лише два елементи в розмітці HTML:
Розміщення елементів
Давайте додамо кілька CSS, які правильно розмістять наші два елементи.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Ми .containerвикористовуємо overflowвластивість, яка приховує все, що візуально міститься поза ним. Думайте про це як про урожай на фотографії. За межами контейнера можуть бути зайві речі, але контейнер заважає нам це бачити.
Ось тут і .sliding-backgroundвступає в дію наш . Він встановлений на якусь смішну ширину, яка переповнює більшість областей перегляду. І в цьому фокус: це має бути щось, що переповнює контейнер. У цьому випадку ми використовуємо дещо довільно вибрану 5076pxширину, яка повинна переповнювати більшість областей перегляду браузера.
Створення фонового зображення
Нам потрібне зображення, якщо ми створюємо ілюзію галереї слайд-шоу, так? Це наш наступний порядок ведення бізнесу.
Пам’ятаєте, як ми згадували про дещо довільно вибрану 5076pxширину ковзаючого фону? Ну, це довільно, але навмисно в тому сенсі, що воно красиво ділиться на 3, що вписується в хронометраж для хвилинного циклу, який з’явиться трохи пізніше. Це означає, що полотно для нашого фонового зображення - це 5076 / 3або 1692px. Врешті-решт, наш фон повториться загалом три рази за одну хвилину в нескінченному циклі. Математика для перемоги!
500pxВисота дійсно довільний. Це може бути будь-що, що завгодно, якщо це також фактичний розмір файлу фонового зображення.
Файл Photoshop, використаний для створення фонового зображення для демонстрації на початку цього розділу, можна завантажити, якщо ви шукаєте вихідну точку.
Після того, як зображення буде збережено (і оптимізовано!), Ось що ми будемо використовувати як фонове зображення в CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Чудово! Це дає нам величезне зображення, яке переповнює контейнер, і тепер його можна використовувати для прокрутки екрану до кінця.
Анімація фону
Добре, давайте змусимо цю справу рухатись. Ми хочемо, щоб він рухався зліва направо в циклі, який повторюється знову і знову, щоб створити безшовний ефект, що зображення триває вічно.
Спочатку визначимо анімацію CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Ми використовуємо transformвластивість, щоб розташувати ліве зображення біля лівого краю контейнера, коли починається анімація, приблизно так:
На момент завершення анімації вона буде трансформувати позицію негативно (зліва направо) на величину, яка відповідає точній ширині нашого зображення. Оскільки в .sliding-backgroundтри рази більше ширини фактичного зображення, зображення повторюється три рази від 0% до 100%, перш ніж повторити цикл.
Примітка: причина, через яку ми використовуємо додаткову
background-positionна основному transformдля здійснення руху, що набагато ефективніше.
Добре, давайте округлимо речі, зателефонувавши нашій slideанімації на .sliding-backgroundклас:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationВластивість інструктує .sliding-backgroundвикористовувати slideанімацію і запустити його в протягом однієї хвилини в той час , в лінійному, нескінченний цикл.
Склавши все разом
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )