[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
[CSS]半透明のパネルが奥に吸い込まれる！一味違った縦長スクロールを実装するスタイルシートのテクニック
<div class="wrapper"> <div class="slides"> <div class="slide"> <div class="title">Pure CSS z-scrolling</div> </div> <div class="slide"> <div class="title">Slide 1</div> </div> <div class="slide"> <div class="title">Slide 2</div> </div> <div class="slide"> <div class="title">Slide 3</div> </div> <div class="slide"> <div class="title">Slide 4</div> </div> <div class="slide"> <div class="title">Slide
![[CSS]半透明のパネルが奥に吸い込まれる！一味違った縦長スクロールを実装するスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/c240a0c68b39f0eb21713fec05a4da0d2fa6b175/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016063006.gif)
ページ内スクロールでURLを変える必要はあるか？ - F.Ko-Jiの「一秒後は未来」
同一ページ内をスクロールしているだけなのに、ブラウザのアドレスバーに表示されている URL が変わるサイトを見かけることが増えてきました。調べてみると HTML5 の History API を使えばそういった挙動を実現できるようで、非同期通信を利用しているサイトなどで適切に利用すれば便利な機能です。 ただ、ページ内をスクロールしているだけなのにいつの間にか URL が変わるという挙動は、時に困った事態に遭遇します。 昨日「Webアプリで音楽を楽しく学べる「Chrome Music Lab」 – ITmedia ニュース」という記事内からリンクされている「Chrome Music Lab」というサイトを見つけました。実際に Chrome Music Lab のトップページを下にスクロールしたり上にスクロールしたりすると、セクションに合わせて URL が切り替わっているのが分かると思います。
このWebサイトを作ったのは私だと主張するためのスタッフロールを流せるjQueryプラグインを作った
TVにあってWebサイトにはないもの。それは・・・スタッフロール！それに気づいてからはや数年・・・。そのjQueryプラグインを作成しました。 概要 Webサイトにもスタッフロールが流れたら面白いなーと思い作ったjQueryプラグインです。レイアウト2種類+縦or横に流れるorフェードバージョン＋おまけが入っています。動作は現時点のデスクトップの最新ブラウザで確認しています。 デモ一覧 タイプ1：縦レイアウト＋縦スクロール 役職と名前が縦に並んでいるバージョンを縦にスクロールしていくバージョンです。 デモ１ タイプ2：縦レイアウト＋フェード 役職と名前が縦に並んでいるバージョンをフェードで表示していくバージョンです。 デモ2 タイプ3：縦レイアウト＋横スクロール 役職と名前が縦に並んでいるバージョンを右から左に表示していくバージョンです。 デモ3 タイプ4：横レイアウト＋縦スクロール 役職
[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス
縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量（3kb gzip）のスクリプトを紹介します。 作者様曰く、これ系のシンプルなライブラリがなかったから作った！とのことです。
![[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/af9a10d85702c4d930b7cc9ea507b0a9293a16c1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015111901.png)
jQuery：ページトップへの動きに使えるエフェクト 5 - NxWorld
閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。 よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。 使用するHTML・デモ サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。
ScrollMagic2系を使って、スクロールに応じたアニメーションをさせてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、づやです。 以前、ScrollMagicについて「ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう」という記事を書いたのですが、気づいたらバージョンが上がって少し使い方が変わっていたので、現時点（2015年06月）での最新バージョン2.0.5の使い方を書こうと思います。 大きな変更点 1番の変更点は、jQueryとGSAP（TweenMax）が必須ではなくなった点です。 いままでは、メジャーなライブラリとは言え2つのライブラリが必須ということで、選択できないシーンもあったのではないでしょうか。 こちらの変更点により、ScrollMagicを選択できるプロジェクトは増えそうです。別途プラグインを読み込むことにより、以前のようにGSAPも使用することが可能です。 また、新たにvelocity.jsにも対応できるようになっています。 スクロールに合わせたア
無限スクロール向け雑なローディング画像
無限スクロールはちょくちょく実装することはあるが、追加するコンテンツの読み込みや挿入はともかく、ローディング画像の処理で悩むことがある。その表示の切り替えには実装と処理のどちらにおいてもそこそこコストがかかるからだ。かなり前に色々考えるのが面倒になり、常に表示しておくという雑な手をよく使うようになった。 Demo: Easy Loading Marker for Infinite Scroll デモでは90%ほどスクロールすると無限スクロールっぽくコンテンツが少し時間をおいてから追加される。コンテナーである#contentの最下部には常にローディング画像を背景画像として表示してあるので、特に操作することなく無限スクロールのためにコンテンツを読込中であることを示すことができる。SVGアニメーションでローディング画像を作ったためInternet Explorer 11では回らないが、おおまかに
下方向にもCSS Transitionでスムーズにスクロール
少し前のCSS Transitionを使ったスムーズにスクロールしてトップに戻る機能という記事では、CSS Transitionを使ってスムーズにスクロールさせるためにbody要素のmargin-topプロパティーを負の値を設定した。これはとにかく上方向へのスクロールにしか使うことは出来ない。下方向にスムーズにスクロールさせるためにはまた別のアプローチが必要になるようだ。 何かしらのCSSプロパティーを使い、body要素を上方向にずらすということになる。つまりtransformプロパティーでtranslate()やtranslate3d()を使いY方向のマイナスへ動かすのが向いているようだ。あとはtransitionプロパティーを組み合わせるだけでスムーズにスクロール(しているように見せる)ことができる。 Demo: Scroll Down Smoothly with CSS Transi
jQueryでスマホのスクロールイベントを無効化する - Qiita
// スクロール禁止 $(window).on('touchmove.noScroll', e => { e.preventDefault(); }); // スクロール禁止 解除 $(window).off('.noScroll'); const $window = $(window); const $menu = $('.menu'); const $menuBtn = $('.menu-btn'); let openFlag = false; $menuBtn.on('click', () => { if (!openFlag) { // スクロール禁止 $window.on('touchmove.noScroll', e => { e.preventDefault(); }); // メニューを表示 $menu.fadeIn(() => { openFlag = true; });
CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能
前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 Demo: Scroll Smoothly with CSS Transition デモのページにはダミーテキストの各セクションの最後にそれぞれ⇑ Back to Topというリンクがある。それをクリックすると1秒かけてスムーズにスクロールしながらトップに戻る。トリガーとスクロール自体はJavaScriptで行っているが、スクロールのアニメーション自体はCSS Transitionで行っている。具体的には以下のような処理
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
iPhoneやAndroidのサイトでスクロールバーをカスタマイズ | スターフィールド株式会社
CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、 iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、 スクロールは可能なのですが、スクロールバーが表示されません。 そのままでは、そこがスクロール可能であるということがわかりづらく、 サイトとして使いづらくなってしまう可能性が高くなります。 なんとか解決策はないかと探していたところ、 Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、 その方法についてご紹介いたします。 ↓こちらがデモです(ChromeもしくはSafariにてご覧下さい) DEMO 方法 スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundと
サイドバーの追尾（固定）は効果がある？Google AdSense で検証した結果 - Naifix
ブログのサイドバーを追尾式（固定）にするのは、何か効果があるのでしょうか。 筆者が運営しているいくつかのサイトでは、Google AdSense 広告を追従させています。収益にどれほどの効果をもたらすのか、規約に反しない程度でデータを公開したいと思います。 そもそもサイドバーには何を設置すべきなのか、広告以外に追尾させると効果がありそうな要素は何か、という点も解説していきますので、ぜひご覧ください。 サイドバーに何を設置すべきか 一般的なブログでは、サイドバーに以下の要素を配置していることが多いですよね。 検索窓 プロフィール ボックスメニュー カテゴリーリスト 新着記事リスト 人気記事リスト 目次 広告 SNS フォローボタン SNS タイムラインウィジェット どれを配置するかは運営者の好みが出てくるところ。「これが絶対的な正解」ということはありません。 あれもこれも見てほしいからといろ
flipsnap.jsというのを書いた - Webtech Walker
最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記（2012/02/04）：クロスブラウザに対応しました。
[JS]ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示するスクリプト -ScrollUpBar | コリス
デモ：offsetTop このデモでは、ブラックの「Top Bar」だけがスクロールで表示されます。 ScrollUpBarの使い方 実装は非常に簡単で、既存のページでも簡単に加えることができると思います。 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="scroll-up-bar.min.js"></script> </body> Step 2: HTML スクロールで表示・非表示させるバーは、静的に配置させる箇所に記述し、「position: absolute;」を加えます。 <div id="topbar" styl
[CSS]背景を固定させ、カーテンをあげるようにコンテンツを次々にスクロールで表示させるテクニック
ブラウザの高さいっぱいに表示した写真画像とベタ塗り背景のコンテンツを交互に配置した縦長ページをスクロールした際、写真画像の背景を固定表示させ、カーテンをあげるようなスクロールエフェクトを実装するスタイルシートのテクニックを紹介します。 スクリプト無しなのでスクロールのもっさり感がなく、非常にさくさく動作します。 Alternate Fixed & Scroll Backgrounds デモ 実装 ファイルのダウンロード デモ デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは9+でご覧ください。 エフェクトにスクリプトを使用していないので、スクロールも快適です！ 少しスクロールしたところ 写真画像の背景は固定表示で、コンテンツとベタ塗りだけがスクロールします。 実装 HTML HTMLはシンプルで、main要素をラッパーに、div要素で写真画像と
スクロールに応じて動くアニメーションをつくる方法 | Stronghold Archive
どうもこんばんは！ 今日のネタは…「スクロールに応じて動作するアニメーション」です。 そういったサイトも増え（むしろもう減った？） 目にする機会も増えたかと思います。 基本はこんなパラパラアニメを用意し スクロールによって画像の位置を変更する or 位置によって表示する画像を差し替える を実施するだけです。 パラパラアニメを用意するのが若干手間ですが それさえクリアできればけっこう簡単です。 …前置きはこれぐらいでデモとコード DEMO コード <script type="text/javascript"> $(document).ready(function(){ //#MovieContents内スクロール初期化 $(‘#MovieContents’).scrollTop(0,0); //#MovieContentsをスクロールでfunction実行 $(‘#MovieContents
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
スクロールしたらヘッダーの一部だけ固定する - Qiita
