Автор

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

Полностраничное меню, которое заменяет текущий контент, вытесняя его с экрана.


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

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


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

На некоторых сайтах можно встретить боковые меню, принцип его реализации можно найти в мобильной версии вконтакте и популярно сайта 3dnews. Это весьма удобно, ведь даже на моей мобильной версии IE это смотрится достаточно привлекательно, благодаря плавной анимации и простоте решения. В данном уроке мы рассмотрим как можно создать такое боковое меню. Мы рассмотрим несколько типов бокового меню: меню слева, права и добавим вариант просмотра с контентом, что позволит выводить страницу подобно фреймам.


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

Представление мини-библиотеки экспериментальных эффектов прокрутки страницы.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close