Автор

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

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

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


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

Вопрос: почему мало создать сайт и разместить его адрес на POS-материалах?

Я создал сайт, потратил кучу денег на его «раскрутку», разместив везде его адрес. Почему же я до сих пор беден?!

Больной вопрос, который задают многие клиенты. Самое смешное, что они действительно искренне недоумевают, почему же столь успешный (в задумке) проект до сих пор не начинает работать. И главное, что этот клиент не из тех, кто любит строить воздушные замки и воплощать в жизнь свои самые смелые фантазии, а самый, что ни на есть трудоголик, который даже во сне посредством и благодаря своей неутомимости в работе и преданности делу способен вывести свою алхимическую «формулу бизнес-счастья и commerce-изобилия». Итак, возьмем на себя смелость и проведем небольшую работу по «препарированию» (простите за черный юмор) данной проблемы.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close