Меню

Как сделать чтобы цвет фона менялся css



Слайдер фонового изображения или меняющийся фон сайта с помощью CSS

Доброго времени суток. 🙂

Хочу показать Вам как с помощью CSS можно организовать — слайдер фона сайта. То есть фон сайта будет меняться и станет динамичным. Такой эффект часто применяют на сайтах визитках, для демонстраций портфолио или других изображений, которые расскажут о тематике и направлении сайта.

Данный слайдер прост в установке и если разберетесь, то сможете легко его настроить и добиться нужного результата. Для работы данного слайдера, нужно всего несколько элементов, которые мы сейчас рассмотрим по порядку.

HTML разметка

Тут все очень просто, нужно просто добавить UL-список в самое начало сразу после тега body.

В списке всего три строки li, то есть слайдер рассчитан на 3 изображения, если нужно больше, то первым шагом будет добавление еще нужного количества строк. Двигаемся дальше.

CSS стили

Тут наверное самая основная часть работы, так как от CSS, зависит то как будет работать наш слайдер. Открываем файл стиле вашего сайта и добавляем в него следующий код.

Если Вы разбираетесь в CSS, то для Вас не составит труда понять, что за что отвечает. Расскажу по минимуму, потому как обучать CSS, нет смысла.

Наш список со слайдами имеет класс body_slides. Ему заданы стили, для внешнего вида и общих настроек.

Далее у нас идет псевдоэлемент — :after, который задает дополнительный слой и поверх фона наложен узор в виде точек. Делается это с помощью изображение, к которому указан путь images/pattern.png. Если у Вас другой путь, то укажите его правильно.

.body_slides li:nth-child(1) — это первый по порядку слайд и ему задан фоновый рисунок. Далее идет nth-child(2), ему кроме рисунка задано еще время и равно 6 сек. То есть, он появится через 6 секунд после первого слайда. Далее nth-child(3), он появится еще через шесть секунд, поэтому у него время 12 сек. Если нужно добавить 4 слайд, то добавляем nth-child(4) и у него должно быть время уже 18 секунд. Думаю тут понятно.

Далее нужно указать полное время анимации, оно сейчас задано в body_slides li и равно 18 сек. Если добавите 4 слайд то будет равно 24 и так далее. Если с математикой дружите, должны справится, главное не ошибиться ибо слайдер ровно не заработает. По желанию можно ускорить или замедлить, прописав нужное время.

keyframes anim_slides — это появление и исчезновении слайда. Изначально слайд прозрачный и ему задано условие — opacity:0;. Когда приходит очередь любого из слайдов, он сначала появляется, а потом начинает вновь становится прозрачным и полностью исчезает, а на его месте появляется новый. В данном примере — 3 слайда и 100% анимации это время перелистывания всех слайдов, а не одного. Поэтому слайд первый появляется виден и исчезает на 30%(максимально можно 33.3%) потому как, если 100% разделить на 3 слайда — получится 33,3%. Если бы у вас было 4 слайда — то 25%. То бишь, нужно показать появление, показ и исчезновение слайда за 25% от общих 100%. В нашем примере с 3 слайдами. Слайд появляется от 0 до 6%, виден от 6 до 24% и исчезает от 24 до 30%. Если хотите изменить скорость появления или исчезновения, меняйте проценты — это процент от общего времени. От правильности указания процентов — зависит и правильность работы слайдера.

Остальные настройки уже по желанию и нужде — общий фон, сейчас черный, путь к картинкам, позиционирование, уровень слоя и тд. Преимущество данного слайдера в том, что он простенький и не использует скриптов и целых библиотек, если бы он был сделан с помощью — jQuery. Очень надеюсь, что если Вы хотели себе смену фоновых картинок то данный CSS слайдер, Вам поможет.

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

Проголосовало: 50, в среднем: 4.8 из 5

Доброго времени суток У меня на сайте уже есть статья о кнопке возврата к верху страницы. Мне пару раз задавали вопрос как сделать кнопку чтобы делала наоборот, при нажатии опускала…

