Автор

Эффект заливки иконок

Эффект заливки иконок


Эффектный эффект наполнения ваших значков, который можно использовать для создания простой страницы, выглядит круто и динамично.

 

ДЕМО
ИСХОДНИКИ

 

Иногда вы просто хотите создать что-то классное. Возможно, для одной из этих страниц - о нас, нашей истории и т.д. - где вы хотите придумать что-то уникальное для поддержки своего бренда. Этот эффект может помочь вам создать классную веб-страницу с несколькими значками.

 

Создание структуры

Прежде чем погрузиться в код, я попытаюсь объяснить, что стоит за этим ресурсом. Там нет продвинутой техники CSS, это все о создании правильных активов / значков и игре с позиционированием элементов. Я начал с создания значков с нуля в Adobe Illustrator. Теперь важно сделать прозрачную область значка, который вы хотите заполнить:

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

Чтобы убедиться, что это на 100% ясно, предлагаю пример, чтобы показать вам процесс анимации:

Тем не менее, структура является просто неупорядоченным списком. Я создал 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..........</p>
</li> <!-- cd-service -->

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

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

 

Добавление стиля

2 цветных прямоугольника внизу были созданы как ::before и ::after псевдоэлементов тела. Как вы можете видеть, я добавил переход CSS3 к одному из них, потому что мы собираемся изменить его цвет в jQuery, пока содержимое прокручивается. Значки всегда ::before селекторами. Поскольку разделительная линия под значками - другой .svg-файл - должна реагировать и изменять ее высоту в соответствии с содержимым, я добавил ее также как псевдоэлемент, с расстоянием от вершины, равным высоте значка.

body::before, body::after {
  /* the 2 underneath colored sections */
  content: '';
  position: fixed;
  /* trick to remove some annoying flickering on webkit browsers */
  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");
}

 

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

Дополнительным эффектом, который мы хотели достичь, является изменение цвета заполнения при прокрутке. Чтобы сделать это, для каждого элемента списка .cd-service мы создали класс для элемента body:

body.new-color-1::before {
	background-color: #c06c69;
}
 
body.new-color-2::before {
	background-color: #bf69c0;
}
 
/*other classes .new-color-n here*/

Это означает, что если у вас есть элементы списка .cd-service, вам нужно создать (n-1) классы для тела.

Когда пользователь начинает прокручивать, как только в окне просмотра отображается значок .cd-service-2, мы хотим, чтобы значки, заполняющие цвет, менялись (это первое изменение цвета заполнения), поэтому мы назначаем класс .new-color-1 телу , То же самое делается для всех остальных разделов .cd-service-n.

Наконец, когда в окне просмотра отображается новый .cd-section, мы назначаем ему класс .focus, чтобы выделить его содержимое.

 

Вот и всё!


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Эффект заливки иконок

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


Эффект заливки иконок

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


Эффект заливки иконок

Английская аббревиатура CMS расшифровывается как «Система управления контентом». О «сиэмэсках» говорят тогда, когда обсуждают сайты. Вы также можете встретить термины «система управления сайтом», «конструктор сайта», «движок сайта» — все они являются вариантами вольного перевода англоязычного понятия Content Management System. Попробуем разобраться, что это такое, и для чего оно необходимо.
В английском оригинале главное слово стоит в начале словосочетания, поэтому начнём с него.


Эффект заливки иконок

Небольшой скрипт автоматически изменит год в нижней части (футере) вашего сайта. Не нужно каждый год менять его в шаблоне сайта — обновится сам, в зависимости от настроек посетителя.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close