(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Простой параллакс эффект на сайте и важные нюансы его исполнения

Источник: habrahabr
SirD

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

image

В качестве примера представлен вертикальный параллакс для "короткой" страницы. 
Данный подход очень хорошо придает эффект третьего измерения, что можно очень интересно обыграть.
Фактически, если сайт многостраничный, и оформление каждой страницы сделать уникальным, то будет очень похоже на детскую книжку - раскладушку (помните такие, с объемными бумажными папье-маше, появляющимися на разворотах?).

В качестве примера был взят промо-сайт одного из выходящих в прокат фильмов.
Технически, весь смысл - в различной дельте при приращении координат, что дает эффект разной скорости скроллинга разных слоев, однако, кроме этого хочу обратить ваше внимание на следующие детали, учтенные в примере, но учтенные не полностью:
- Разные изображения лежат на разных слоях. Это, конечно, очевидно, но само по себе не даст полной "кинематографичности" и глубины общему виду страницы.
- Разные слои движутся с разной скоростью. Чем "ближе" слой, тем быстрее он движется.

А теперь главное:
Глубина резкости. Чем "глубже" слой, тем он более размытый. Т.е. изображения каждого следующего слоя (в глубину), нужно блурить на определенный процент, в зависимости от конкретной сцены. При этом изображения, находящиеся на одном слое должны иметь одинаковую степень четкости (размытия). Например, человек на переднем плане - максимальная четкость, а горная гряда на самом дальнем - размыта на 40%. В примере этот эффект применен только к банкнотам.
Тени. Если ваша сцена - не простая аппликация, и вы стремитесь сделать этакую 3D-фотографию, не забывайте о тенях. Каждый слой должен отбрасывать тень на следующий. Для наибольшей реалистичности тени должны быть правдивыми - от одного источника света. 
Свет. Если сцена - что-то вроде вечернего группового фото в стиле Чикагской мафии, со стоящей рядом машиной, у которой включены фары, - свет от фар нужно правильно отобразить на всех изображениях сцены.
Перспектива. Обратите внимание, что объекты примерно одного размера (в данном случае - люди, фишки) на разных слоях, по мере удаления, уменьшаются. Т.е. объекты переднего плана - крупные, а чем глубже, тем мельче. Например, люди примерно одного роста на разных слоях должны заметно отличаться в размерах.

Данный эффект можно использовать на сайте-визитке фотографа и представлять его работы в виде псевдо-3D-фото. Это, конечно, потребует некоторой работы над снимками. Однако, можно отснять сцены для сайта специально, слой за слоем, с разной глубиной резкости и одинаковым освещением.

Посмотреть пример можно здесь.

Ниже привожу полный JS код, отвечающий за данный эффект в примере:

$(function() {

    if ($('body').hasClass('index')) {
        var $money2Top = $('.money2').position().top
        var $money3Top = $('.money3').position().top
        var $chips1Top = $('.chips1').position().top

        function scroller(){ 
            scrollTop = $(window).scrollTop();

            function newPosBG (x, scrollTop, adjuster, inertia){
                return x + "% " + (-(scrollTop - adjuster) * inertia)  + "px";
            }
            function newPosTop (start, scrollTop, adjuster, inertia){
                return (start-(scrollTop - adjuster) * inertia)  + "px";
            }
            function newBottomHeight (start, scrollTop, adjuster, inertia){
                return (start+(1-(delta-scrollTop)/delta) * inertia)  + "px";
            }

            $('.money2').css({'top': newPosTop($money2Top, scrollTop, 0, 0.2)});
            $('.money3').css({'top': newPosTop($money3Top, scrollTop, 0, 0.1)});
            $('.chips1').css({'top': newPosTop($chips1Top, scrollTop, 0, 0.1)});

            var delta = $('body').height() - $(window).height();
            if (delta > 0){
                $('.bottom-photo1').css({'height': newBottomHeight(445, scrollTop, delta, 70)});
                $('.bottom-photo2').css({'height': newBottomHeight(355, scrollTop, delta, 40)});
                $('.bottom-photo3').css({'height': newBottomHeight(331, scrollTop, delta, 19)});
                $('.bottom-photo4').css({'height': newBottomHeight(330, scrollTop, delta, 19)});
                $('.bottom-photo5').css({'height': newBottomHeight(355, scrollTop, delta, 40)});
                $('.bottom-photo6').css({'height': newBottomHeight(385, scrollTop, delta, 70)});
                $('.ticket').css({'height': newBottomHeight(290, scrollTop, delta, 10)});
            }
        }

        $(window).resize(function(){
            scroller(); 
        });

        $(window).on('scroll', function(){ 
            scroller();
        });
    }

});

Скачать пример (рабочая страница примера с изображениями), 1.6 Mb

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 29.01.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
dbForge Studio for MySQL Professional license
ESET NOD32 Антивирус - продление лицензии на 1 год на 3ПК
ESET NOD32 Cyber Security Pro, лицензия на 1 год
ABBYY Lingvo x6 Английская Профессиональная версия
ESET NOD32 SMALL Business Pack newsale for 3 user
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
СУБД Oracle "с нуля"
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Компьютерные книги. Рецензии и отзывы
Один день системного администратора
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Отличается ли ДрифтКазино от беттинга? (23)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
Особенности покупки программного обеспечения - легальный софт vs. кряки/crack, keygen и пр. (4)
А Linux не пробовали? Там ЛЮБОГО добра хватает :) Без всяких кряков, кейгенов и т.д. При этом...
 
Создавая свой веб-сайт, не превращайте его в призрака (3)
Если автор имел что сказать, то почему он этого не сказал. Если не имел, то с какой целью он...
 
Игровые автоматы на настоящие деньги (3)
Только играя в интернет-заведении с лицензией...
 
Детейлинг центр (1)
Ездили в отпуск в Москву, сломалась выхлопная система - отремонтировали здесь:...
 
 
 



    
rambler's top100 Rambler's Top100