Автор

Анимация фона сайта с помощью JS

Анимация фона сайта с помощью JS


 

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

 

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

 

Заставка похожа на стандартную живую обоину андроида, скорость и количество пузырей, их диаметр можно изменить в index.js

function ParticleModel(config) {
 var $scope = this;
 var MAX_SIZE = 180;
 var MIN_SIZE = 20;
 var MAX_SPEED = 120; // per second
 var MIN_SPEED = 2;
 var MAX_OPACITY = 0.5;
 var MIN_OPACITY = 0.2;
 var MAX_VECTOR = 360;
 var MIN_VECTOR = 0;
 var MAX_LIFE = 20000; // ms
 var MIN_LIFE = 5000;

 var defaults = {
 displayed: false,
 ended: false,
 size: 0,
 x: 0,
 y: 0,
 speed: 0,
 opacity: 1,
 vector: 0,
 domElement: angular.element(document.createElement('div')).addClass('particle'),
 id: undefined, // should be defined in config
 boxSize: {width: 0, height: 0}, // should be defined in config
 header: undefined, // should be defined in config
 controller: undefined // should be defined in config
 };

 $scope.config = angular.extend(defaults, config);

 var rand_range = function(min, max, round) {
 if(round === undefined) {
 return Math.floor(Math.random() * (max - min) + min);
 } else if (round === false) {
 return Math.random() * (max - min) + min;
 }
 };

 $scope.init = function() {
 $scope.config.size = rand_range(MIN_SIZE, MAX_SIZE);
 $scope.config.speed = rand_range(MIN_SPEED, MAX_SPEED);
 $scope.config.x = rand_range(0, $scope.config.boxSize.width);
 $scope.config.y = rand_range(0, $scope.config.boxSize.height);
 $scope.config.opacity = rand_range(MIN_OPACITY, MAX_OPACITY, false);
 if($scope.config.size > 100) {
 $scope.config.opacity = rand_range(0.01, 0.2, false);
 }
 $scope.config.blur = $scope.config.size / 8;
 $scope.config.vector = rand_range(MIN_VECTOR, MAX_VECTOR);
 $scope.config.xspeed = Math.cos($scope.config.vector) * $scope.config.speed;
 $scope.config.yspeed = Math.sin($scope.config.vector) * $scope.config.speed;
 var createTime = new Date().getTime();
 var expires = new Date().getTime() + rand_range(MIN_LIFE, MAX_LIFE);
 $scope.config.life = expires - createTime;

 function particleEnd() {
 if($scope.config.displayed === false) {
 $scope.config.displayed = true;
 return;
 }
 if($scope.config.ended === false) {
 $scope.config.domElement.css({
 transition: 'opacity 1s linear',
 WebkitTransition: 'opacity 1s linear',
 MozTransition: 'opacity 1s linear',
 });
 var style1 = document.querySelector('style#style-' + $scope.config.id);
 style1.innerHTML = '.animated-' + $scope.config.id + ' { opacity: 0 !important; transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) !important; -webkit-transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) !important; -moz-transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) !important; }';
 $scope.config.ended = true;
 return;
 }

 var style = document.querySelector('style#style-' + $scope.config.id);
 document.getElementsByTagName('head')[0].removeChild(style);
 $scope.config.ended = true;

 $scope.config.domElement[0].parentNode.removeChild($scope.config.domElement[0]);

 var p = new ParticleModel({
 id: $scope.config.controller.numParticles,
 boxSize: {
 width: $scope.config.header[0].offsetWidth,
 height: $scope.config.header[0].offsetHeight
 },
 header: $scope.config.header,
 controller: $scope.config.controller
 }).init();

 $scope.config.controller.numParticles++;
 $scope.config.header.append(p.config.domElement);
 }

 $scope.config.domElement[0].addEventListener('webkitTransitionEnd', particleEnd);
 $scope.config.domElement[0].addEventListener('transitionend', particleEnd);

 $scope.updateDOMStyles();

 $scope.config.x += Math.floor($scope.config.xspeed * $scope.config.life / 1000);
 $scope.config.y += Math.floor($scope.config.yspeed * $scope.config.life / 1000);

 $scope.updateXY();

 return $scope;
 };

 $scope.updateDOMStyles = function() {
 $scope.config.domElement.css({
 width: $scope.config.size + 'px',
 height: $scope.config.size + 'px',
 borderRadius: $scope.config.size/2 + 'px',
 webkitFilter: 'blur(' + $scope.config.blur + 'px)',
 filter: 'blur(' + $scope.config.blur + 'px)',
 transition: 'transform ' + $scope.config.life/1000 + 's linear, opacity 1s linear',
 WebkitTransition: '-webkit-transform ' + $scope.config.life/1000 + 's linear, opacity 1s linear',
 MozTransition: '-moz-transform ' + $scope.config.life/1000 + 's linear, opacity 1s linear',
 transform: 'translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1)',
 webkitTransform: 'translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1)',
 MozTransform: 'translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1)'
 });
 };

 $scope.updateXY = function() {
 var className = 'animated-' + $scope.config.id;
 var style = document.createElement('style');
 style.type = 'text/css';
 style.id = 'style-' + $scope.config.id;
 style.innerHTML = '.' + className + ' { opacity: ' + $scope.config.opacity + ' !important; transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1) !important; -webkit-transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1) !important; -moz-transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1) !important; }';
 document.getElementsByTagName('head')[0].appendChild(style);
 setTimeout(function() {
 $scope.config.domElement.addClass(className);
 }, 100);
 };

 return $scope;
 }

 function ParticleController(config) {
 var $scope = this;
 $scope.numParticles = 0;

 var defaults = {
 numberOfParticles: 0, // should be defined in config;
 header: undefined // should be defined in config
 };

 $scope.config = angular.extend(defaults, config);

 $scope.init = function() {
 console.log($scope.config.header);
 for(var i = 0; i < $scope.config.numberOfParticles; i++) {
 var p = new ParticleModel({
 id: i,
 boxSize: {
 width: $scope.config.header[0].offsetWidth,
 height: $scope.config.header[0].offsetHeight
 },
 header: $scope.config.header,
 controller: $scope
 }).init();

 $scope.numParticles++;
 $scope.config.header.append(p.config.domElement);
 }
 };

 return $scope;
 }

var pc = new ParticleController({
 numberOfParticles: 20,
 header: angular.element(document.querySelector('.header'))
 }).init();

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


vk.com/club.ssdru

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



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

Анимация фона сайта с помощью JS

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


Анимация фона сайта с помощью JS

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


Анимация фона сайта с помощью JS

У вас раньше появлялось неприятное чувство, когда ваши подписи плохо походили к цветам кнопок, панелей, или просто текст слабо контрастировал с фоном страницы? С помощью CSS тени эту проблему легко решить, используя свойство text-shadow, чтобы улучшить читабельность и контрастность текста.


Анимация фона сайта с помощью JS

Прогресс веб-дизайна не стоит на месте,большие гиганты ит-индустрии диктуют нам правила и направления в разработке дизайна, совсем недавно все стали переводить свои дизайны в минимализм, а именно в тренд Metro UI, объемные сайты постепенно стали исчезать ведь им производят рестайлинг, в скором времени будем на них любоваться как на динозавров. Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн.


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close