Автор

Эффект снега на сайте с помощью 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();

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

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


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

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


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

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


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

Надёжный хостинг

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

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


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close