Как сделать изображение плавным при прокрутке (например, mashable.com)

Меня интересует эффект постепенного появления изображений на mashable.com (см. http://mashable.com/2009/08/14/google-android-logo-remixes/, например)

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

Спасибо.


javascript animation effect fade
person Mahmoud Al-Qudsi    schedule 01.05.2010    source источник
comment
Вы можете определить, отображается ли элемент HTML на странице с помощью JQuery, и вызвать любую функцию, как только она станет видимой: stackoverflow.com/questions/487073/   -  person Anderson Green    schedule 20.02.2013

Ответы (5)


arrow_upward
9
arrow_downward

Это достигается с помощью подключаемого модуля jQuery Lazy Load.

РЕДАКТИРОВАТЬ: вот код, который они использовали:

if(! navigator.userAgent.toLowerCase().match('ipad')){
  $('#primary img').lazyload({effect:'fadeIn',placeholder:'/wp-content/themes/v6/_base/img/blank.png'});
}
person Vincent    schedule 01.05.2010
comment
Спасибо, я подумал, что это что-то вроде задержки загрузки и ленивой загрузки :) - person Mahmoud Al-Qudsi; 01.05.2010

arrow_upward
1
arrow_downward

Нашел mootools версию lazyload http://davidwalsh.name/mootools-lazyload

person RRG    schedule 11.05.2010

arrow_upward
1
arrow_downward

К сожалению, плагин Lazy Load не работает в большинстве современных браузеров, согласно на официальном сайте автора .

Но jQuery Appear Plugin делает почти то же самое! ;-)

person Tárcio Zemel    schedule 31.08.2011

arrow_upward
1
arrow_downward

Также существует jQuery-версия lazyload.

person murrydan    schedule 04.01.2011

arrow_upward
0
arrow_downward

Также доступна версия YUI. Фактически, Lazy Load был вдохновлен этим.

person Drew Noakes    schedule 05.09.2010