jQueryとCSSでスクロール時に画像を下からふわっと表示させる方法 + ネイティブ javascriptでの書き方も掲載！
スクロールしていくと画像やコンテンツがふわっと表示されるWEBサイトってカッコイイですよね。動きがあると読者の目を引くだけでなく、WEBサイトがリッチになるのでぜひ取り入れたいエフェクトです。 僕もこのサイトに実装してみたので、その方法を書いていきたいと思います。単純にjQueryとCSSで作成する方法だけでなく、ネイティブjavascriptで書く方法も合わせてご紹介します。 デモはコチラ↓ ふわっと表示（フェードイン）させる仕組み 仕組は至って簡単です。 まず、ふわっとさせたい画像やコンテンツなどの要素にCSSのopacityを使って透明にします。さらに下から出てくるようにtransformで少し下の方に設置。 そしてある一定のところまでスクロールされた時に、jQueryやjavascriptを使ってCSSの値を書き換えて、要素をふわっと表示させるだけの簡単な仕組みです。 実装方法 そ
JavaScript（jQuery）でhtmlをインクルード
JavaScript（jQuery）を使って外部に設置したhtmlファイルをインクルードさせるサンプルです。 ヘッダーやフッターなどの共通パーツを外部ファイル化することで、メンテナンス性が高くなります。 反面、JavaScriptで動的に生成するため、Googleのクローラーは認識しませんので、その対策が必要になります。 個人的には、とりあえずウェブマスターツールでサイトマップxmlを送信しとけば最低限は何とかなるかなって感じです。責任は持てませんけど。。 ※このサンプルはjQueryと jquery.cookie が必須になりますので、以下からダウンロードするか、CDNを読み込むなりしてください。 本家jQuery GitHub（https://github.com/carhartl/jquery-cookie） HTML ベースとなるhtml <!DOCTYPE html> <html
視差効果（パララックス）を簡単に導入できるJavaScript「skrollr」
twitter facebook hatena google pocket 昨今流行っている視差効果（パララックス）を導入してみたい人は多いのではないでしょうか。 Prinzhorn/skrollrを利用すれば比較的簡単に導入可能です。 sponsors 使用方法 Prinzhorn/skrollrからファイル一式をダウンロード。 <script type="text/javascript" src="skrollr.js"></script> <script type="text/javascript"> skrollr.init(); </script> <link href="skrollr.css" rel="stylesheet" type="text/css" /> あとはdivの中にdataで高さとエフェクトを指定していきます。 <div data-0="" //高さ0px
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Prinzhorn/skrollr: Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
