Автор

Анимация фона сайта с помощью 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

Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.


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

Как установить кнопки социальных сетей для своего сайта или как добавить блок с кнопками социальных сетей — тема данного урока. Я постараюсь дать вам информацию о самых популярных способах размещения кнопок.

Размещение кнопок социальных сетей на сайте при помощи официальных виджетов:

Кнопка Вконтакте- Мне нравится
Кнопка FaceBook — Like
Кнопка Twitter — Твитнуть
Кнопка Одноклассники — Класс
Кнопка Google — Plus 1


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

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


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

Параллакс это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Параллакс используется в геодезии и астрономии для измерения расстояния до удалённых объектов. На явлении параллакса основано бинокулярное зрение. Но также параллакс активно используется дизайнерами для разработки необычных эффектов как в повседневной жизни, так и в веб-дизайне.


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close