Как создать такой эффект?

[maximamus]

Здравствуйте! Не подскажете как сделать такой эффект -http://www.apple.com/macbook/
при скроле, что бы двигался объект

[Bond]

Вешаешь событие скрол, считаешь сколько проскролено сверху до блока который двигается к примеру 100 пикс, потом задаешь ему движение пропорционально скролу, к примеру если проскролено от 100 до 150 пикс, то двигаешь блок как нужно, то ли у два раза то ли у три меньше, как захочешь. При этом задаешь блоку плавность через transition в CSS. Таким образом можно не только двигать блок но и вертеть, или менять цвет, прозрачность, размер и т.д

[Bond]

Небольшой набросок но с применением 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)');
             }
	})

Конечно же реализовать по другому желательно если будет много блоков, но суть такая

[ruslan_mart]

Bond, если скролл будет больше 100 и меньше 300, то постоянно будет парситься весь документ, чтобы найти элемент .bl, затем будет к нему устанавливаться уже установленные стили.

[Bond]

Ruslan_xDD,
Если честно то ничего не понял.
Что значит будет парситься весь документ? Вернее не понял в чем проблема - нам ведь все равно нужно его выбирать постоянно. Если есть варианты что бы не парсился весь документ, или что бы вообще не парсился - предложи.
Да, и стили в этом диапазоне будут устанавливаться постоянно новые, но только transform - а как иначе его шевелить?

[ruslan_mart]

Bond, ну как минимум тебе нужно записать элемент в переменную и вынести за ф-цию:

var bl = $('.bl');

$(window).scroll(function() {
    bl.css(...);
});

Иначе ты каждый раз дёргаешь весь документ, парсишь селектор и ищешь по этому селектору нужный элемент.

Вообще такие дела лучше делать на чистом JS, ибо будет быстрее и производительней. Кстати, тут transform тоже лишний, лучше просто менять top/bottom.

[tsigel]

Ruslan_xDD,
Трансформ быстрее работает, чем bottom и top (правда разница есть только на мобилах)

[ruslan_mart]

tsigel, не думаю, что разница велика. Зато bottom/top не требует никаких префиксов и работает во всех браузерах.

[tsigel]

Ruslan_xDD,
ненене, на мобилках с установленым translate-3d намного быстрее работает. Главное чтобы внутри элементов что-то менялось пореже (та он превращает такие элементы в текстуры и не пересчитывает при рендере + включается аппаратное ускорение (только на 3д трансформации))

Правда иногда это играет и в минус. После обновления хрома при превращении в текстуры сильно падает качество больших картинок. Вообщем там есть заморочки но в большенстве случаев на мобиле трансформ отыграет сильно быстрее. (работаю с мобилками и анимациями очень много)

[Bond]

Ruslan_xDD,
Понятное дело что на чистом JS лучше, я так только логику описал, потому как JS только осваиваю и еще не дошел до страницы где общение с DOM описывается
Ну а transform взял потому что на сайте яблока тоже transform меняется. Не парился что быстрее работает. Но как бы понятное дело что необязательно transform юзать, можно кучу вариантов применить.
И вообще если много блоков планируется то можно с ООП-шным уклоном сделать
tsigel,
А вот по поводу мобилы не уверен будет ли вообще уместно это делать именно для моб. В данном примере. Мне кажется что анимация не будет заметна особо. Не то что бы с тех. причин проблема, а именно из-за специфики юзания моб. контента. Типа пальцем закрыл картинку и т.д