Создаем страницу-поздравление с Новым годом 2017!


Эффект падающего снега на сайте html
Всем привет!  Как говориться, праздник к нам приходит, а что более звучно мне - свято наближається! Это я к чему - сегодня у меня новогодний пост, который посвящен необычной странице-поздравления. Никакого flash, только передовые технологии js, css и html! А что самое главное - это под силу каждому!


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

снежинки на сайте

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

JavaScript- код
/**
 *
 * Скрипт новогоднего праздника xD
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Идея Script Tutorials
 * http://www.script-tutorials.com
 * 
 * Адаптация
 * http://www.ipetrenko.ru 
 */

// canvas and context objects
var canvas, ctx;

//Snowflakes object
Snowflakes = (function () {

    // sprites information
    var sprCnt = 15;
    var sprWidth = 80;
    var sprHeight = 68;

    // arrays of snowflakes and sprites
    var snowflakes = [];
    var snowflakeSprites = [];

    // other inner params
    var minScale = 0.2; // min scale for flakes
    var maxScale = 1.2; // max scale for flakes

    var minVerticalVelocity = 2; // min vertical velocity
    var maxVerticalVelocity = 5; // max vertical velocity
    var minHorizontalVelocity = -2; // min horizontal velocity
    var maxHorizontalVelocity = 3; // max horizontal velocity

    var minOpacity = 0.1; // min opacity
    var maxOpacity = 0.9; // max opacity
    var maxOpacityIncrement = 60; // opacity increment

    // every flake swings in the interim between next deltas:
    var minHorizontalDelta = 1;
    var maxHorizontalDelta = 4;

    var speed = 2; // speed

    // get random number between x1 and x2
    function getRandom(x1, x2) {
        return Math.random() * (x2 - x1) + x1
    }

    // initialize sprites
    function initializeSprites() {
        var img = new Image();
        img.onload = function () {

            // fill snowflakeSprites with every sprite of sprite.png
            for (var i = 0; i < sprCnt; i++) {
                // create new canvas
                var sprite = document.createElement('canvas');
                sprite.width = sprWidth;
                sprite.height = sprHeight;
                var context = sprite.getContext('2d');

                // and draw every sprite at this canvas
                context.drawImage(img, i * sprWidth, 0, sprWidth, sprHeight, 0, 0, sprWidth, sprHeight);

                // and fill array
                snowflakeSprites.push(sprite);
            }
        }
        img.src = 'http://nwo.ucoz.ua/demo/ny/sprite.png';
    };

    // initialize snowflakes
    function initialize(number) {
        // initialize sprites
        initializeSprites();

        // prepare a necessary amount of snowflakes
        for (var i = 0; i < number; i++) {
            snowflakes.push(initializeSnowflake());
        }
    };

    // initialize snowflake
    function initializeSnowflake() {
        // get random scale
        var scale = getRandom(minScale, maxScale);

        return {
            x: Math.random() * ctx.canvas.width, // x and
            y: Math.random() * ctx.canvas.height, // y positions
            vv: getRandom(minVerticalVelocity, maxVerticalVelocity), // vertical and
            hv: getRandom(minHorizontalVelocity, maxHorizontalVelocity), // horizontal velocity
            o: getRandom(minOpacity, maxOpacity), // opacity
            oi: Math.random() / maxOpacityIncrement, // opacity increment
            mhd: getRandom(minHorizontalDelta, maxHorizontalDelta), // maximum horizontal delta
            hd: 0, // horizontal delta
            hdi: Math.random() / (maxHorizontalVelocity * minHorizontalDelta), // horizontal delta increment
            sw: scale * sprWidth, // scaled sprite width
            sh: scale * sprHeight, // and height
            si: Math.ceil(Math.random() * (sprCnt - 1)) // sprite index
        }
    };

    // move flakes
    function moveFlakes() {
        for (var i = 0; i < snowflakes.length; i++) {
            var osf = snowflakes[i];

            // shift X and Y position
            osf.x += (osf.hd + osf.hv) * speed;
            osf.y += osf.vv * speed;

            // swings             
            osf.hd += osf.hdi;
            if (osf.hd < -osf.mhd || osf.hd > osf.mhd) {
                osf.hdi = -osf.hdi;
            };

            // collision with borders
            if (osf.y > ctx.canvas.height + sprHeight / 2) {
                osf.y = 0
            };
            if (osf.y < 0) {
                osf.y = ctx.canvas.height
            };
            if (osf.x > ctx.canvas.width + sprWidth / 2) {
                osf.x = 0
            };
            if (osf.x < 0) {
                osf.x = ctx.canvas.width
            };

            // toggle opacity
            osf.o += osf.oi;
            if (osf.o > maxOpacity || osf.o < minOpacity) {
                osf.oi = -osf.oi
            };
            if (osf.o > maxOpacity)
                osf.o = maxOpacity;
            if (osf.o < minOpacity)
                osf.o = minOpacity;
        }
    }

    // render frame
    function renderFrame() {

        // move (shift) our flakes
        moveFlakes();

        // clear content
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        // draw each flake
        for (var i = 0; i < snowflakes.length; i++) {
            var osf = snowflakes[i];
            ctx.globalAlpha = osf.o;
            ctx.drawImage(snowflakeSprites[osf.si], 0, 0, sprWidth, sprHeight, osf.x, osf.y, osf.sw, osf.sh);
        }
    }

    return {
        'initialize': initialize,
        'render': renderFrame,
    }
})();

