Верстка сайта

Создаем эффект падающего снега на веб-странице при помощи CSS3

Сегодня мы создадим эффект падающего снега при помощи одного только CSS3, этот эффект отлично подойдет для создания новогодних и рождественских открыток.

Создаем эффект падающего снега на веб-странице при помощи CSS3

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

Итак, приступим.

HTML-код будет предельно простой:

<!DOCTYPE html>
<html lang="ru" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>С Новым Годом!</title>
  </head>
  <body>
    <div id="wrapper">
      <h1>С Новым Годом!</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit in voluptate velit esse 
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
        cupidatat non proident, sunt in culpa qui officia deserunt mollit 
        anim id est laborum.
      </p>
    </div>
  </body>
</html>

Фон для нашей открытки можно выбрать любой. Для него можно выбрать элемент body. Стиль может выглядеть примерно так:

body {
  background-image: url('christmas.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

Здесь мы использовали background-size: cover, чтобы наш фон масштабировался с сохранением пропорций.

Для создания падающего снега мы используем следующую идею. Возьмем три картинки со снежинками, разного размера и прозрачным фоном. Вы можете добавить и больше, если вам так нравится, но мы не будем устраивать здесь "метель" и ограничимся тремя. Картинки со снежинками представляют собой квадратные PNG-изображения, размером 500, 400 и 300 пикселей, и, как я уже говорил, с прозрачным фоном. Снежинки можно нарисовать в Photoshop или Gimp с помощью соответствующих кистей. Я использовал кисти для Gimp GIMP Snowflake Brushes by ~Project-GimpBC. Также снежинкам можно задать разный размер и разную степень размытия, чтобы они выглядели более естественно.

Теперь мы применим эти изображения для нашего блока-обертки <div id="wrapper">. Зададим ему высоту 100vh, чтобы он занял всю площаль окна.

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

div#wrapper {
  background-image: url('i/flake1.png'), url('i/flake2.png'), url('i/flake3.png');
  background-repeat: no-repeat;
  height: 100vh;
  animation: snow 20s linear infinite;
}

Создание анимации

Для создания анимации мы будем использовать @keyframes. Имя для анимации зададим, например, snow. Далее мы создадим два фрейма. Первый это то как наша страница будет выглядеть в начале анимации, второй – то, как она будет выглядеть в конце. В исходном состоянии я разместил все наши фоновые изображения по верхней кромке страницы, определив background-position в процентах. Затем каждое изображение будет перемещено в разные места на странице с заданием конечных координат также в процентах.

На следующем шаге мы зададим правила показа анимации. Сначала мы указываем имя анимации, которую мы хотим использовать, в данном случае "snow", затем длительность анимации (20 секунд), затем выбираем тип анимации (linear) и, наконец, цикл анимации - бесконечный.

div#wrapper {
  background-image: url('i/flake1.png'), url('i/flake2.png'), url('i/flake3.png');
  background-repeat: no-repeat;
  height: 100vh;
  animation: snow 20s linear infinite;
}

@keyframes snow {
    0% {background-position: 10% 1rem, 50% 5rem, 80% 2rem;}
    100% {background-position: 80% 100%, 10% 100%, 50% 100%;}
}

Это и есть все наши стили!

Заключение

Итак, мы продемонстрировали идею создания симпатичной новогодней открытки, которая не будет работать разве что в IE6. Идею мы продемонстрировали. За вами весь остальной креатив!

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

Новый комментарий

Имя:
Для редактирования комментария осталось 10 минут
Комментарии отсутствуют