タグ スクロール
人気順 5 users 10 users 100 users 500 users 1000 usersWeb制作者の念願がついに叶った! height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法
今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto... 続きを読む
CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce
スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる... 続きを読む
CSSでスムーズなアニメーションを実現する4つの新しい機能
今年もCSSの進化が止まりません! 先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今まではJavaScriptや複雑なCSSを使用しないと実装できなかった、スムーズなアニメーションを実現するCSSの4つの新しい機能... 続きを読む
CSSでの実装が今までとは大きく変わる! スクロールをトリガーにしたアニメーションを実装する方法
まもなくリリースされるChrome 115で実装されるScroll-driven animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかり... 続きを読む
svh・dvhがついに全ブラウザ対応へ。iOSの画面の高さいっぱいに要素を広げたいときの最適解
iOS Safariの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。 本日リリースさ... 続きを読む
VS Codeの新機能「スティッキー スクロール」がさらに便利に! 追従行数の変更、関数やクラスをリスト化できます
先日アップデートされた、VS Code v1.71で「スティッキー スクロール」がさらに便利になったので紹介します。 「スティッキー スクロール」はv1.70で実験的な機能として実装されましたが、v1.71で正式に実装さ...記事の続きを読む 続きを読む
VS Codeの新機能がすごく便利! JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 ... 続きを読む
body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能 - Qiita
この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方について サイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは? ターゲット要素(モーダル/ライトボックス/フライアウト/ナビメニューなど)のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです 対象ブラ... 続きを読む
端末の文字幅問題の傾向と対策 | IIJ Engineers Blog
電子メール、ネットワーク機器集中管理、異常検知、分散処理、クラウド基盤などのシステム開発に従事。古代Rubyist。 CLI や TUI なアプリケーションを使っていると、端末の画面が崩れてしまうことがよくあります。 たとえば、こんな TUI が、 環境によってはこんな感じで崩れます。 スクロールなどをしながらしばらく使... 続きを読む
😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います?最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームと作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページ... 続きを読む
CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック
スクロールの連鎖(スクロールチェーン)とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合... 続きを読む
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる | コリス
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using ... 続きを読む
トレンドウェブサイトから学べ! JavaScriptで作る本格スクロール演出 - ICS MEDIA
「かっこいいウェブサイト」とはどのようなものでしょう? ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワ... 続きを読む
13kg痩せた世界 - それは恋とか愛とかの類ではなくて
2020年、13kg痩せた。その話を2020年中に書こうと思っていたが、ブログを書くことが習慣から外れてしまった昨今、パソコンを立ち上げることすら億劫で、久しぶりに立ち上げたパソコンは何かの更新にとても時間がかかっており、マウスはスクロールがバグって言うことを聞かず、ようやくようやくブログの記事を作成する画... 続きを読む
「スクショはメモ代わり」「リンクもスクロールも面倒くさい」若者のスクショ文化の理由と実態(高橋暁子) - 個人 - Yahoo!ニュース
最近、20代のアシスタントが参考資料をスクショで送ってきて困るというツイートが話題となった。若者はスクショ、つまりスクリーンショットを好んで使用するという話は定期的に話題になる。改めて、実態と理由について見ていきたい。 何でも「スクショ」する若者たち若者世代は何でもスクショする。ある女子高生は、友人... 続きを読む
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版) - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか? かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJav... 続きを読む
Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo | コリス
/* 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 ... 続きを読む
JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA
ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではInter... 続きを読む
パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll | コリス
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll ... 続きを読む
トラックパッド捨ててこれにする? キーの上でタップやスクロールができるハイブリッドなキーボードが誕生 | ギズモード・ジャパン
トラックパッド捨ててこれにする? キーの上でタップやスクロールができるハイブリッドなキーボードが誕生2019.07.19 11:30 岡本玄介 Image: The Awesomer キーボード全部がタッチパッドになった! もしもタッチパッドでタイピングが出来たら? 逆にもしもキーボードでタッチ操作が出来たら? どんなに便利なことでしょ... 続きを読む
100年以上に渡り継承されているフォント「秀英体」を知っているか :: デイリーポータルZ
今回の舞台は秀英体の開発を行っているDNPだ。編集部からはフォントに関しては初心者という橋田さんと、動画編集作業でフォントはいじるものの、「スクロールから適当に選んでいます」という藤原さんが同行してくれた。 我々を出迎えて下さったのは、DNPで秀英体開発グループに所属する宮田さん(左)とリーダーの伊藤さ... 続きを読む
[JS]スクロール・マウスの位置や速度など、ビューポートの状態を簡単に取得できるJavaScriptライブラリ -Tornis | コリス
スクロールの速度に合わせたアニメーション、スクロールの位置に合わせたパララックス、マウスの位置・速度に合わせたパララックス、ビューポートのサイズに合わせたレイアウト変更などを実装するために、ビューポートを監視し、その状態を簡単に取得できる軽量JavaScriptライブラリを紹介します。 位置を取得できるのは... 続きを読む
若者はリンクもスクロールも嫌――記事の体裁が新鮮すぎる「BuzzFeed Kawaii」に聞く、ミレニアル世代のネットメディアへの接し方 - INTERNET Watch
[CSS]実装がこれなら思っていたより簡単!グラデーションが変化する美しいエフェクトを実装するスタイルシート | コリス
最近ではグラデーションの使い方がいろいろ進化しています。中でも、ホバーやスクロールに合わせて、グラーデションが変化するエフェクトは非常に美しく、一度は試してみたい実装だと思います。 ホバーすると、マウスの動きに追従してグラデーションが変化するボタンを実装するスタイルシートのテクニックを紹介します。... 続きを読む
ページ内リンクの実装から考える、<a>要素のclickイベントとその振る舞い - シフトブレイン/スタンダードデザインユニット
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-beh... 続きを読む