Автор

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

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

Рассмотрим оригинальную форму обратной саязи на jQuery. Такая форма легко украсит любой сайт.


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

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


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

Здравствуйте, уважаемые читатели моего блога! А Вы пользуетесь генераторами CSS3 или HTML5? Если нет, то может стоит попробовать. Просто представьте, можно отказаться от ручного описания стилей для кнопок, углов в блоках, теней, градиентов если кто использует и так далее, так же HTML5. Зачем писать один и тот же код каждый раз при создании нового проекта, когда можно «забить» параметры в окошечки нажать кнопочку и получить готовый исходный код, а если надо то и пофиксить его!
В этой статье покажу Вам подборку из таких генераторов. Преимущественно это будут генераторы CSS3 и парочка для HTML5.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close