Предлагаю вашему вниманию эффект падающего снега, который реализован с помощью 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(); };
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Здравствуйте. Как сделать метки на сайте как у вас?
Здравствуйте. Сделайте вывод меток в теме с помощью функции:
и скопируйте стили из моего сайта.
Я был бы вам очень признателен, если бы вы точнее описали эту процедуру)
Тут подробнее по функции: Теги шаблонов/the tags.
Для того чтобы узнать стили на сайте, нажмите правой кнопкой мышки по элементу который Вас интересует, и потом нажмите «Просмотр кода элемента» (в хроме). Там увидите html структуру страницы и сможете посмотреть CSS стили у выбранного элемента.
Большое спасибо)
Здравствуйте. Когда ввожу название своего сайта в строке поиска оно предлагает мне исправить вводимое мной название на другое. Как это исправить ? Заранее спасибо.
Сделать сайт мега-популярным, и тогда поисковая система будет предлагать перейти на Ваш сайт 🙂
Я так и думал )))
Здравствуйте. Когда ввожу название сайта его не выбивает вверху. Как это исправить ?
Какое отношение Ваш вопрос имеет к «Падающий снег для сайта на HTML5 Canvas»? Задавайте пожалуйста вопросы на тематических страницах, а если таких нету, то на странице «Вопрос — ответ».
Спасибо! Именно этот снег, я и искал))
Сейчас буду экспериментировать. Если это возможно, буду делать шапку со снегом. Как говорят — готовь сани летом 🙂 Или что-то подобное.
Здравствуйте, не могу сделать, чтобы снег шёл поверх всего сайта и при этом все элементы на нём были активны..Когда просто вставляю ваш скрипт на сайт, снег выводится блоком над хедером. Позиционирую абсолютно и он встаёт как надо, да только теперь не могу ни на что нажать.
Помогло pointer-events: none;, но теперь соответсвенно пропал эффект отталкивания снежинок от мыши.
Как вариант можно сделать все нужные элементы кликабельными
a,button,input,textarea{z-index:9999}
#xmas {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
А можно уменьшить количество падающего снега? А то прям снегопад какой-то 🙂
И еще вопрос. Как оставить на сайте только снег? Без фона / надписей и прочего. Просто снег 🙂
Все чудесно, безумно замечательный эффект, но есть 3 нюанса неприятных…
1. даже когда убираешь курсор за браузер, снежинки в этом месте продолжают разлетаться в разные стороны))
2. чем больше окно браузера,тем медленнее снежинки летят, чем окно меньше, тем они шустрее.
3. самое важное. эффект конфликтует с другими ховерами. чтобы снежинки летели поверх контента и заполнили всю страничку от верха до низа, пришлось установить position: absolute везде. от этого, вторая анимация типа слайдера не хочет работать (там при наведении курсора картинка увеличивается отбрасывая тень).
возможно все это можно исправить заменив и поправив 2-3 значения, но т.к. я новичок в этом, я ничего не смогла сделать, ибо из того,что знаю ничего не решает проблему.
может кто решение знает))