タグ「スクロール時」

タグスクロール時

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 14 / 14件)

[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法 | コリス

2019/05/21 52 users sticky コリス position CSS レイアウト

CSSのposition: sticky;を使用して、スティッキーヒーローセクションを実装する方法について紹介します。スティッキーヒーローセクションとは、画像などをスクロールした際に固定し、その固定された画像の上にスクロールさせるコンテンツ要素です。固定された画像はズームさせたり、オーバーレイにすることもできます。... 続きを読む

便利なのが登場！スマホにもスクロール時に滑らかなアニメーションを適用できる超軽量スクリプト -lax.js | コリス

2019/03/20 96 users コリス React vanilla スクリプトアニメーション

デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。他のスクリプトへの依存は無く、ReactやVue.jsもサポートされています。 lax.js -GitHub lax.jsの特徴 lax.jsのデモ lax.jsの使い方 lax.jsの特徴 lax.jsはVanilla ... 続きを読む

今までにない快適動作！サイドバーを⬆⬇スクロールに合わせてぴたっとくっつけるスクリプト -Sticky Sidebar | コリス

2017/10/16 99 users コリスビューポート jQuery スクロールスクリプト

サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。スクロール時のラグやジャンク... 続きを読む

スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10 | NxWorld

2015/09/06 66 users 関数特定箇所一定 NxWorld

見かけることもかなり多い（多くなった）スクロールしていくと途中から要素が表示されたり、一定の範囲内のみで要素が固定配置されるといった動きを実装できるスクリプトまとめです。中にはスクロールアップ時には〇〇して、スクロールダウン時には△△するというように、スクロールした方向によって動きを変更したり、特定の箇所まで行った時に関数を実行するというような動きを実装できるものもあります。紹介している中で特に... 続きを読む

[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ | コリス

2014/09/29 502 users コリス jQuery ヘッダスクリプトエフェクト

最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。デモでは、表示されているコンテンツに応じて、ロゴの背景色とカ... 続きを読む

[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic | コリス

2014/03/09 381 users コリスパララックス jQuery スクリプトエフェクト

スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロール... 続きを読む

[JS]縦長1ページのスクロール時にさまざまなインタラクションを加えるスクリプト -ScrollStory | コリス

2014/02/02 94 users ティザーサイトコリス jQuery インタラクション前提

ティザーサイトやプロダクトページ、ポートフォリオ、企業サイトなどにも多く採用されているスクロールを前提とした縦長のページにさまざまなインタラクションを加えることができるjQueryのプラグインを紹介します。 Scroll Storyの名の通り、スクロールするごとにさまざまなストーリーを与えることができます。 ScrollStory -GitHub ScrollStoryの特長 ScrollStor... 続きを読む

[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js | コリス

2014/01/26 228 users コリスビューポートスクリプトアニメーション Apple

スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざまなアニメーションで表示させることができる単体のスクリプトを紹介します。 scrollReveal.js scrollReveal.js -GitHub scrollReveal.jsのデモ scrol... 続きを読む

Facebook iOSアプリのようにスクロール時にフルスクリーン表示を行うiOSライブラリを作りました - ninjinkun's diary

2014/01/04 147 users UINavigationBar ライブラリ https 一覧

2014-01-04 Facebook iOSアプリのようにスクロール時にフルスクリーン表示を行うiOSライブラリを作りました明けましておめでとうございます。神トラ2クリアしました。 Facebook iOS Appのように、一覧をスクロールした際にUINavigationBarやUIToolbarを隠してフルスクリーン表示をするためのライブラリを作りました。 https://github.co... 続きを読む

スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic

2013/05/07 91 users パララックス FPS スクロール要素 CSS3

スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなったパララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3... 続きを読む

[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama | コリス

2012/05/27 172 users パララックスコリストゥイーンエフェクトスクリプト

パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワ [...] 続きを読む

[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ | コリス

2012/02/23 348 users jQuery コリスパララックススクロールバス

パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。 scrollorama スクロールに合わせて、 [...] 続きを読む

最近話題のパララックス効果を利用したアニメーションとデザインのキレイな国内・海外サイトまとめました | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2011/12/19 137 users パララックス効果平面上下奥行きアニメーション

パララックス効果とは・・スクロール時に平面で重なり合う画像を異なる速さで上下や左右に動かすことで奥行きがあるように見せる視差効果を「パララックス効果」と呼びます。css3やjavascriptで実装されているものが多く、このパララックス効果をうまく取り入れることでちょっとユニークなアニメーションを表現できます。このパララックス効果を上手く利用したWEBサイトを国内・海外ともにまとめて紹介します。... 続きを読む

(1 - 14 / 14件)