FABERLIC
МЕНЮ САЙТА

* Согласен(на) на обработку указанных персональных данных в целях реализации заказов через Интернет-магазин FABERLIC в соответствии с политикой конфиденциальности


* Согласен(на) на обработку указанных персональных данных в целях реализации заказов через Интернет-магазин FABERLIC в соответствии с политикой конфиденциальности

ОСТАВИТЬ ОТЗЫВ О ТОВАРЕ:

CSS Слайдер


ОБРАТНАЯ СВЯЗЬ FABERLICFABERLIC
ОБРАТНАЯ СВЯЗЬ

Если у вас остались вопросы, задайте их нашему консультанту удобным для вас способом:

ВЫБЕРИТЕ ТЕМУ СООБЩЕНИЯ:

* Согласен(на) на обработку указанных персональных данных в целях реализации заказов через Интернет-магазин FABERLIC в соответствии с политикой конфиденциальности

ВХОД В ЛИЧНЫЙ КАБИНЕТ
РЕГИСТРАЦИЯ В FABERLIC
Добро пожаловать в мир красоты и успеха Faberlic!FABERLIC
CSS Слайдер
CSS Слайдер
Заголовок 1

Описание 1

Заголовок 2

Описание 2

Заголовок 3

Описание 3

Заголовок 4

Описание 4

Немного о коде

На показ каждого слайдера выделяется 10 секунд, а всего их 4. Поэтому общая продолжительность анимации составляет 40 секунд. Это указывается в строках animation: slideanim 40s infinite и animation: zoom 40s infinite

Для каждого слайда отдельно устанавливается задержка, это классы .slideshow-item:nth-child(1), .slideshow-item:nth-child(1) img и т.д.

Значения в анимации slideanim устанавливаются так:

12.5% {opacity: 1} - 100 / 4 (кол-во слайдов) / 2, при котором переходим с полной прозрачности в видимую область

25% {opacity: 1} - 100 / 4 (кол-во слайдов), при котором показываем непрозрачный слайд

37.5% {opacity: 0} - складываем первые два значения для перехода опять в прозрачность

Значения в анимации zoom устанавливаются так:

50% {transform: scale(1.3)} - 100 / 4 (кол-во слайдов) x 2, при котором увеличиваем фотографию

Например, для 7-ми слайдов эти анимации будут выглядеть так:

@keyframes slideanim { 7.15%{ opacity: 1; } 14.3%{ opacity: 1; } 21.5%{ opacity: 0; } } @keyframes zoom { 28.5%{ transform: scale(1.3); } }

ПОКУПАЙТЕ В FABERLIC ВЫГОДНО!



СКИДКИ

на все покупки

БОНУСЫ И ПОДАРКИ

+ участие в закрытых акциях и распродажах

КУПИТЬ ПРОСТО

оформляете на сайте заказ и получаете его в одном из 8500 пунктов выдачи

* Согласен(на) на обработку указанных персональных данных в целях реализации заказов через Интернет-магазин FABERLIC в соответствии с политикой конфиденциальности


Присоединяйтесь к нашей дружной команде!

МЫ БУДЕМ РАДЫ СОТРУДНИЧЕСТВУ С ВАМИ!



Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика Top.Mail.Ru PR-CY Rank
@товары Фаберлик, продукция Faberlic, сайт Faberlic, регистрация в фаберлик, стать консультантом Faberlic, подписаться в Фаберлик, весь ассортимент