タグ「スクロール」

タグスクロール

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

(1 - 25 / 156件)

Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

2023/12/07 176 users トランジション auto height トリガー CSS

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。今回紹介するのは、height: 0;からheight: auto... 続きを読む

CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce

2023/10/17 65 users ビジターアニメーション上下要素 CSS

スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる... 続きを読む

CSSでスムーズなアニメーションを実現する4つの新しい機能

2023/08/31 74 users CSS アニメーション displayプロパティトリガー

今年もCSSの進化が止まりません！先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。今まではJavaScriptや複雑なCSSを使用しないと実装できなかった、スムーズなアニメーションを実現するCSSの4つの新しい機能... 続きを読む

CSSでの実装が今までとは大きく変わる！スクロールをトリガーにしたアニメーションを実装する方法

2023/07/13 132 users トリガー CSS アニメーション実装パララックス

まもなくリリースされるChrome 115で実装されるScroll-driven animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかり... 続きを読む

svh・dvhがついに全ブラウザ対応へ。iOSの画面の高さいっぱいに要素を広げたいときの最適解

2022/11/29 101 users CSS 100vh iOS Safari iOS 苦労

iOS Safariの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。本日リリースさ... 続きを読む

VS Codeの新機能「スティッキースクロール」がさらに便利に！追従行数の変更、関数やクラスをリスト化できます

2022/09/12 91 users スティッキー関数 VS Code クラスリスト化

先日アップデートされた、VS Code v1.71で「スティッキースクロール」がさらに便利になったので紹介します。「スティッキースクロール」はv1.70で実験的な機能として実装されましたが、v1.71で正式に実装さ...記事の続きを読む続きを読む

VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキースクロール」

2022/08/08 248 users スティッキーエディタ CSS 関数上部

8/5にアップデートされた、VS Code v1.70で「スティッキースクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキースクロール」 ... 続きを読む

body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能 - Qiita

2022/04/25 208 users Qiita GitHubリポジトリブラウザプラグイン

この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方についてサイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです対象ブラ... 続きを読む

端末の文字幅問題の傾向と対策 | IIJ Engineers Blog

2022/02/15 249 users 端末 IIJ Engineers Blog 傾向対策 TUi

電子メール、ネットワーク機器集中管理、異常検知、分散処理、クラウド基盤などのシステム開発に従事。古代Rubyist。 CLI や TUI なアプリケーションを使っていると、端末の画面が崩れてしまうことがよくあります。たとえば、こんな TUI が、環境によってはこんな感じで崩れます。スクロールなどをしながらしばらく使... 続きを読む

😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita

2021/12/12 303 users フワオシャレ Qiita 皆さん Webページ

おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？最近多いですよね、あれ。確かにオシャレだし楽しいしゲームと作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページ... 続きを読む

CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック

2021/11/11 144 users モーダル終点連鎖 CSS ナビゲーション

スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合... 続きを読む

スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる | コリス

2021/07/13 168 users コリスビューポートアニメーションライブラリ要素

スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using ... 続きを読む

トレンドウェブサイトから学べ！　JavaScriptで作る本格スクロール演出 - ICS MEDIA

2021/04/26 255 users ICS MEDIA JavaScript ワクワみなさん

「かっこいいウェブサイト」とはどのようなものでしょう？　ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワ... 続きを読む

13kg痩せた世界 - それは恋とか愛とかの類ではなくて

2021/01/03 271 users 13kg 世界パクマウス昨今

2020年、13kg痩せた。その話を2020年中に書こうと思っていたが、ブログを書くことが習慣から外れてしまった昨今、パソコンを立ち上げることすら億劫で、久しぶりに立ち上げたパソコンは何かの更新にとても時間がかかっており、マウスはスクロールがバグって言うことを聞かず、ようやくようやくブログの記事を作成する画... 続きを読む

「スクショはメモ代わり」「リンクもスクロールも面倒くさい」若者のスクショ文化の理由と実態(高橋暁子) - 個人 - Yahoo!ニュース

2020/07/09 349 users スクショ高橋暁子アシスタントスクリーンショット実態

最近、20代のアシスタントが参考資料をスクショで送ってきて困るというツイートが話題となった。若者はスクショ、つまりスクリーンショットを好んで使用するという話は定期的に話題になる。改めて、実態と理由について見ていきたい。何でも「スクショ」する若者たち若者世代は何でもスクショする。ある女子高生は、友人... 続きを読む

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA

2019/12/11 220 users ライブラリ ICS MEDIA Jav GPLライセンス一方

スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？　かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。その一方、CSSとJav... 続きを読む

Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo | コリス

2019/11/15 153 users コリスエフェクトスクリプト Apple undefined

/* Scrolleo - make your video scroll with inertia * MIT License - by Mark Teater */ (function(window, document, undefined) { "use strict"; var _Scrolleo = function(opts) { // Defaults this.acceleration = 0.08; //1 is fastest, 0 is slowest, 0.08 is default this.secondsPerScreen = null; //Set this ... 続きを読む

(1 - 25 / 156件)

次の25件 »