Как можно улучшить jQuery Scroll effects?

Question

[Илья Сидоренко]

Как предложите улучшить?

<div id="bl">    
    <img src="images/brin.png" id="f">   
    <img src="images/girl.png" id="s">   
    <img src="images/my.png" id="t">   
  </div>

$(document).scroll(function() {
    if( $(this).scrollTop() > 50 ) {                
      $( "#s" ).animate({ "margin-left": "-350px" }, 300 );
      $( "#f" ).animate({ "margin-left": "350px" }, 300 );
    }
});

#bl img {
    width: 300px;
    position: absolute;
  }

Пытался сделать, что-то похожее на badoo.com

Answer 1

[Sergei Chukhan]

А почему бы не реализовать подобную задачу средствами CSS3 (как по мне, такая анимация более плавная)? Или интересует поддержка и в старых браузерах?

Comments

[Илья Сидоренко]

@street приведите пример)

[Sergei Chukhan]

@iskros ниже уже опередили. Единственное, добавлю, что Вам нужно проверять, добавлен ли нужный класс, тк при скролле действие будет выполняться постоянно.

[Илья Сидоренко]

@street спасибо

Answer 2

[Krickt]

.move-right { /** Движение вправо на 350px с помощью CSS3 **/
transform: translate(350px,0);
-webkit-transform: translate(350px,0); /** Chrome & Safari **/
-o-transform: translate(350px,0); /** Opera **/
-moz-transform: translate(350px,0); /** Firefox **/
}

Answer 3

[aen]

Я бы все-таки менял не margin-left, а left, тем более, что у вас картинки все равно position: absolute;.