ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 2013年09月19日- jInvertScroll - A lightweight jQuery horizontal Parallax scrolling plugin ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 パララックスというと最近よく見ますが、殆どはたて型のスクロールですよね。 横にスクロールすることでまた違った印象を与えることができそうです。jQueryプラグインなので超簡単に実装が可能です 横スクロール型にすることで２DアクションゲームのようなWEBサイトにしてみても面白いかも。 関連エントリ レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 パララックスなスライダーを実装
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し：slide
複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
