Автор

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

Хочу в данной статье немного расказать о создании нового сайта Image Club «PLATINUM» г.Саратов. Чтобы описать чем занимается Image Club, я приведу высказывания владелицы клуба Татьяны Бычковой:

«Почему «имидж клуб»? В основном, смена имиджа ассоциируется с началом новой жизни. Но поменять одну модную вещь на другую это не значит, что вы поменяли свой имидж. Начинать нужно со своего внутреннего мира, со своего взгляда на окружающий мир, работать не только над дефектами своей фигуры, и учиться правильно одеваться, но и получать от этого огромное достойное Вас (платиновое) удовольствие.»


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

Что такое параллакс уже наверное известно всем и нет смысла повторяться в каждой публикации! Ковыряясь в инете нашел этот вариант (там был только HTML, а все остальное: картинки, стили и скрипты были на сайте разработчика). Объединив всё вместе, я сделал архив для скачивания и хочу представить очередной, в моем блоге, вариант этого плагина ImageScroll на jQuery.


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close