Автор

Эффект объемных тучек на сайт с помощью 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

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

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


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

Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим.


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

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


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

Предлагаю Вам очень, на мой взгляд, интересный вариант Captcha. Но как готовый модуль его использовать можно только в том случае, если страница с формой  не перезагружается. Да и вообще это больше идея с которой еще надо поковыряться чтобы применить для Captcha. Хотя человеку со знанием JavaScript это будет делом 5-10 минут!


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close