Эффект заполнения иконок цветом

demosourse

Эффект заполнения иконок цветом, который невозможно не заметить.

Структура

Никаких продвинутых CSS приёмов тут не надо. Нам нужно подготовить изображение и “поиграть” с его позиционированием. Нужную графику я создам в Adobe Illustrator. Важно не забыть сделать прозрачным фон:

Чтобы донести мысль более доступно взгляните на изображение:

Наша структура — это ничто иное как ненумерованный список. Я создал 2 пустых элемента для того чтобы обеспечить отступы верхней и нижней части контента.

<ul>
	<li class="cd-service cd-service-divider"></li>

	<li class="cd-service cd-service-1">
		<h2>Web Design</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur tenetur quod veritatis nulla aspernatur architecto! Fugit, reprehenderit amet deserunt molestiae ut libero facere quasi velit perferendis ullam quis necessitatibus!</p>
	</li> <!-- cd-service -->

	<li><!-- ... --></li>

	<li class="cd-service cd-service-divider"></li>
</ul>

Стили

Интересующие нас области создаём с помощью псевдо-элементов ::before и ::after элемента body. Цвет будем менять с помощью jQuery при прокрутке по странице. Поскольку мы будем использовать формат .svg, то размер изображения без проблем будет корректироваться в зависимости от размера устройства.

body::before, body::after {
  content: '';
  position: fixed;
  width: 89.8%;
  max-width: 1170px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  height: 50%;
  z-index: -1;
}

body::before {
  top: 0;
  background-color: #f4bd89;
  transition: all 0.8s;
}

body::after {
  top: 50%;
  background-color: #71495b;
}

.cd-service {
  position: relative;
  z-index: 2;
  min-height: 50px;
  margin-left: 56px;
  background-color: #3e253c;
  padding: 1em 1em 4em;
}

.cd-service::before, .cd-service::after {
  content: '';
  position: absolute;
  width: 56px;
  right: 100%;
  z-index: 2;
}

.cd-service::before {
  top: 0;
  height: 50px;
  background-repeat: no-repeat;
}

.cd-service::after {
  top: 50px;
  bottom: 0;
  background-image: url("../img/cd-pattern-small.svg");
  background-repeat: repeat-y;
}

.cd-service.cd-service-1::before {
  background-image: url("../img/cd-icon-1-small.svg");
}

.cd-service.cd-service-2::before {
  background-image: url("../img/cd-icon-2-small.svg");
}

.cd-service.cd-service-3::before {
  background-image: url("../img/cd-icon-3-small.svg");
}

.cd-service.cd-service-4::before {
  background-image: url("../img/cd-icon-4-small.svg");
}

Обработка событий

Теперь нам нужно реализовать смену цвета при прокручивании страницы.

Для каждого цвета создадим свой класс:

body.new-color-1::before {
	background-color: #c06c69;
}

body.new-color-2::before {
	background-color: #bf69c0;
}

/*other classes .new-color-n here*/

Таким образом, если у вас n .cd-service элементов списка, то нужно создать (n-1) классов с цветом для тега body.

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/icons-filling-effect/
Перевел: Станислав Протасевич
Урок создан: 11 Марта 2016
Просмотров: 7281
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^