Доброго времени суток В данной статье, я попробую показать вам способ, как с помощью PHP определить, с какого мобильного устройства зашел посетитель, точнее его операционную систему. Сегодня имеется две самые…

Доброго времени суток В этой статье я покажу простой скрипт, который поможет копировать текст в блоке при клике на него. Данный скрипт очень полезная штука, если ваша основная задача -…

Доброго времени суток Это коротенькая статья, в которой я расскажу как можно поменять числовое поле ввода, оно же type=»number». Как известно, стандартное числовое поле имеет не очень привлекательный вид. Данная…

Опубликовано 46 комментариев

Спасибо! Это действительно очень просто и круто! То что нужно.

А можно сделать так, что бы фотографии показывались рандомно? То есть, чтобы при переходе на другую страницу сайта (или обновлении текущей) фон показывался не с первого фото.

Читайте также:  Танец цветов как назвать

Я сделал так — подключил отдельный css в виде файла php, а в нем реализовал следующим образом:

$array = array(‘mainbg.jpg’,’mainbg2.jpg’,’mainbg3.jpg’,’mainbg4.jpg’,’mainbg5.jpg’);
shuffle($array);

.body_slides li:nth-child(1) <
background-image: url(/site/tpl/v1/bg/$array[0])
>
.body_slides li:nth-child(2) <
-webkit-animation-delay: 8.0s;
-moz-animation-delay: 8.0s;
background-image: url(/site/tpl/v1/bg/$array[1])
>
.body_slides li:nth-child(3) <
-webkit-animation-delay: 16.0s;
-moz-animation-delay: 16.0s;
background-image: url(/site/tpl/v1/bg/$array[2])
>
.body_slides li:nth-child(4) <
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;
background-image: url(/site/tpl/v1/bg/$array[3])
>
.body_slides li:nth-child(5) <
-webkit-animation-delay: 32.0s;
-moz-animation-delay: 32.0s;
background-image: url(/site/tpl/v1/bg/$array[4])
>

Спасибо огромное за статью

форма комментария вырезала часть кода. короче после /bg/ идет php-вставка
$array[0]
$array[1]
$array[2]
$array[3]
$array[4]

Спасибо и вам за ваш пример!

сделал все как написано. НЕ работает.. помогите пожалуйста. мой скайп sluh-master wattup +79818257008

Прикольно, но в IE не работает. Во всяком случае в 11.

Спасибо! Крутой слайдер! А как сделать, чтобы каждый бэкграунд кликабелен был и каждый со своей ссылкой?

Обьясните для чайника пожалуйста, как именно замедлить слайдер? (нужно что бы каждый слайд длился минуту)

Смотрите, сейчас время всей анимации 18 секунд. С 28-32 строки кода стилей видно значение 18s.
У нас три слайда, первый показывается 6 сек с 0до 6. Второй тоже 6 сек с 6 до 12 секунды и третий тоже 6 сек с 12 до 18 секунды. Значит Вам нужно заменить значения на большие, то есть если у Вас 3 слайда по минуте это — 180 секунд, то бишь в минуте 60 сек умножаем на три слайда, вот и получилось 180 секунд.
Первому слайду время указывать ненужно, он и так будет показан теперь 60 сек.
Второму слайду в коде заменим 6 сек на 60
38-39 строки там значения 6.0s; меняем на 60.0s; и так далее для третьего слайда
43-44 строки 12.0s; меняем на 120.0s;
Вот и все. теперь у Вас каждый слайд по 60 сек будет висеть, то бишь по одной минуте. Я бы не советовал так долго, вероятность того что человек увидит все крайне мала, хотя если у Вас много текста на странице который нужно читать, тогда да слайдшоу будет видно 🙂

Виталик, ты меня просто спас этой статьей! Спасибо! Так не хотелось в готовую тему подключать слик-слайдер. Все очень доходчиво, просто и понятно!

Рад, что смог помочь 🙂

