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

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

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

Admin
22 декабря 2011г.

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Lobster&amp;subset=latin,cyrillic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" media="screen" href="style.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="container">
                <h2>С Рождеством и Новым Годом!</h2>
            </div>
        </div>
    </body>
</html>

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

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

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

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

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

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

html, body {
    height: 100%;
}

div#wrapper {
    background-image: url('snowflake1.png'), url('snowflake3.png'), url('snowflake2.png');
    height:100%;
}

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

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

@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

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

@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-ms-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

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

div#wrapper {
    background-image: url('snowflake.png'), url('snowflake3.png'), url('snowflake2.png');
    height:100%;
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
}

Для надписи можно использовать какой-нибудь красивый шрифт, в данном примере я использовал шрифт Lobster, который подключил к странице при помощи Google Web Fonts.

<link href='http://fonts.googleapis.com/css?family=Lobster&amp;subset=latin,cyrillic' rel='stylesheet' type='text/css'>

И вот что у нас в результате получилось.

Заключение

Итак, у нас получилась симпатичная новогодняя открытка, но, к сожалению, она будет "работать" только в Firefox, Chrome и Safari. IE начинает поддерживать keyframes только с 10 версии, Opera на данный момент также не поддерживает эту анимацию.

Комментарии отсутствуют

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