Как создать такой эффект?
Здравствуйте! Не подскажете как сделать такой эффект -http://www.apple.com/macbook/
при скроле, что бы двигался объект |
Вешаешь событие скрол, считаешь сколько проскролено сверху до блока который двигается к примеру 100 пикс, потом задаешь ему движение пропорционально скролу, к примеру если проскролено от 100 до 150 пикс, то двигаешь блок как нужно, то ли у два раза то ли у три меньше, как захочешь. При этом задаешь блоку плавность через transition в CSS. Таким образом можно не только двигать блок но и вертеть, или менять цвет, прозрачность, размер и т.д
|
Небольшой набросок но с применением jQuery так как на нативном пока не освоил общение с DOM
Верстка <style type="text/css"> .bl{ margin: 300px auto 0; height: 200px; width: 200px; border: 1px solid #000; transition: all 0.5s; transform: translateY(100px) translateZ(0px); } </style> <div class="bl"></div> JS $(window).scroll(function(){ var scroll = $(window).scrollTop(); if(scroll > 100 && scroll< 300){ $(".bl").css('transform', 'translateY(' + (scroll-100)/2 + 'px ) translateZ(0px)'); } }) Конечно же реализовать по другому желательно если будет много блоков, но суть такая |
Bond, если скролл будет больше 100 и меньше 300, то постоянно будет парситься весь документ, чтобы найти элемент .bl, затем будет к нему устанавливаться уже установленные стили.
|
Ruslan_xDD,
Если честно то ничего не понял. Что значит будет парситься весь документ? Вернее не понял в чем проблема - нам ведь все равно нужно его выбирать постоянно. Если есть варианты что бы не парсился весь документ, или что бы вообще не парсился - предложи. Да, и стили в этом диапазоне будут устанавливаться постоянно новые, но только transform - а как иначе его шевелить? |
Bond, ну как минимум тебе нужно записать элемент в переменную и вынести за ф-цию:
var bl = $('.bl'); $(window).scroll(function() { bl.css(...); }); Иначе ты каждый раз дёргаешь весь документ, парсишь селектор и ищешь по этому селектору нужный элемент. Вообще такие дела лучше делать на чистом JS, ибо будет быстрее и производительней. Кстати, тут transform тоже лишний, лучше просто менять top/bottom. |
Ruslan_xDD,
Трансформ быстрее работает, чем bottom и top (правда разница есть только на мобилах) |
tsigel, не думаю, что разница велика. Зато bottom/top не требует никаких префиксов и работает во всех браузерах. :)
|
Ruslan_xDD,
ненене, на мобилках с установленым translate-3d намного быстрее работает. Главное чтобы внутри элементов что-то менялось пореже (та он превращает такие элементы в текстуры и не пересчитывает при рендере + включается аппаратное ускорение (только на 3д трансформации)) Правда иногда это играет и в минус. После обновления хрома при превращении в текстуры сильно падает качество больших картинок. Вообщем там есть заморочки но в большенстве случаев на мобиле трансформ отыграет сильно быстрее. (работаю с мобилками и анимациями очень много) |
Ruslan_xDD,
Понятное дело что на чистом JS лучше, я так только логику описал, потому как JS только осваиваю и еще не дошел до страницы где общение с DOM описывается:) Ну а transform взял потому что на сайте яблока тоже transform меняется. Не парился что быстрее работает. Но как бы понятное дело что необязательно transform юзать, можно кучу вариантов применить. И вообще если много блоков планируется то можно с ООП-шным уклоном сделать tsigel, А вот по поводу мобилы не уверен будет ли вообще уместно это делать именно для моб. В данном примере. Мне кажется что анимация не будет заметна особо. Не то что бы с тех. причин проблема, а именно из-за специфики юзания моб. контента. Типа пальцем закрыл картинку и т.д |
Часовой пояс GMT +3, время: 23:49. |