23 июля 2013

Mouse Parallax

С совершенствованием технологий, увеличения скорости интернет соединений появилась отдельная категория сайтов, единственной целью которых является реклама товаров или услуг, причем зачастую делается под каждый конкретный продукт отдельный сайт. Такие сайты отличаются от привычных ярким запоминающимся дизайном, использованием анимации, простым и понятным интерфейсом и практически полным отсутствием функционала. Их называют промо сайтами (promotion - продвижение, реклама).

В этой статье я расскажу о несложном, но весьма эффектном приеме, который отлично впишется в концепцию промо сайта.

Данный эффект был предложен дизайнером вот для этого проекта: http://www.jungly62.ru/

Если использовать корректную формулировку, то это называется Паралакс эффект - изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Хотя, на самом деле, этим термином в верстке обычно обозначают немного другой эффект (parallax scrolling). Так что назовем его "упрощенный паралакс" или parallax mouse. Как видно из названия, мы будем реагировать на изменение положения мыши.

Рассмотрим простейший пример, где у нас имеются 3 уровня, назовем их layer1(наиболее удаленный от зрителя), layer2 и layer3 (наиболее близкий к зрителю). Так как пример упрощенный, то разместим на этих слоях произвольным образом раскиданных по экрану буквы и пропишем следующие стили:

body, html{
    font-family: "Times New Roman", Times, serif;
    margin:0px;
    padding:0px;
    height:100%;
    min-height:100%;
    font-size:12px;
    font-size: 14px;
    background: #fff url(../images/bg.jpg) no-repeat top center;
}
#list{
    width: 735px;
    min-height: 720px;
    margin:0 auto;
}
#simbol .simbol1{margin-left: 400px; top: 280px;}
#simbol .simbol2{margin-left: 620px; top: 140px;}
#simbol .simbol3{margin-left: 690px; top: 170px;}
#simbol .simbol4{margin-left: 600px; top: 240px;}
#simbol .simbol5{margin-left: 570px; top: 290px;}
#simbol .simbol6{margin-left: 670px; top: 210px;}
#simbol .simbol7{margin-left: 520px; top: 290px;}
#simbol .simbol8{margin-left: 500px; top: 390px;}
#simbol .simbol9{margin-left: 570px; top: 360px;}
#simbol .simbol10{margin-left: 665px; top: 340px;}
#simbol .simbol11{margin-left: 580px; top: 220px;}

#simbol .layer3{
    z-index: 8;
    position:absolute;
    font-size: 50px;
    font-weight:bold;
}
#simbol .layer2{
    z-index: 7;
    position:absolute;
    font-size: 25px;
    color: #272727;
    text-shadow: 0 0 2px #272727, 0 0 2px #272727, 0 0 2px #272727;
    font-weight:bold;
}
#simbol .layer1{
    z-index: 6;
    position:absolute;
    font-size: 12px;
    color: #555555;
    text-shadow: 0 0 3px #555555, 0 0 3px #555555, 0 0 3px #555555;
    font-weight:bold;
}

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

Помимо 3х уровней будем также обрабатывать положение бэкграунда.
Код на JS будет иметь следующий вид:

$(document).ready(function(){
    var bg_width = 1024; // Ширина фонового изображения
    var max = 100; // Величина максимального смещения
    
    if ($('#simbol').length){
        // Обнуляем промежуточные переменные
        oldX = 0;
        cur = 50;
        num_l = 0;
        num_r = 0;
        // Событие перемещения мыши
        $(window).mousemove(function(event) {
            // Вычисляем отступ слева для фона, чтобы выровнять его по центру
            var bg_pos = Math.round(($(window).width() - bg_width)/2);
            
            if (event.pageX > oldX){
                if (cur<max){
                    // Смещение для уровня 1
                    $('#simbol .layer3').css('margin-left', '-=1');
                    // Смещение для уровня 2 (каждое второе смещение)
                    if (num_l == 1 || num_l == 2)
                        $('#simbol .layer2').css('margin-left', '-=1');
                    // Смещение для уровня 3 (каждое четвертое смещение)
                    if (num_l == 4){    
                        $('#simbol .layer1').css('margin-left', '-=1');
                    }
                    // Смещение фона
                    $('body').css('background-position', bg_pos-Math.round((100-cur)/4)+'px 0px');
                    cur++;
                    num_l++;
                    // Обнуляем счетчик
                    if (num_l > 4) num_l = 0;                    
                }
                
            }
            if (event.pageX < oldX){
                if (cur>0){
                    $('#simbol .layer3').css('margin-left', '+=1');
                    if (num_r == 1 || num_r == 2)
                        $('#simbol .layer2').css('margin-left', '+=1');
                    if     (num_r == 4){
                        $('#simbol .layer1').css('margin-left', '+=1');
                    }
                    $('body').css('background-position', bg_pos-Math.round((100-cur)/4)+'px 0px');
                    cur--;    
                    num_r++;
                    if (num_r > 4) num_r = 0;
                }
            }
            oldX = event.pageX;
        });
    }

Скачать Демо live demo

Комментарии  

Александр02 февраля 10:02
Большое спасибо за ваш пример очень сильно выручил.
Александр Одесса02 апреля 11:04
Спасибо! ! Уважуха!

У вас нет прав для комментирования