(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
Rational ClearCase Multisite Floating User License
GFI FaxMaker и 1 год поддержки (10-49 лицензий)
Allround Automation PL/SQL Developer - 5 user license
Microsoft Office для дома и учебы 2019 (лицензия ESD)
dbForge Studio for MySQL Professional license
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Вопросы и ответы по MS SQL Server
Один день системного администратора
ЕRP-Форум. Творческие дискуссии о системах автоматизации
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Нормальные казино в 2021 году (6)
После долгих поисков все таки смог найти хорошие игровухи, хотя и ушла куча времени, пока я...
 
Отличается ли ДрифтКазино от беттинга? (35)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
Реклама (6)
Добрый день. Какое продвижение сделать собственному бизнесу?
 
Бесплатные прогнозы на спорт (1)
Сейчас много мошеннических прогнозистов, которые занимаются так называемыми раскрутками счетов,...
 
Топ рейтинг слотов 2021 года (4)
Среди огромного выбора азартных слотов...
 
 
 



    
rambler's top100 Rambler's Top100