タグ「スクロール時」

タグスクロール時

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

(1 - 23 / 23件)

これなら実装がすごく簡単！スクロール時にDOM要素をアニメーションで表示する超軽量のJavaScript -Animon | コリス

2021/06/09 21 users コリスビューポート DOM要素アニメーション実装

Webページがロードされた時やスクロールされた時など、ブラウザのビューポートに表示された時に指定したDOM要素にさまざまなアニメーションを個別に設定できる超軽量のJavaScriptライブラリを紹介します。 HTMLにclassとdata属性を加えるだけで、ランディングページでよく見かけるスクロールすると見出しやテキストや画... 続きを読む

CSSのみでスクロール時に各セクションを固定するパララックス | かちびと.net

2019/12/15 5 users パララックス result sticky position

Result タイトルでうまく説明できませんでしたけどこういうやつですパララックスの表現法が出始めた時によく見かけるようになってから今も割と見かけるのである程度定着してる感も無くはないですねで、これなんですがそう言えばposition: sticky;で出来ますよね、という内容です css .container {/*高さを画面一杯にし... 続きを読む

[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 ... 続きを読む

スクロール時にパララックス効果を加えられる軽量スクリプト「ScrollReveal」 | TechMemo

2018/05/15 8 users jQuery TechMemo ScrollReveal

ScrollRevealは、要素が可視範囲に入った時に、アニメーションさせながら要素を表示させることができるスクリプトです。jQueryや他のCSSに依存せず、ScrollReveal単体で動作します。また、サイズも軽量でわずか8.8KBしかありません。動きについては、以下デモサイトでご確認いただけます。デモページを見る今回は、このScrollRevealを使ってパララックス効果を加える方法... 続きを読む

スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」 | Rriver

2018/03/14 28 users Rriver ScrollReveal JSライブラリ邪魔

シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「 ScrollReveal 」というやつです。無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB（minified /... 続きを読む

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

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

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

[JS]ページ内アンカーでスクロール時のアニメーションの種類やスピードが調整できる超軽量ライブラリ -MoveTo | コリス

2017/03/23 49 users 緩和スクリプト実装 2KB 微調整

ページ内アンカーに移動させる時に、アニメーションでスムーズにスクロールさせるスクリプトをいろいろありますが、実装が簡単で、微調整も簡単に設定できる超軽量（2kb）のスクリプトを紹介します。等速のアニメーション、緩和のア ...記事の続きを読む続きを読む

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

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

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

スクロールイン時のボックス要素の表示アニメーションを設定できる「Box Loader」:phpspot開発日誌

2015/05/12 22 users アニ phpspot開発日誌ボックス要素

Box Loader スクロールイン時のボックス要素の表示アニメーションを設定できる「Box Loader」最近流行りのスクロール時のアニ... 続きを読む

[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... 続きを読む

Android版「Flipboard」がAndroid 4.2のスクリーンセーバーに対応 | juggly.cn

2013/01/12 8 users スクリーンセーバー Flipboard クレードルパク表紙

ソーシャルマガジンリーダー「Flipboard」のAndroidがv1.9.19にアップデートされました。今回のアップデートの変更内容は、UIをスクロール時にめくってしまうバグの解消を含む改善のほか、Android 4.2以降に標準搭載されているスクリーンセーバー（Daydream）に対応しました。スクリーンセーバーに対応したことで、端末をクレードルに乗せたときなどにFlipboardの表紙が... 続きを読む

スクロール時に表示位置を固定するjQueryプラグイン『FixedScroll』を作成しました - ネモウスドットコム

2012/12/06 35 users ネモウスドットコム nemo jQueryプラグイン既存

2012-12-06 スクロール時に表示位置を固定するjQueryプラグイン『FixedScroll』を作成しました Web制作 jQuery 今さら感は否めないですが、スクロール時に表示位置を固定するjQueryプラグインを作成しました。 Webサイト制作時にこの機能が必要だったのですが、既存のプラグインだと細かい点でうまく行かなかったので（&JavaScriptのリハビリも兼ねて）。 nemo... 続きを読む

[JS]ページのスクロール時、天地に紙を折り曲げるエフェクトを加えるスクリプト -FoldScroll | コリス

2012/09/12 48 users コリスエフェクトスクリプト天地ページ

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 | コリス

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 - 23 / 23件)