Все для веб-дизайнера
Прокрутка с эффектом увеличения с помощью JS
Недавно наткнулся на работы одного нашего коллеги, он подошел весьма интересно к реализации эффекта для прокрутки. Дело в том, что все пытаются создать прокрутку с плавным появлением материала. Ник, так зовут нашего коллегу, решил поставленную задачу иначе, он создал прокрутку в глубь сайта, а именно увеличение с эффектом параллакса во время прокрутки. Смотрится все достаточно фантастично, создается ощущение полета в глубь страницы. Из-за различия в накладке изображений мы и получаем такой эффект 3D.
Нам понадобятся четыре изображения, мы подготовили их заранее, в формате SVG. Для получения такого эффекта нам понадобится еще пару интересных библиотек. И так, давайте приступим.
Шаг 1. HTML
Разметка у нас будет проста, нам понадобится вывести четыре слоя изображений, каждый слой мы устанавливаем по порядку:
|
1 2 3 4 5 6 7 8 |
<div id="environment"> <div id="content"> <section id="first"></section> <section id="second"></section> <section id="third"></section> <section id="fourth"></section> </div> </div> |
Все скрипты, для работы, Вам необходимо подключить в шапку, просмотреть их перечень можно в исходниках.
Шаг 2. CSS
Затем нам нужно установить позиционирование для каждого слоя, чтобы у нас получился эффект глубины, кроме этого мы установим параметры для прокрутки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
#scroll-proxy { height: 4000px; } #content section { width: 100%; height: 100%; position: absolute; background-size: 100%; background-color: transparent; background-position: center bottom; background-repeat: no-repeat; } #environment { position: fixed; width: 100%; height: 100%; -webkit-perspective: 800px; -moz-perspective: 800px; -ms-perspective: 800px; -o-perspective: 800px; perspective: 800px; } #content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } #first { background-image: url(landscape1.svg); -webkit-transform: translate3d( 0, 0, -11500px) scale(16); -moz-transform: translate3d( 0, 0, -11500px) scale(16); -ms-transform: translate3d( 0, 0, -11500px) scale(16); -o-transform: translate3d( 0, 0, -11500px) scale(16); transform: translate3d( 0, 0, -11500px) scale(16); } #second { background-image: url(landscape2.svg); -webkit-transform: translate3d( 0, 0, -24000px ) scale(32); -moz-transform: translate3d( 0, 0, -24000px ) scale(32); -ms-transform: translate3d( 0, 0, -24000px ) scale(32); -o-transform: translate3d( 0, 0, -24000px ) scale(32); transform: translate3d( 0, 0, -24000px ) scale(32); } #third { background-image: url(landscape3.svg); -webkit-transform: translate3d( 0, 0, -48000px ) scale(64); -moz-transform: translate3d( 0, 0, -48000px ) scale(64); -ms-transform: translate3d( 0, 0, -48000px ) scale(64); -o-transform: translate3d( 0, 0, -48000px ) scale(64); transform: translate3d( 0, 0, -48000px ) scale(64); } #fourth { background-image: url(landscape4.svg); -webkit-transform: translate3d( 0, 0, -64000px ) scale(128); -moz-transform: translate3d( 0, 0, -64000px ) scale(128); -ms-transform: translate3d( 0, 0, -64000px ) scale(128); -o-transform: translate3d( 0, 0, -64000px ) scale(128); transform: translate3d( 0, 0, -64000px ) scale(128); } |
Шаг 3. JS
Последним шагом будет добавление немного магии, для того, чтобы все это оживить:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
(function( window, document, $, Modernizr ){ var transformProp = Modernizr.prefixed('transform'); function Multiplane() { this.scrolled = 0; this.distance3d = 6000; this.$window = $(window); this.$document = $(document); window.addEventListener( 'scroll', this, false); } Multiplane.prototype.handleEvent = function( event ) { if ( this[event.type] ) { this[event.type](event); } }; Multiplane.prototype.scroll = function( event ) { this.scrolled = this.$window.scrollTop() / ( this.$document.height() - this.$window.height() ); this.transformScroll( this.scrolled ); }; Multiplane.prototype.transformScroll = function( scroll ) { var style = {}; style[ transformProp ] = 'translate3d( 0, 0,' + ( scroll * this.distance3d ) + 'px )'; this.$content.css( style ); }; $(function(){ var env = new Multiplane(); env.$content = $('#content'); }); })( window, window.document, window.jQuery, window.Modernizr ); |
Благодаря данным манипуляциям мы получим трансформацию во время прокрутки.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 05.11.2013 в 16:19, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
