Домой / Для сайта / Падающий снег для сайта на HTML5 Canvas
Падающий снег для сайта на HTML5 Canvas

Падающий снег для сайта на HTML5 Canvas

Предлагаю вашему вниманию эффект падающего снега, который реализован с помощью Canvas. 

В данной реализации эффекта падающего снега есть один интересный плюс — снег отлетает от курсора мыши.

Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery.

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

Демо Скачать

HTML

<section class="xmas">
 <!-- Блок Merry Xmas -->
 <div class="xmas-message"></div>

 <div class="from">
 <a class="gc-link small-title from-name" href=" https://wp-lessons.com/padayushhiy-sneg-dlya-sayta-na-html5-canvas">Вернуться на сайт с уроком</a>
 </div>
 <!-- Снег! -->
 <canvas id="xmas"></canvas>
</section>

CSS

.xmas {
 height: 100%;
 width: 100%;
 position: relative;
 background: url("https://wp-lessons.com/wp-content/uploads/2014/12/xmas-large.jpg") no-repeat 0 0/cover;
}
.xmas .xmas-message {
 position: absolute;
 left: 50%;
 top: 50%;
 z-index: 2;
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 width: calc(90% - 6rem);
 height: calc(100% - 12rem);
 margin: 0 auto;
 background: url(https://wp-lessons.com/wp-content/uploads/2014/12/merryxmas.png) no-repeat 50% 50% / contain;
}
.xmas .from {
 position: absolute;
 bottom: 40px;
 width: 100%;
 z-index: 3;
 text-align: center;
}
.xmas .from div {
 font-family: "quimby-mayoral", sans-serif;
 color: #ffffff;
 font-size: 40px;
 margin-bottom: 10px;
}
.xmas .from .gc-link {
 display: inline-block;
 font-family: "brandon-grotesque", sans-serif;
 font-size: 24px;
 color: #ffffff;
 -webkit-transition: 400ms ease;
 transition: 400ms ease;
 text-decoration: none;
 text-transform: uppercase;
}
.xmas .from .gc-link:hover {
 color: #1cff94;
}
.xmas #xmas {
 width: 100%;
 height: 100%;
 position: relative;
 z-index: 2;
}

JS

$(document).ready(function(){

 initLetItSnow();
});

