Автор

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

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

Представляю вашему вниманию 4 интересных шаблона для сайта (скоро открытие сайта).


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

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

Не устаю напоминать, что результаты данного урока будут работать только в современных поддерживающих CSS3 браузерах, таких как Chrome, Firefox, Safari. Идея урока состоит в том, чтобы создать необычную круглую миниатюру, которая будет анимироваться при наведении на неё курсора.


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

Я уже публиковал урок «Нестандартные Checkbox (RadioButton) без использования JavaScript». Прекрасные кнопочки, но там используются картинки!!! В данном примере используется только CSS. Всё очень просто вы вставляете код в свой стиль и получаете стильные, а именно на мой взгляд, в современном стиле кнопки.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close