Спасибо классная идея, у вас одна ошибка чисто грамматическкая
.body_slides li background-repeat:none; должно быть no-repeat вместо none, но это так мелочи :)))

Здравствуйте, Виталий! Слайдер супер. Совсем не нагружает сайт. Спасибо Вам за такой код!. Только вот хочется чуть-чуть изменить.
Подскажите, пожалуйста, как сделать так ,чтобы слайды шли не через черный фон,а постепенно меняясь. Во втором слайде я поставила время 7 s. Получается, что 2 и 3 слайд меняются постепенно. А потом переход с 3-го слайда на первый снова черный фон и так же черный фон при переходе с 1-го на 2-й слайд. Заранее спасибо за ответ!

Если вы поменяли время второго слайда, то нужно менять и общее время. Выше я отвечал на схожий комментарий и объяснял как работает сам слайдер. Черный цвет задан в 6 строке стилей background:#000;

Виталий, спасибо за ответ! Я просто убрала время 0s и сделала черный фон прозрачным и получилось вот так:
.body_slides li <
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-size:cover;
background-repeat:none;
opacity:0;
-webkit-animation: anim_slides 24s linear infinite;
-moz-animation: anim_slides 24s linear infinite;
-o-animation: anim_slides 24s linear infinite
-ms-animation: anim_slides 24s linear infinite;
animation: anim_slides 24s linear infinite;

Виталий здравствуйте, подскажите пожалуйста как можно применить ваш слайдер для картинки, а не бэкграунда. За ранее спасибо.

Поменяйте стили. Сейчас блок фиксированный и растянут на весь экран. Задайте ему нужный размер и поместите туда куда нужно и он будет листать картинки.

Добрый день!
Применил Ваш слайдер на свой сайт. В целом всё хорошо, проблему вижу только в том, что на разных экранах картинки показываются по разному: на каких-то экранах удачно, на других нет.
Решение видится в том, чтобы разработчик сайта подготавливал в данном случае не 3 картинки, а несколько групп из 3-х картинок, каждая из которых больше подходит к тому или иному устройству.
Было бы здорово, если бы Вы дополнили слайдер js-кодом, который определял бы размер экрана и далее определял какую группу картинок использовать.

добрый день. не могу разобраться как вместо статичного фона на входном экране вставить этот слайдер фонов на этом сайте http://dufor-potolok.ru/
Может кто-нибудь помочь? У меня вместо слайдера черный фон и еще другие фоны тооже становятся черными некоторые

Все отлично, спасибо, но есть одна проблема — explorer не отображает ни фон ни содержимого его! как можно это победить? хоть криво, хоть косо, но как сделать что б в нем отображалось? иначе просто смысл пропадает в использовании данного чуда

В 11 работает, в Эдже работает, а больше я даже заморачиваться не буду. Если человек использует более старые версии этого недобраузера, мне его искренне жаль. И, НЕ ИМЕЕТ СМЫСЛА стараться для него, потому как, он скорее всего слаборазвит и неоценит этот слайдер 🙂

Читайте также:  Как настроить струйный принтер по цветам

Про ниже 10 explorer согласен, нет смысла, но я как раз о 11 версии и говорил, у меня на компе стоит explorer 11 и он открывает слайдер http://nikaten.filterwater.ru/ без изображений и даже без отображения внутренностей в если туда воткнуть спан или img

