Автор

08 12.2014
Эффект снега на сайте с помощью JS

Эффект снега на сайте с помощью JS


Вот и наступила зима, выпал первый снег, и по настоящему чувствуется что скоро наступит новый год, ведь новогоднее настроение уже парит в воздухе. Люди во всю наряжают елки, а веб-мастера стараются украсить свой сайт новогодними украшениями. В данном уроке мы рассмотрим как создать простой эффект снега для сайта при этом мы будем использовать правила JS и немного новогодней магии. У нас будет рондомное падение снега, при этом мы добавим плавности, кроме этого мы добавили эффект глубины с помощью больших и меньших окружностей снежинок.

 

ДЕМО
ИСХОДНИКИ

 

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

 

Шаг 1. HTML

Разметка будет весьма примитивна, у нас будет несколько классов которые выводят необходимые нам элементы на странице, кроме этого добавили несколько спан-классов.

<div class='landscape'>
 <div class='moon'></div>
 <div class='hills'>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div class='tree'>
 <div>
 <span></span>
 </div>
 <div>
 <span></span>
 </div>
 <div>

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

 

Шаг 2. JS

Чтобы добиться такого результата отображения нам необходимо указать функции js, мы указываем параметры окружности, эффект наложения, рондомное отображение снежинок:

window.requestAnimFrame = (function(){
 return window.requestAnimationFrame ||
 window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 window.oRequestAnimationFrame ||
 window.msRequestAnimationFrame ||
 function( callback ){
 window.setTimeout(callback, 1000 / 60);
 };
})();
var canvas = document.getElementById('cvs'),
 ctx = canvas.getContext('2d'),
 height = canvas.height = document.body.offsetHeight,
 width = canvas.width = document.body.offsetWidth,
 collection = [],
 num_drops = 2000,
 gravity = 1,
 windforce = 1,
 windmultiplier = 0,
 gutter = 0;
function Drop() {
 this.x;
 this.y;
 this.radius;
 this.distance;
 this.color;
 this.speed;
 this.vx;
 this.vy;
}
Drop.prototype = {
 constructor: Drop,
 random_x: function() {
 var n = width * (1 + gutter);
 return (1 - (1 + gutter)) + (Math.random() * n);
 },
 draw: function(ctx) {
 ctx.fillStyle = this.color;
 ctx.beginPath();
 ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
 ctx.closePath();
 ctx.fill();
 }
};
function draw_frame() {
ctx.clearRect(0, 0, width, height);
 collection.forEach(function (drop) {
 ctx.globalAlpha = (drop.distance + 1) / 10;
 drop.draw(ctx);
 ctx.globalAlpha = 1;
 drop.x += drop.vx;
 drop.y += drop.vy;
 var lx = drop.vx + windforce;
 lx < maxspeed && lx > 1 - maxspeed && (drop.vx = lx);
 if (drop.y > (drop.distance + 1) / 10 * height) {
 drop.y = Math.random() * -drop.radius * (num_drops / 10);
 drop.x = drop.random_x();
 }
 if (drop.x > width * (1 + gutter)) {
 drop.x = 1 - (width * gutter);
 }
 if (drop.x < 1 - (width * gutter)) {
 drop.x = width * (1 + gutter);
 }
 });
}
function animate() {
 requestAnimFrame(animate);
 draw_frame();
}
function windtimer() {
 windforce = Math.random() > 0.5 ? windmultiplier : -windmultiplier;
 setTimeout(windtimer, Math.random() * (1000 * 30));
}
function init() {
 collection = [];
 while (num_drops--) {
 var drop = new Drop(); // todo: make constructor do this shit
 drop.color = "#eee";
 drop.distance = Math.random() * 10 | 0;
 drop.speed = Math.random() * (drop.distance / 10) + gravity;
 drop.vx = 0;
 drop.vy = Math.random() * drop.speed + (drop.speed / 2);
 drop.radius = (drop.distance + 1) / 16 * 3;
 drop.x = drop.random_x();
 drop.y = Math.random() * height;
 collection.push(drop);
 }
 windtimer();
 animate();
 window.onresize = function() {
 height = canvas.height = document.body.offsetHeight;
 width = canvas.width = document.body.offsetWidth;
 };
}
init();

Ничего сложного в данном уроке нет, надеюсь урок был Вам интересен, свои идеи и предложения оставляем в комментариях.

Вот и все. Готово!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеJS

20 07.2013
Эффект снега на сайте с помощью JS

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


10 04.2013
Эффект снега на сайте с помощью JS

Создавая сайт каждый веб мастер пытается сделать что бы его творение одинаково читалось во всех браузерах, и это, порой, доставляет хлопот. По этому в данном уроке речь пойдет о создании и стилизации такого элемента сайта как select или проще говоря кнопки выбора. Мы будем рассматривать несколько скриптов, которые будут преобразовывать обычный элемент select в более стильный и функциональный элемент управления сайта, который отображается корректно в различных браузерах. И так, давайте же посмотрим что у нас получилось..


29 09.2014
Эффект снега на сайте с помощью JS

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


10 05.2017
Эффект снега на сайте с помощью JS

Конструктор продуктов - полезные инструменты для покупок, которые позволяют потенциальным клиентам «строить» идеальную версию продукта, комбинируя различные варианты. В конце этого процесса пользователю обычно дается действие, чтобы выполнить: сохранить сборку, поделиться ею или купить продукт напрямую.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close