Простой способ наложения падающих снежинок на секции или фотографии всего одним элементом <div class="snowblock"></div>

Пример:

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

HTML:

Данный код должен размещаться в элементе с относительным позиционированием position: relative

CSS:

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

Размер снежинок можно задать свойством background-size, а их скорость продолжительностью анимации или позицией сдвига background-position

Установка на фотографии:

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

Для примера возьмем карточки из новостных блоков

Добавим в класс .grid-item .image стиль position: relative; и JS для библиотеки jQuery

В итоге получим такой результат:

Название новости

Текст статьи или новости

Еще текст статьи или новости

И еще текст статьи или новости, который не умещается на одной строчке

Название новости

Текст статьи или новости

Название новости

Текст статьи или новости

Еще текст статьи или новости

И еще текст статьи или новости

Смотрите также:

Очень простой и быстрый способ добавить на свой сайт падающие снежинки

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

Простой способ определить, показывается ли реклама на странице или блокируется приложением

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

Ваш комментарий отправлен!

Комментарии:

  • Ирина:

    Спасибы, очень просто и мило! )

    Ответить
  • Роман:

    Немного фризит снежок) А в целом просто и симпотично

    Ответить