タグ スクロール時
人気順 5 users 50 users 100 users 500 users 1000 usersこれなら実装がすごく簡単!スクロール時にDOM要素をアニメーションで表示する超軽量のJavaScript -Animon | コリス
Webページがロードされた時やスクロールされた時など、ブラウザのビューポートに表示された時に指定したDOM要素にさまざまなアニメーションを個別に設定できる超軽量のJavaScriptライブラリを紹介します。 HTMLにclassとdata属性を加えるだけで、ランディングページでよく見かけるスクロールすると見出しやテキストや画... 続きを読む
[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法 | コリス
CSSのposition: sticky;を使用して、スティッキーヒーローセクションを実装する方法について紹介します。 スティッキーヒーローセクションとは、画像などをスクロールした際に固定し、その固定された画像の上にスクロールさせるコンテンツ要素です。固定された画像はズームさせたり、オーバーレイにすることもできます。... 続きを読む
便利なのが登場!スマホにもスクロール時に滑らかなアニメーションを適用できる超軽量スクリプト -lax.js | コリス
デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。 他のスクリプトへの依存は無く、ReactやVue.jsもサポートされています。 lax.js -GitHub lax.jsの特徴 lax.jsのデモ lax.jsの使い方 lax.jsの特徴 lax.jsはVanilla ... 続きを読む
スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」 | Rriver
シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「 ScrollReveal 」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB(minified /... 続きを読む
今までにない快適動作!サイドバーを⬆⬇スクロールに合わせてぴたっとくっつけるスクリプト -Sticky Sidebar | コリス
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンク... 続きを読む
[JS]ページ内アンカーでスクロール時のアニメーションの種類やスピードが調整できる超軽量ライブラリ -MoveTo | コリス
ページ内アンカーに移動させる時に、アニメーションでスムーズにスクロールさせるスクリプトをいろいろありますが、実装が簡単で、微調整も簡単に設定できる超軽量(2kb)のスクリプトを紹介します。 等速のアニメーション、緩和のア ...記事の続きを読む 続きを読む
スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10 | NxWorld
見かけることもかなり多い(多くなった)スクロールしていくと途中から要素が表示されたり、一定の範囲内のみで要素が固定配置されるといった動きを実装できるスクリプトまとめです。中にはスクロールアップ時には〇〇して、スクロールダウン時には△△するというように、スクロールした方向によって動きを変更したり、特定の箇所まで行った時に関数を実行するというような動きを実装できるものもあります。 紹介している中で特に... 続きを読む
スクロールイン時のボックス要素の表示アニメーションを設定できる「Box Loader」:phpspot開発日誌
Box Loader スクロールイン時のボックス要素の表示アニメーションを設定できる「Box Loader」 最近流行りのスクロール時のアニ... 続きを読む
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ | コリス
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカ... 続きを読む
[JS]これスゴイよ!スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic | コリス
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロール... 続きを読む
[JS]縦長1ページのスクロール時にさまざまなインタラクションを加えるスクリプト -ScrollStory | コリス
ティザーサイトやプロダクトページ、ポートフォリオ、企業サイトなどにも多く採用されているスクロールを前提とした縦長のページにさまざまなインタラクションを加えることができるjQueryのプラグインを紹介します。 Scroll Storyの名の通り、スクロールするごとにさまざまなストーリーを与えることができます。 ScrollStory -GitHub ScrollStoryの特長 ScrollStor... 続きを読む
[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js | コリス
スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざまなアニメーションで表示させることができる単体のスクリプトを紹介します。 scrollReveal.js scrollReveal.js -GitHub scrollReveal.jsのデモ scrol... 続きを読む
Facebook iOSアプリのようにスクロール時にフルスクリーン表示を行うiOSライブラリを作りました - ninjinkun's diary
2014-01-04 Facebook iOSアプリのようにスクロール時にフルスクリーン表示を行うiOSライブラリを作りました 明けましておめでとうございます。神トラ2クリアしました。 Facebook iOS Appのように、一覧をスクロールした際にUINavigationBarやUIToolbarを隠してフルスクリーン表示をするためのライブラリを作りました。 https://github.co... 続きを読む
スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic
スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなったパララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。 そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3... 続きを読む
スクロール時に表示位置を固定するjQueryプラグイン『FixedScroll』を作成しました - ネモウスドットコム
2012-12-06 スクロール時に表示位置を固定するjQueryプラグイン『FixedScroll』を作成しました Web制作 jQuery 今さら感は否めないですが、スクロール時に表示位置を固定するjQueryプラグインを作成しました。 Webサイト制作時にこの機能が必要だったのですが、既存のプラグインだと細かい点でうまく行かなかったので(&JavaScriptのリハビリも兼ねて)。 nemo... 続きを読む
[JS]ページのスクロール時、天地に紙を折り曲げるエフェクトを加えるスクリプト -FoldScroll | コリス
Archive by month 2012年9月 (23) 2012年8月 (59) 2012年7月 (65) 2012年6月 (57) 2012年5月 (37) 2012年4月 (40) 2012年3月 (39) 2012年2月 (41) 2012年1月 (32) 2011年12月 (37) 2011年11月 (40) 2011年10月 (45) 2011年9月 (52) 2011年8月 (46... 続きを読む
[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama | コリス
パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワ [...] 続きを読む
最新の国内のパララックス効果を使用したサイトをまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
Flashを使わずにJavascriptやCSS3ののアニメーションを使って、スクロール時に奥行きがある視覚効果を生み出す「パララックス効果」。 最近では国内の企業サイトなどでも使われているのを数多く目にするようになってきました。 今回はそんなパララックス効果(parallax)を使用した最新の国内サイトをまとめてみました。 中にもパララックスじゃなくてスクロールするサイトじゃないか?と思われるか... 続きを読む
[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ | コリス
パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。 scrollorama スクロールに合わせて、 [...] 続きを読む
最近話題のパララックス効果を利用したアニメーションとデザインのキレイな国内・海外サイトまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
パララックス効果とは・・ スクロール時に平面で重なり合う画像を異なる速さで上下や左右に動かすことで奥行きがあるように見せる視差効果を「パララックス効果」と呼びます。css3やjavascriptで実装されているものが多く、このパララックス効果をうまく取り入れることでちょっとユニークなアニメーションを表現できます。このパララックス効果を上手く利用したWEBサイトを国内・海外ともにまとめて紹介します。... 続きを読む