mashable.comの画像のフェードイン効果について疑問に思っています(たとえば、 http://mashable.com/2009/08/14/google-android-logo-remixes/を参照)
画像までスクロールすると、フェードインします。ページの読み込み時にフェードインするのではなく、画面上のアイテムが実際に表示されたときにのみフェードインします。
ありがとう。
mashable.comの画像のフェードイン効果について疑問に思っています(たとえば、 http://mashable.com/2009/08/14/google-android-logo-remixes/を参照)
画像までスクロールすると、フェードインします。ページの読み込み時にフェードインするのではなく、画面上のアイテムが実際に表示されたときにのみフェードインします。
ありがとう。
これは、jQueryプラグインの遅延読み込みで実現されます。
編集:彼らが使用したコードは次のとおりです:
if(! navigator.userAgent.toLowerCase().match('ipad')){
$('#primary img').lazyload({effect:'fadeIn',placeholder:'/wp-content/themes/v6/_base/img/blank.png'});
}
lazyloadのmootoolsバージョンが見つかりましたhttp://davidwalsh.name/mootools-lazyload
lazyloadのjQueryバージョンもあります。
残念ながら、Lazy Loadプラグインは、ほとんどの実際のブラウザでは機能しません。自身の作者によると、公式Webサイトで述べています。
しかし、jQuery Appearプラグインはほとんど同じことをします!;-)
YUIバージョンも利用できます。実際、LazyLoadはそれに触発されました。