Автор

06 06.2014
Эффект объемных тучек на сайт с помощью JS

Эффект объемных тучек на сайт с помощью JS


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

 

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

 

Эффект объемных, анимированных тучек достигается с помощью svg графики и небольших функций JavaScript, давайте посмотрим, что у нас с этого получилось.

Разметка HTML

Разметка будет элементарной, у нас будет пару строчек кода, которая будет вызывать наше полотно с графикой:

<div id="viewport" >
<div id="world" ></div>
</div> 

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

Шаг 2. CSS

Со стилями немного интересней, нам необходимо сделать наложение слоев, шар за шаром у нас будут накладываться тучки, затем мы устанавливаем небольшое вращение элементов на странице:

*{
 box-sizing: border-box;
 margin: 0;
 padding: 0
}
body {
 color: #eee;
 text-shadow: 0 -1px 0 rgba( 0, 0, 0, .6 );
 font-family: 'Open Sans', sans-serif;
 font-size: 13px;
 line-height: 16px;
 overflow: hidden;
}
#viewport {
 -webkit-perspective: 1000px;
 -moz-perspective: 1000px;
 -ms-perspective: 1000px;
 -o-perspective: 1000px;
 perspective: 1000px;
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 overflow: hidden;
 background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
 background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
 background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
 background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
 background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.28, rgb(69,132,180)),
 color-stop(0.64, rgb(31,71,120))
 );
}
#world {
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -256px;
 margin-top: -256px;
 height: 512px;
 width: 512px;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
}
#world div {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
}
.cloudBase {
 position: absolute;
 left: 256px;
 top: 256px;
 width: 20px;
 height: 20px;
 margin-left: -10px;
 margin-top: -10px;
}
.cloudLayer {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 256px;
 height: 256px;
 margin-left: -128px;
 margin-top: -128px;
 -webkit-transition: opacity .5s ease-out;
 -moz-transition: opacity .5s ease-out;
 -ms-transition: opacity .5s ease-out;
 -o-transition: opacity .5s ease-out;
 transition: opacity .5s ease-out;
 }

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

Шаг 3. JS

Последним шагом будет вращение элементов при наведении курсора мыши, мы устанавливаем максимальное и минимальное значение угла, кроме этого мы делаем привязку к курсору мыши:

(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelRequestAnimationFrame = window[vendors[x]+
'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}())
var layers = [],
objects = [],
world = document.getElementById( 'world' ),
viewport = document.getElementById( 'viewport' ),
d = 0,
p = 400,
worldXAngle = 0,
worldYAngle = 0;
viewport.style.webkitPerspective = p;
viewport.style.MozPerspective = p;
viewport.style.oPerspective = p;
generate();
function createCloud() {
var div = document.createElement( 'div' );
div.className = 'cloudBase';
var x = 256 - ( Math.random() * 512 );
var y = 256 - ( Math.random() * 512 );
var z = 256 - ( Math.random() * 512 );
var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px )';
div.style.webkitTransform =
div.style.MozTransform =
div.style.msTransform =
div.style.oTransform =
div.style.transform = t;
world.appendChild( div );
for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) {
var cloud = document.createElement( 'div' );
cloud.style.opacity = 0;
cloud.style.opacity = .8;
cloud.className = 'cloudLayer';
var x = 256 - ( Math.random() * 512 );
var y = 256 - ( Math.random() * 512 );
var z = 100 - ( Math.random() * 200 );
var a = Math.random() * 360;
var s = .25 + Math.random();
x *= .2; y *= .2;
cloud.data = {
x: x,
y: y,
z: z,
a: a,
s: s,
speed: .1 * Math.random()
};
var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px ) rotateZ( ' + a + 'deg ) scale( ' + s + ' )';
cloud.style.webkitTransform =
cloud.style.MozTransform =
cloud.style.msTransform =
cloud.style.oTransform =
cloud.style.transform = t;
div.appendChild( cloud );
layers.push( cloud );
}
return div;
}
viewport.addEventListener( 'mousewheel', onContainerMouseWheel );
viewport.addEventListener( 'DOMMouseScroll', onContainerMouseWheel );
viewport.addEventListener( 'mousemove', function( e ) {
worldYAngle = -( .5 - ( e.clientX / viewport.clientWidth ) ) * 180;
worldXAngle = ( .5 - ( e.clientY / viewport.clientWidth ) ) * 180;
updateView();
} );
function generate() {
objects = [];
if ( world.hasChildNodes() ) {
while ( world.childNodes.length >= 1 ) {
world.removeChild( world.firstChild );
}
}
for( var j = 0; j < 5; j++ ) {
objects.push( createCloud() );
}
}
function updateView() {
var t = 'translateZ( ' + d + 'px ) rotateX( ' + worldXAngle + 'deg) rotateY( ' + worldYAngle + 'deg)';
world.style.webkitTransform =
world.style.MozTransform =
world.style.msTranform =
world.style.oTransform =
world.style.transform = t;
}
function onContainerMouseWheel( event ) {
event = event ? event : window.event;
d = d - ( event.detail ? event.detail * -5 : event.wheelDelta / 8 );
updateView();
}
function update (){
for( var j = 0; j < layers.length; j++ ) {
var layer = layers[ j ];
layer.data.a += layer.data.speed;
var t = 'translateX( ' + layer.data.x + 'px ) translateY( ' + layer.data.y + 'px ) translateZ( ' + layer.data.z + 'px ) rotateY( ' + ( - worldYAngle ) + 'deg ) rotateX( ' + ( - worldXAngle ) + 'deg ) rotateZ( ' + layer.data.a + 'deg ) scale( ' + layer.data.s + ')';
layer.style.webkitTransform =
layer.style.MozTransform =
layer.style.msTranform =
layer.style.oTransform =
layer.style.transform = t;
}
requestAnimationFrame( update );
}
update();

Надеюсь данный эффект будет Вам полезный.

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

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


vk.com/club.ssdru

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


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

04 12.2014
Эффект объемных тучек на сайт с помощью JS

  1. Строить график на основе массива данных;
  2. Строить график на основе номер счетчика Яндекс.Метрики;
  3. Возможна частичная или полная кастомизация внешнего вида Информера;
  4. График строится с использованием html5 canvas;

14 05.2013
Эффект объемных тучек на сайт с помощью JS

В последнее время стали весьма популярны неординарные решения к построению сайта, зачастую веб-мастера стали отказываться от привычного построения ресурса и разрабатывать новые концепции верстки. Большое влияние на современный веб дизайн оказал дизайн metro ui который покорил своим минимализмом и простотой решений, что дизайнеры принялись разрабатывать сайты под данный интерфейс. В данном уроке мы рассмотрим как создать фиксированное вертикальное меню в стиле metro ui.


14 06.2014
Эффект объемных тучек на сайт с помощью JS

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


31 03.2013
Эффект объемных тучек на сайт с помощью JS

Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close