* Согласен(на) на обработку указанных персональных данных в целях реализации заказов через Интернет-магазин 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); } }

Действующие каталоги FABERLICFABERLIC
ДЕЙСТВУЮЩИЕ КАТАЛОГИ (18 марта - 7 апреля)

До окончания действия цен каталога


Ассортимент товаров FABERLICFABERLIC
АССОРТИМЕНТ ТОВАРОВ

Кислородная косметика

Кислородная косметика Faberlic

ПЕРЕЙТИ В РАЗДЕЛ

Ароматы для нее и для него

Парфюмерия Faberlic

ПЕРЕЙТИ В РАЗДЕЛ

Одежда, обувь и аксессуары Faberlic

Модная коллекция Faberlic

ПЕРЕЙТИ В РАЗДЕЛ

Косметика для дома, посуда и аксессуары

Товары для дома Faberlic

ПЕРЕЙТИ В РАЗДЕЛ

Товары для здоровья

Товары для здоровья Faberlic

ПЕРЕЙТИ В РАЗДЕЛ

Продукты серии Faberlic Nechaev Family Club

ПЕРЕЙТИ В РАЗДЕЛ

Весь ассортимент продукции Faberlic

Серии продукции FABERLICFABERLIC
НОВОСТИ ИЗ МИРА МОДЫ И КРАСОТЫ

Miss Skinni - это простота и эффективность в уходе за кожей!

Невозможно устоять: аромат-провокация!

БУДЬТЕ ЗДОРОВЫ! Новинки каталога Faberlic

Все новости Faberlic

Действующие каталоги FABERLICFABERLIC
НОВИНКИ КАТАЛОГА

Все новинки каталога Faberlic

Действующие каталоги FABERLICFABERLIC
О КОМПАНИИ

Подробнее о Компании Faberlic

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


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

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