и ваш пример тоже открываю в IE11 — так же не отображается =( попросил друга, может это у меня какой то не такой IE11, но и у него тоже не открылся слайдер как надо

Отказывайтесь от красивых сайтов для людей. Делайте простейший, некрасивый, с отсутствием эффектов сайт . Ну или городите миллион костылей, чтобы ослик смог корректно отобразить сайт 🙂 3% — посетителей на ИЕ вам скажут спасибо. Остальные 97% адекватов, просто обойдут Ваш сайт 🙂 Я уже года 3, абсолютно не обращаю на ИЕ внимание. С появлением ШТМЛ 5 не вижу смысла обращать внимание на ИЕ, он всеравно с ним не работает.

Я согласен. Заказчик не согласится, поэтому вопрос этот мне нужно решить или отказаться от идеи этого слайда как бы мне этого не хотелось. перепробывал хаки — не принесло результата, если поставить в стилях @keyframes anim_slides <
0%
6%
24%
30%
100%
>
то отображается лишь последний бэкграунд почему то, можешь просто подсказать хоть в какую сторону капать? заранее благодарен!

Искать старые скрипты, которые делают такой фон, возможно они будут работать на современных браузерах. CSS анимация толком работать не будет. Она из настоящего, а ИЕ это уродливое прошлое. На октябрь 2016года ИЕ11 — 5% пользователей интернета. Если Вашему заказчику Важны эти люди, а остальные 95% побоку, то сделайте ему простой сайт. Откажитесь от всего 🙂 Смысла стараться нет 🙂

Решение для IE 10 и 11:
стилях добавить@keyframes anim_slides <
0%
3%
33%
38%
100%
>
и
-o-animation-delay: s;
-ms-animation-delay: s;
в
.body_slides li:nth-child(2) 3 , 4 , 5. и будет работать. если кому надо в IE9 и ниже используйте хаки

Спасибо ОГРОМНОЕ!
Это просто опупенно!

Приветствую Вас!
Может кто-нибудь написать полный код с тегами, так чтобы скопировать и вставить в лендинг?
Благодарю за внимание!

Спасибо огромное! Именно то, что мне нужно. Долго искала и наконец-то нашла. Удачи Вам!

Рад, что смог помочь!

Здравствуйте! Отличный слайдер. А подскажите, как такой сделать на отдельной странице сайта, чтобы была ротация картинок (размер 1200х250)? У меня почти получилось, правда второй слайд появляется под первым, третий под вторым и т.д. Всего 5 изображений.
Если можно, пришлите ответ на email. Спасибо!

Вот бы кто подсказал как такой слайдер прикрутить к Joomla 3.

Привет всем!
А подскажите пожалуйста, как сделать подобное, но чтобы фон листался с права налево и с интервалом в секунд 5. Ну то есть на фоне первая картинка, проходит 5 сек и она плавно уезжает в право и сразу же за ней вторая, и так картинок 10 чтобы листались автоматически и по кругу.
Если знаете какую-нибудь статью по этому вопросу, то напишите пожалуйста. Если тут ссылок писать нельзя, то отправьте на мыло: artyom.eduardovich@yandex.ru
Буду очень благодарен за помощь.

Вверху боковой колонки справа есть поиск. Введите там слово слайдер и смотрите, все те что я применяю на своих сайтах, возможно какой-то из них вуам подойдет. Данный слайдер имеет ту анимацию что у него есть — Появление затухание. Его можно переделать под то что вам нужно, но на это нужно время и силы 🙂 Поищите готовый результат, так будет легче. Если не на моем сайте, то на просторах интернета такое должно быть 🙂

День добрый. Большое спасибо за ваш скрипт. Вы не могли бы подсказать, как сделать, чтобы изображения менялись медленно, то есть как изменить саму скорость смены картинок?

Microsoft Edge 42.17134.1.0 как сделать что бы в этой версии работало?

У меня еще более старая версия Microsoft Edge 40 и на ней все работает. Проверьте все ли коды правильно добавлены, сбросьте кэш.

Привет. Огромное спасибо за слайдер, великолепная вещь. Внедрил — все работает. Единственное, как не пробовал не могу сделать чтобы не полностью в черное уходило а как бы меняли плавно друг друга без полного затемнения. Подскажите?

Здравствуйте. Дело в том, что тут у всех слайдов общая анимация и таков ее принцип. Для того чтобы воплотить вашу идею, нужно переделать полностью саму анимацию, а вернее создать для каждого слайда свою.

Изучив все комментарии и сложив пазл, я все же смог настроить этот скрипт для корректного отображения во всех браузерах. Но у меня возникла лишь одна проблема! У меня всего 8 слайдов. Когда наступает очередь 8-го слайда он висит не 6 секунд а 12 из за чего первый слайд не виден и через 12 сек выползает сразу 2й слайд.
По времени проверил все множество раз. Пробовал выставлять общее время и 48 сек и 42 сек , не понимаю почему последний слайд висит 12 сек! Хелп!

Читайте также:  Что делать если экран монитора стал синего цвета

/* Отображения слайдера на ПК устройстве */
@media (min-width: 801px) <
body_slides <
list-style:none;
margin:0;
padding:0;
z-index:-2;
background:#fff;>
.body_slides,
.body_slides:after <
position: static;
width:100%;
height:100%;
top:0px;
left:0px;>
.body_slides:after <
content: »;
background: transparent url(images/pattern.png) repeat top left;>

.body_slides .body_slides li <
width:100%;
height:100%;
position:fixed;
bottom:0;
right:0;
background-size:cover;
background-repeat: no-repeat;
opacity:0;
-webkit-animation: anim_slides 48s linear infinite 0s;
-moz-animation: anim_slides 48s linear infinite 0s;
-o-animation: anim_slides 48s linear infinite 0s;
-ms-animation: anim_slides 48s linear infinite 0s;
animation: anim_slides 48s linear infinite 0s;
>
.body_slides li:nth-child(1) <
background-image: url(/wp-content/uploads/2020/03/q1sl.jpg);
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(2) <
-o-animation-delay: 6.0s;
-ms-animation-delay: 6.0s;
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(/wp-content/uploads/2020/03/q2sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(3) <
-o-animation-delay: 12.0s;
-ms-animation-delay: 12.0s;
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(/wp-content/uploads/2020/03/q3sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(4) <
-o-animation-delay: 18.0s;
-ms-animation-delay: 18.0s;
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
background-image: url(/wp-content/uploads/2020/03/q4sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(5) <
-o-animation-delay: 24.0s;
-ms-animation-delay: 24.0s;
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;
background-image: url(/wp-content/uploads/2020/03/q5sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(6) <
-o-animation-delay: 30.0s;
-ms-animation-delay: 30.0s;
-webkit-animation-delay: 30.0s;
-moz-animation-delay: 30.0s;
background-image: url(/wp-content/uploads/2020/03/q6sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(7) <
-o-animation-delay: 36.0s;
-ms-animation-delay: 36.0s;
-webkit-animation-delay: 36.0s;
-moz-animation-delay: 36.0s;
background-image: url(/wp-content/uploads/2020/03/q7sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(8) <
-o-animation-delay: 42.0s;
-ms-animation-delay: 42.0s;
-webkit-animation-delay: 42.0s;
-moz-animation-delay: 42.0s;
background-image: url(/wp-content/uploads/2020/03/q9sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
>

/* Отображения слайдера на мобильном устройстве */
@media (max-width: 800px) <
body_slides <
list-style:none;
margin:0;
padding:0;
z-index:-2;
background:#fff;>
.body_slides,
.body_slides:after <
position: static;
width:100%;
height:100%;
top:0px;
left:0px;>
.body_slides:after <
content: »;
background: transparent url(images/pattern.png) repeat top left;>

.body_slides .body_slides li <
width:100%;
height:100%;
position:fixed;
bottom:0;
right:0;
background-size:cover;
background-repeat: no-repeat;
>
.body_slides li:nth-child(1) <
background-image: url(/wp-content/uploads/2020/04/2020_02_23-45.jpg) ;
background-repeat: no-repeat;background-position: right;>

/* Отображения слайдера на ПК устройстве */
@media (min-width: 801px) <
body_slides <
list-style:none;
margin:0;
padding:0;
z-index:-2;
background:#fff;>
.body_slides,
.body_slides:after <
position: static;
width:100%;
height:100%;
top:0px;
left:0px;>
.body_slides:after <
content: »;
background: transparent url(images/pattern.png) repeat top left;>

.body_slides .body_slides li <
width:100%;
height:100%;
position:fixed;
bottom:0;
right:0;
background-size:cover;
background-repeat: no-repeat;
opacity:0;
-webkit-animation: anim_slides 48s linear infinite 0s;
-moz-animation: anim_slides 48s linear infinite 0s;
-o-animation: anim_slides 48s linear infinite 0s;
-ms-animation: anim_slides 48s linear infinite 0s;
animation: anim_slides 48s linear infinite 0s;
>
.body_slides li:nth-child(1) <
background-image: url(/wp-content/uploads/2020/03/q1sl.jpg);
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(2) <
-o-animation-delay: 6.0s;
-ms-animation-delay: 6.0s;
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(/wp-content/uploads/2020/03/q2sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(3) <
-o-animation-delay: 12.0s;
-ms-animation-delay: 12.0s;
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(/wp-content/uploads/2020/03/q3sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(4) <
-o-animation-delay: 18.0s;
-ms-animation-delay: 18.0s;
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
background-image: url(/wp-content/uploads/2020/03/q4sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(5) <
-o-animation-delay: 24.0s;
-ms-animation-delay: 24.0s;
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;
background-image: url(/wp-content/uploads/2020/03/q5sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(6) <
-o-animation-delay: 30.0s;
-ms-animation-delay: 30.0s;
-webkit-animation-delay: 30.0s;
-moz-animation-delay: 30.0s;
background-image: url(/wp-content/uploads/2020/03/q6sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(7) <
-o-animation-delay: 36.0s;
-ms-animation-delay: 36.0s;
-webkit-animation-delay: 36.0s;
-moz-animation-delay: 36.0s;
background-image: url(/wp-content/uploads/2020/03/q7sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
.body_slides li:nth-child(8) <
-o-animation-delay: 42.0s;
-ms-animation-delay: 42.0s;
-webkit-animation-delay: 42.0s;
-moz-animation-delay: 42.0s;
background-image: url(/wp-content/uploads/2020/03/q9sl.jpg) ;
background-repeat: no-repeat;background-position: left bottom; background-size: cover;>
>

/* Отображения слайдера на мобильном устройстве */
@media (max-width: 800px) <
body_slides <
list-style:none;
margin:0;
padding:0;
z-index:-2;
background:#fff;>
.body_slides,
.body_slides:after <
position: static;
width:100%;
height:100%;
top:0px;
left:0px;>
.body_slides:after <
content: »;
background: transparent url(images/pattern.png) repeat top left;>

.body_slides .body_slides li <
width:100%;
height:100%;
position:fixed;
bottom:0;
right:0;
background-size:cover;
background-repeat: no-repeat;
>
.body_slides li:nth-child(1) <
background-image: url(/wp-content/uploads/2020/04/2020_02_23-45.jpg) ;
background-repeat: no-repeat;background-position: right;>

Здравствуйте. В вашем коде анимация @keyframes anim_slides, отличается от примеров для других браузеров, ну это такое, мелкая ошибка. Вообще эта анимация рассчитана на 3 слайда.У вас — 8 слайдов. Вам нужно соотношение в процентах как в коде под этим текстом комментария. Как я их получил? 100% разделил на 8 ваших слайдов — получается 12.5. То бишь на 12,5% слайд должен исчезнуть. Вот и все. Далее примерно пишем когда появится оставаться и на 12,5 — исчезнуть.
@keyframes anim_slides <
0%
2%
10%
12.5%
100%
>

Добавить комментарий Отменить ответ

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Спасибо за скрипт. Я не много его подкорректировала и теперь работает как часики. Да он на самом дел.

Не для Виктора — вопрос задан давно, а для остальных. Не работал с ВордПресс, но наверное можно вста.

Скажите, а меня вот интересует такой вопрос. возможно ли сделать такую систему лайков, как на картин.

Здравствуйте, спасибо за статью. В принципе, все получилось по второму способу. Но на сайте еще уста.

Источник

Adblock
detector