[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
[JS]これは楽しい！スマフォUIのように下に引っ張るとリフレッシュするスクリプト -Hook.js
スマフォやタブレットのように、下に引っ張るとページをリフレッシュするjQueryのプラグインを紹介します。 Hook.js 最上部に戻ってからの上方向スクロールでもリフレッシュするようです。 普通のページではリフレッシュするシーンがあまりないですが、何かに使いたいな、、、 Hook.jsの使い方 実装は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <link rel="stylesheet" href="hook/hook.css" type="text/css" /> <script src="hook/hook.js"
スクロールに応じてパララックス効果を表現できるスクリプト・jarallax
スクロールに応じて視差効果 を表現できるスクリプト・ jarallaxのご紹介。jQueryを 必要とするみたいです。よく 見かけるやつですが、デモが 良かったので備忘録的に。 jQuery依存のパララックスエフェクト実装スクリプトです。時間無いので紹介だけとさせて頂きます。 よくあるパララックス実装スクリプト。デモ作る暇が無かったので公式のをご覧下さい。 Sample フェードエフェクトがうまく使われてます。 アニメーションの定義をcloneAnimationでクローン化出来る様にしたそうです。 var jarallax = new Jarallax(); var animation = jarallax.addAnimation('#foo',[{progress:'0', opacity:'0', top:'100%'}, {progress:'10', opacity:'1', t
ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」:phpspot開発日誌
ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 2012年02月13日- Page Scroller: A Simple Page Scrolling Plugin ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」。 ページ内を上や下に移動できるだけではなく、ページ内のマークアップを読み込んでナビゲーションを作ってくれた上でスクロールできたりもします jQueryプラグインなので、$('#main').pageScroller(); みたいに呼ぶだけです ページの左サイドにナビゲーションを表示する例 綺麗なスキンがかぶって表示されます 上下矢印のナビゲーションも可能 サイドではなく、ページトップにナビゲーションを設定することも可能 右サイドにも移動可能 なかなか便利で使えそうですね。１ページに沢山の情
スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」:phpspot開発日誌
Curtain.js スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 単なるスクロールする縦長ページではなく、スクロールするとブロック要素が別々に動いて面白い演出が作れます。 左下のナビゲーションでページ送りをしたりも出来るみたい 今なら、これを使ってサイトを作れば、玄人なWEB業界の人も目を丸くするかもしれませんね。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」
「パス」を定義して、スクロールに応じて曲線を描くようなアニメーションを実装出来るjQueryプラグイン・Scroll Path
過去に何度か出ている、スクロールに応じて 要素がユニークな動きをするプレゼンを実装 出来るjQueryプラグイン。今日のプラグイン は、Photoshopやイラレなんかでお馴染みの ペンツールによるパスを定義できる、という もので、滑らかな曲線を描いて動作してくれ ます。 タイトル意味分かりませんねｗちょっと説明がしにくいのでデモ見ていただきたいんですが、ペンツール等で描くパスのような曲線を定義できる、というもので、スクロールすると、設定したパスに沿って動いてくれます。 以下デモです。Webkit系推奨。 Sample 設定したパスの確認 右下に確認用のオンオフの切り替えボタンが付いていますのでこれでパスの確認が出来ます。 パスを設定する為のコードスクロールの軌道となるパスの設定は以下のようにします。 path.moveTo(400, 50, {name: "start"});moveTo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