// main initialization
function initialization() {

    // create canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    // set canvas size - fullscreen
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    // loop main scene
    setInterval(Snowflakes.render, 40);
    Snowflakes.initialize(100);
}

// window onload event handler
if (window.attachEvent) {
    window.attachEvent('onload', initialization);
} else {
    if (window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            initialization();
        };
        window.onload = newonload;
    } else {
        window.onload = initialization;
    }
} 
Сохраните этот код в файле под названием script.js. Кстати, какой редактор Вы используете? Я ранее уже советовал три крутых редактора для вебмастера. Если сохраните спрайт себе на хостинг, то не забудьте поменять в вышеизложенном коде адрес картинки, который помечен красным, то есть это http://nwo.ucoz.ua/demo/ny/sprite.png.

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

CSS-код
* {
    margin: 0;
    padding: 0;
}
body {
    overflow:hidden;
    background: url("http://nwo.ucoz.ua/demo/ny/christmas_tree1.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Сохраняем этот код в файле под названием main.css. Опять таки, если захотите сохранить себе картинку или у вас будет своя - не забудьте поменять адрес изображения!

А теперь нам остается лишь всё это "сложить в одну коробку". Наша страница index.html будет содержать следующий код.

HTML-код
<!DOCTYPE html>
<html lang="ru">
  <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Новогоднее поздравление 2016 в HTML5 </title>
        <link rel="stylesheet" href="http://nwo.ucoz.ua/demo/ny/main.css" type="text/css">
        <script src="http://nwo.ucoz.ua/demo/ny/script.js"></script>
    </head>
    <body>
        <canvas height="667" width="1360" id="panel">Сорян, ваш браузер не поддерживает HTML5 ;(</canvas>
    </body>
</html>

Как Вы заметили, файлы index.html, main.css, script.js  должны лежать в одной директории - учтите это. Вот и всё, айда смотреть результат! Кстати, а что у Вас получилось? Кидайте ссылки в комментарии ниже - посмотрим, на что у вас хватит фантазии. 


До новых встреч, йо-хо-хоу
Идея Андрю, автора Script Tutorials

Ах да, друзья, чуть не забыл! Я недавно завел канал в Telegram, где делюсь своими наблюдениями и мнением о важном. Не блогерством единым живем. Буду рад каждому ;)



Комментарии

  1. Подскажите пожалуйста, насколько это утяжелит страницу?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Виктория!
      Сам эффект "утяжелит" страницу чуть более чем на 100 Кб. Script.js (7Кб), Main.css (1 Кб), Sprite.png (98 Кб) = 106 Кб

      Если будете делать на отдельной странице, то учитывать нужно и размер картинке на фоне.

      Удалить
  2. А как такое в блоге на Blogger сделать?

    ОтветитьУдалить
    Ответы
    1. Довольно просто, если использовать выше указанную инструкцию. Даже адресс файлов (спрайта и js, css).

      Например, я вот на странице отдельной сделал: http://www.ipetrenko.ru/p/happy-year-webmaster.html

      Удалить

Отправить комментарий

Популярное

Установка и настройка модема Huawei HG532e (+ мини-обзор)

Виджет профиля Instagram на ваш сайт/блог

14 лучших шаблонов для Blogger в 2015 году [выпуск 2]