jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験｜BLACKFLAG
パララックスサイトやAppleのプロダクトページの様な動きを付ける為の スクロールして特定の位置でアニメーション等の処理を実行させることができる jQueryプラグイン等をここでも何度か紹介しましたが プラグインのバージョンによって動作仕様が変わってしまっていたり 上からのスクロールと、下からのスクロールの判断が微妙だったりしたので なんとか簡単にスクロールの上下を判別させて、 なにか処理を実行させるスクリプトができないものか 試しに作ってみたので紹介してみます。 まずはサンプルから。 下記の画面をスクロールするとコンテンツ要素が順々にフェードインします。 「jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション処理実行させる実験」サンプルを別枠で表示 上記サンプルでは6つコンテンツエリアを縦に配置してあります。 上からスクロール（ダウン）してそれぞれのコン
jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる
jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる 通常はマウスホイールでのスクロールするとピタッと止まりますが、止まるときに余韻が残ったりするとなんだかリッチな感じがしますよね。 ということでjQueryで、その動きを作ってみました。 投稿日2011年08月10日 更新日2011年08月10日 プラグインのダウンロード jQueryはもちろんのことですが、ここではマウスホイールを検出するために「MOUSE WHEEL EXTENSION」と、かっこよくスクロールするために「jquery.easie.js」というプラグインを使用します。 MOUSE WHEEL EXTENSION jquery.easie.js javascript javascriptのコードは以下のようになります。 javascript <script type="text/javascript"
数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス
実装は簡単です。 既存のページにもこれなら簡単に組み込めると思います。 HTML パララックススクロール用の背景を配置するために先頭に空のdiv要素を加え、あとのコンテンツは普通に実装します。 <div class="background"></div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1> <h2 class="pageSubTitle">見出しLv2</h2> <p>パラグラフ</p> <p>パラグラフ</p> <p>パラグラフ</p> </div> <div class="slogan"> <h2 class="sloganTitle"> Parallax scrolling </h2> </div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1>
クリックで開閉するスライドパネル - かちびと.net
Result jQuery $(document).ready(function(){ //クリックイベント $('.head').click(function(){ //class="row"をスライドで表示/非表示する $(this).next('.row').stop(true, true).slideToggle(); }); }); html <div class="head">Panel 1 </div> <div class="row"> <div>Panel 1 sample</div> <div>Panel 1 sample</div> <div>Panel 1 sample</div> </div> <div class="head"> Panel 2</div> <div class="row"> <div>Panel 2 sample</div> <div>Pane
スマホ向けサイト制作の実装＆使えるTips10選
スマホ向けサイト制作の実装＆使えるTips10選：jQuery Mobileでスマホ向け企業サイト構築（3）（1/4 ページ） まだjQuery Mobileを触ったことのないWeb制作者向けに、基本的な利用方法を学びながら、jQuery Mobileを使った簡単な企業サイトの構築の仕方を解説していきます。今回は、画面遷移の制御、アイコン表示、ナビゲーションバー、検索フィルタ、基本的なHTMLスタイル、固定ポジションモードなどを紹介します jQuery Mobileでスマホ向けサイト制作は、こんなに簡単にできる 前回の第2回「触りながら覚えるスマホ向け企業サイト設計の基礎知識」では、サイトの基本構造についての説明と、トップページのコーディングに合わせてヘッダ、フッタなどのツールバー、リストビューコンポーネントを紹介しました。 新年1発目となる本連載の第3回はお知らせページの作成を進めつつ、
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
2回目以降のページロード時には、実行しないようにし
jQueryのCookieプラグイン「jquery.cookie.js」 http://plugins.jquery.com/project/Cookie 使って、↓のようにすれば出来るけど、モーダルウィンドウ内でOK、NGの 判定はしてないよ。つまり、そこからYahooに飛んで戻ってきても、 あなたのページは訪問したことになってるよ。 ※全角空白は半角空白にしてね。 <script type="text/javascript"> $(function(){ if($.cookie("check")===null){ var now = new Date(); now.setTime(now.getTime()+ 3600 * 1000); //1時間(3600秒)後 $.cookie("check","ok",{expires:now}); $('html').css({overflow
5509
米乐网页版在线登录（中国）有限公司官网是一家集技术、研发、加工、销售为一体的高新技术企业。公司在测力仪器领域有多年的经验。为客户提供性价比高的测力仪器及相应的辅助设备，具有优良的设计能力和完整的工艺控制。产品质量可靠稳定。一些产品不仅超过同类进口产品，而且还出口到世界各地。深受米乐网页版在线登录用户和经销商的好评。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://caroufredsel.frebsite.nl/
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net