var initLetItSnow = function(){

 (function() {
 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
 function(callback) {
 window.setTimeout(callback, 1000 / 60);
 };
 window.requestAnimationFrame = requestAnimationFrame;
 })();

 var flakes = [],
 canvas = document.getElementById("xmas"),
 ctx = canvas.getContext("2d"),
 mX = -100,
 mY = -100;

 if( $(window).width() < 999 ){
 var flakeCount = 125;
 } else {
 var flakeCount = 450;
 }

 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;

 function snow() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);

 for (var i = 0; i < flakeCount; i++) {
 var flake = flakes[i],
 x = mX,
 y = mY,
 minDist = 250,
 x2 = flake.x,
 y2 = flake.y;

 var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
 dx = x2 - x,
 dy = y2 - y;

 if (dist < minDist) {
 var force = minDist / (dist * dist),
 xcomp = (x - x2) / dist,
 ycomp = (y - y2) / dist,
 deltaV = force;

 flake.velX -= deltaV * xcomp;
 flake.velY -= deltaV * ycomp;

 } else {
 flake.velX *= .98;
 if (flake.velY <= flake.speed) {
 flake.velY = flake.speed
 }
 flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
 }

 ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
 flake.y += flake.velY;
 flake.x += flake.velX;

 if (flake.y >= canvas.height || flake.y <= 0) {
 reset(flake);
 }

 if (flake.x >= canvas.width || flake.x <= 0) {
 reset(flake);
 }

 ctx.beginPath();
 ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
 ctx.fill();
 }
 requestAnimationFrame(snow);
 };

 function reset(flake) {
 flake.x = Math.floor(Math.random() * canvas.width);
 flake.y = 0;
 flake.size = (Math.random() * 3) + 2;
 flake.speed = (Math.random() * 1) + 0.5;
 flake.velY = flake.speed;
 flake.velX = 0;
 flake.opacity = (Math.random() * 0.5) + 0.3;
 }

 function init() {
 for (var i = 0; i < flakeCount; i++) {
 var x = Math.floor(Math.random() * canvas.width),
 y = Math.floor(Math.random() * canvas.height),
 size = (Math.random() * 3) + 4,
 speed = (Math.random() * 1) + 0.5,
 opacity = (Math.random() * 0.5) + 0.3;

 flakes.push({
 speed: speed,
 velY: speed,
 velX: 0,
 x: x,
 y: y,
 size: size,
 stepSize: (Math.random()) / 160,
 step: 0,
 opacity: opacity
 });
 }

 snow();
 };

 canvas.addEventListener("mousemove", function(e) {
 mX = e.clientX,
 mY = e.clientY
 });

 window.addEventListener("resize",function(){
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 })

 init();
};
Предлагаю вашему вниманию эффект падающего снега, который реализован с помощью Canvas.  В данной реализации эффекта падающего снега есть один интересный плюс - снег отлетает от курсора мыши. Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS .xmas { height: 100%; width: 100%; position: relative; background: url(&quot;https://wp-lessons.com/wp-content/uploads/2014/12/xmas-large.jpg&quot;) no-repeat 0&hellip;

Обзор

Проголосуйте за урок

Оценка

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

Рейтинг: 4 ( 5 голосов )
100

18 комментариев

  1. Аватар

    Здравствуйте. Как сделать метки на сайте как у вас?

    • Аватар

      Здравствуйте. Сделайте вывод меток в теме с помощью функции:

       <?php the_tags('Метки:', ', ', ''); ?> 
      

      и скопируйте стили из моего сайта.

      • Аватар

        Я был бы вам очень признателен, если бы вы точнее описали эту процедуру)

        • Аватар

          Тут подробнее по функции: Теги шаблонов/the tags.
          Для того чтобы узнать стили на сайте, нажмите правой кнопкой мышки по элементу который Вас интересует, и потом нажмите «Просмотр кода элемента» (в хроме). Там увидите html структуру страницы и сможете посмотреть CSS стили у выбранного элемента.

  2. Аватар

    Большое спасибо)

  3. Аватар

    Здравствуйте. Когда ввожу название своего сайта в строке поиска оно предлагает мне исправить вводимое мной название на другое. Как это исправить ? Заранее спасибо.

  4. Аватар

    Я так и думал )))

  5. Аватар

    Здравствуйте. Когда ввожу название сайта его не выбивает вверху. Как это исправить ?

    • Аватар

      Какое отношение Ваш вопрос имеет к «Падающий снег для сайта на HTML5 Canvas»? Задавайте пожалуйста вопросы на тематических страницах, а если таких нету, то на странице «Вопрос — ответ».

  6. Аватар

    Спасибо! Именно этот снег, я и искал))

  7. Аватар

    Сейчас буду экспериментировать. Если это возможно, буду делать шапку со снегом. Как говорят — готовь сани летом 🙂 Или что-то подобное.

  8. Аватар
    Александр

    Здравствуйте, не могу сделать, чтобы снег шёл поверх всего сайта и при этом все элементы на нём были активны..Когда просто вставляю ваш скрипт на сайт, снег выводится блоком над хедером. Позиционирую абсолютно и он встаёт как надо, да только теперь не могу ни на что нажать.

    • Аватар
      Александр

      Помогло pointer-events: none;, но теперь соответсвенно пропал эффект отталкивания снежинок от мыши.

      • Аватар

        Как вариант можно сделать все нужные элементы кликабельными

        a,button,input,textarea{z-index:9999}

        #xmas {
        position: fixed;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2;
        }

  9. Аватар

    А можно уменьшить количество падающего снега? А то прям снегопад какой-то 🙂

    • Аватар

      И еще вопрос. Как оставить на сайте только снег? Без фона / надписей и прочего. Просто снег 🙂

  10. Аватар

    Все чудесно, безумно замечательный эффект, но есть 3 нюанса неприятных…
    1. даже когда убираешь курсор за браузер, снежинки в этом месте продолжают разлетаться в разные стороны))
    2. чем больше окно браузера,тем медленнее снежинки летят, чем окно меньше, тем они шустрее.
    3. самое важное. эффект конфликтует с другими ховерами. чтобы снежинки летели поверх контента и заполнили всю страничку от верха до низа, пришлось установить position: absolute везде. от этого, вторая анимация типа слайдера не хочет работать (там при наведении курсора картинка увеличивается отбрасывая тень).
    возможно все это можно исправить заменив и поправив 2-3 значения, но т.к. я новичок в этом, я ничего не смогла сделать, ибо из того,что знаю ничего не решает проблему.
    может кто решение знает))

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

Ваш email не будет опубликован.

*