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

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

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

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の新機能がすごく便利！ 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 ... 続きを読む

JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

2019/09/02 197 users Intersection Observer Inter

ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではInter... 続きを読む

若者はリンクもスクロールも嫌――記事の体裁が新鮮すぎる「BuzzFeed Kawaii」に聞く、ミレニアル世代のネットメディアへの接し方 - INTERNET Watch

2019/04/09 836 users 体裁 BuzzFeed Kawaii ミレニアル世代 若者

続きを読む

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス

2018/09/27 343 users コリス ビューポート エフェクト CSS Apple

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えること... 続きを読む

CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方 | コリス

2018/09/14 173 users コリス CSS スナップ 縦長ページ 位置

CSSのscroll-snapプロパティを使用すると、縦長ページなどでスクロールをしてコンテンツの中途半端な位置で終了しても、ちょうどよい位置にぴたっとスナップさせることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。 scroll-snapプロパティの基礎知識と便利な使い方を紹介します。 P... 続きを読む

私たちの想像以上に、高齢者は文字が流れるYouTube怪文書動画を見ている - Togetter

2018/09/12 238 users ホムペ Togetter mobileprince_PR

@mobileprince_PR 芸能系とかもですが、文字の流れが遅すぎないからスクロールの下手な世代にはホムペ見るより楽なんじゃないかと 続きを読む

これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js | コリス

2018/09/12 210 users コリス スクロールアニメーション アニメーション 2KB 実装

スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.j... 続きを読む

実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters | コリス

2018/06/22 175 users React コリス スクリプト CSSアニメーション 実装

コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJ... 続きを読む

たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方 - WPJ

2018/04/20 101 users WPJ sticky position 草案 CSS

短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できる position: sticky が便利で面白い使い方ができそうなので実験してみました。 仕様がまだ草案（Working Draft）の段階 で、将来、細かい部分に変更がないとは言い切れません... 続きを読む

ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com

2017/06/15 260 users CSS 受託案件 レスポンシブ対応 テーブル ユーザー

2017.06.15 | ユーザーにスクロールを予測させるCSSの書き方について 受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザー... 続きを読む

デザインのアイデアが豊富！最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ | コリス

2017/03/13 221 users 空白スペース マテリアルデザイン 前提 テクニック テキスト

最近のWebデザインは、フラットデザインやマテリアルデザインが少しずつ進化し、コンテンツにフォーカスされたシンプルなデザインが定着してきました。写真は大きく、テキストは読みやすく、空白スペースは大胆に配置されています。 レイアウトは縦長型や分割型、カード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインをよく見かけます。 最近のWebデザインで使われているさまざまなテクニック... 続きを読む

レスポンシブ対応！縦に半分割しているWebサイトの作り方 | Webクリエイターボックス

2017/01/17 150 users レスポンシブ対応 Webクリエイターボックス 真っ二つ 実例

画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 縦に半分割しているWebサイトを作ってみよう！ ... 続きを読む