[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js
スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。 さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定 まずは、コアとなるフレームを作成します。この中に
![[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/24728443d0a7001537016b0816df756534c67040/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040301.png)
スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ｷﾞﾐｷﾞﾐ└( ＾ω＾ )」ｼｪｲｸ♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは？ スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<ｱﾘｰﾃﾞｳﾞｪﾙﾁ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header
[JS]縦長ページで構造に合わせて水平コンテンツをうまくレイアウトするスクリプト -gridscrolling.js
メインコンテンツとなる垂直に配置されたsection要素に、それぞれのサブコンテンツとなるaside要素を水平に自動配置するjQueryのプラグインを紹介します。 垂直・水平スクロールを使ったウェブページだけでなく、プレゼン用のスライドなどにも利用できそうですね。 gridscrolling.js gridscrolling.js -GitHub gridscrolling.jsのデモ gridscrolling.jsの使い方 gridscrolling.jsのデモ デモは右上にあるマップのようにコンテンツが配置されており、垂直に並んでいるのがsection要素、水平がそのsection要素のサブにあたるaside要素になっています。 操作はキーボードの矢印キーで、普通にマウスのホイールでも操作はできます。 スクリプトが利用できない環境でも問題ありません。 sectionはsection、
[JS]映画のエンドロールみたいな演出を加えるスクリプト -End Credits
End Creditsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="static/endcredits.js"></script> </body> Step 2: HTML まずは、エンドロールを呼び出すボタン。 <a href="#creditos" name="creditos">Open Credits</a> エンドロールはdiv要素などに「#credits」を付与し、その中に記述します。通常時は表示されず、ボタンをクリックをすると表示されます。 <!-- Start of Credits -->
[JS]縦長のスクロールページに使いたい便利なスクリプト -isInViewport.js
Demo: Basic div要素が縦に並べてあるだけのページで、最初は背景のカラーが全てグレーです。スクロールするとビューポート内にある2番目のdivのみ明るいグレーになります。 アドバンスではビューポートを上から100px狭く設定し、適用しています。 ※ベーシックにもスクロールするとこの機能が発動します。 Demo: Advanced isInViewport.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="jquery.min.js"></script> <script src="isInViewport.min.js"></script> </head> Step 2: HTML HTMLは特に意識する必要はありません、通常通り実装します。 <div> ...
[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js
スクロールベースのページを実装する時にぴったり！ ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。 スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。 Headroom.js 下にスクロールすると、ヘッダが上部に吸い込まれます。 一旦消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。 この「どのポジションからでも」というのがこのスクリプトの便利なところです。 スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。 デザインは似ていますが、こちらは「Playroom」です。 デモページ ヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクト
[JS]指定した要素を抽出して、自動でページ内アンカーのナビゲーションを設置するスクリプト -MagicNav.js
ナビゲーションを抽出 ページ内の移動は、アニメーションを伴ってスクロールします。 MagicNav.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="magicnav.js"></script> Step 2: HTML デモではdl要素でFAQが実装されています。 dl, ulなどに限らず、hxの見出しなどでも構いません。 <h3>FAQ</h3> <dl> <div id="commercial" title="commercial"><dt><strong>よくある質問</strong></dt> <dd><p>回答</p></dd
[JS]ページのスクロール時、天地に紙を折り曲げるエフェクトを加えるスクリプト -FoldScroll
[JS]ページのスクロール時、天地に紙を折り曲げるエフェクトを加えるスクリプト -FoldScroll
[JS]スマフォで各セクションのヘッダをそれぞれスクロールに追従させるスクリプト
iPhone, iPad, ガラケーなどのスマフォで、各セクションのヘッダをそれぞれ半透明の状態でスクロールに追従させるスクリプトを紹介します。 A, B, C と追従中 対応ブラウザ iPhone 4GS (iOS5) iPhone 4G (iOS5) iPhone 3GS (iOS5) iPad 3 (iOS5) iPad 2 (iOS5) Galaxy S3 (Ice Cream Sandwich) Galaxy S2 (Gingerbread) NEXUS S (Jelly Bean) 実装 Step 1: 外部ファイル 外部ファイルは下記の2つのスクリプトと当スクリプト・スタイルシートをhead内に記述します。 zepto.js jQueryと互換性のあるモバイル用軽量ライブラリ iscroll.js モバイルでposition:fixedを実現するスクリプト <script s
[JS]デモがバツグンにかっこいい！さまざまな要素がビューポートに表示される時にエフェクトを与えるスクリプト -onScreen
Scrollable Containers onScreenはさまざまなDOM要素に対応しており、パラグラフ、画像、コンテンツスライダーなどスクロールが可能な要素全てに利用できます。 スクロールして表示する際に、ちょっとだけCSSのエフェクトを加えるのかっこいいですね。 onScreenの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="lib/jquery.onscreen.min.js"></script> </head> Step 2: HTML onScreenを適用するエレメントは指定できるよ
[JS]スクロールして次に表示するコンテンツを引っ張り上げるように表示するスクリプト -pullupScroll
スマフォやタブレットのアプリでよく見かける、次に表示するコンテンツを引っ張り上げるように少しだけ遅らせて表示するjQueryのプラグインを紹介します。 こういうちょっとしたエフェクトって、楽しいですね。 デモページ デモの動きだけでなく、左上のアイコンに3種類のエフェクトが仕込まれていて、面白いです。 pullupScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 引っ張り上げる各エレメントにclassを付与し、それらを内包する
[JS]着眼点が面白い！スクロールできない状態でキーボードやクリックでスクロールさせるスクリプト -Scrollocue
2番目のパラグラフに移動して、ハイライト表示 Scrollocueの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery-2.0.3.js"></script> <script src="js/scrollocue.js"></script> Step 2: HTML スクロールのキューとなるパラグラフを配置し、適用する範囲を指定できるようラッパーで包みます。 適用範囲のラッパー：#container <div id="container"> <h1>Scrollocue</h1> <div class="section meta"> <p>A simple autocue/teleprompter system.</p> <p>Just use the arrows or spacebar t
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
[JS]スクロールに追従するページの先頭へアニメーションで戻るボタンが簡単に設置できるスクリプト -scrollUp
HTMLは一切変更せずに、スクロールに追従するページの先頭へ戻るボタンが簡単に設置できるjQueryのプラグインを紹介します。 デモページ：タブ scrollUpの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.scrollUp.js"></script> デザインをそのまま使用する場合は、スタイルシートもテーマごとに用意されています。 <link id="scrollUpTheme" rel="stylesheet" href="css/themes/link.css"> <li
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
[JS]シンプルなページ内スクロールから、ちょっと面白いスクロールまで簡単に実装できるスクリプト -Scrolld.js
Demo 3 一番目はdiv、二番目はネコの画像、下の方には表示幅に合わせてエフェクトが変わります。 Scrolld.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを</body>の上あたりに外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../demo/js/scrolld.min.js"></script> Step 2: JavaScript スクリプトのトリガーを外部ファイルの下に記述します。 <script type="text/javascript"> $("[id*='Btn']").stop(true).on('click',function(e){e.preventD
[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス
SMINT SMINTの使い方 Step 1: 外部ファイル スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> </head> Step 2: HTML まずは、最上部に配置されるナビゲーションから。 <div class="subMenu" > <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Section 1</a> <a href="#" id="s2" c
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス
実装は簡単です。 既存のページにもこれなら簡単に組み込めると思います。 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>
[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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
