約3万円台半ばでペン付きのAndroidタブレット「Lenovo Tab M11」を試す　コンテンツ消費には十分なスペック

2024/05/28 12 users スペック Androidタブレット ペン付き コンテンツ消費

スペックをサクッとチェック！ Lenovo Tab M11は、1920×1200ピクセルの10.95型IPS液晶ディスプレイを搭載している。リフレッシュレートは最大90Hzで、Webブラウザでのスクロールなどを滑らかに行える。グレア（光沢）加工がされており、反射はやや強めだ。パネルの反射が気になるという人は、サードパーティー製のノング... 続きを読む

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回だけ実行し、アニメーションの終了フレームに留まらせる... 続きを読む

ホイールを全力で回せ！ 東海道五十三次をスクロールで巡る「東海道中スクロール栗毛」【やじうまWatch】

2023/10/11 12 users やじうまWatch ホイール 全力 東海道五十三次

続きを読む

知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法

2023/10/03 19 users CSS Scroll-driven animations

CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: De... 続きを読む

スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger

2023/09/26 15 users 挙動 デベロッパーツール アニメーション デバッグ ブラウザ

スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？ ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。 スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単に... 続きを読む

これでSafariにも実装できる！ スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill

2023/09/05 13 users ポリフィル トリガー Safari アニメーション CSS

先日の記事で、CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法を紹介しました。Chrome 115から実装された新機能ですが、ネックはSafariのサポートだと思います。 Scroll-driven Animationsの仕様で定義されているScrollTimelineとViewTimelineのポリフ... 続きを読む

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

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

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

滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（前編） - ICS MEDIA

2023/08/04 15 users JSライブラリ ICS MEDIA 前編 挙動 余韻

ウェブサイトをスクロールした時に、他のサイトよりも滑らかに余韻が残るような動きを目にしたことはないでしょうか？　このスクロールの挙動は慣性スクロールと呼ばれ、ウェブサイトを演出する手法のひとつです。 スクロール操作を止めた後に少し余韻が残りながらスクロールが継続することで、コンテンツをスムーズに閲... 続きを読む

iOS のラバーバンドスクロールを Web で実装する方法 - katashin.info

2023/07/31 11 users iOS iPhone バウンススクロール web 挙動

普段 iPhone を使っている人でスクロールが端に到達した時に、少しだけ端を越えていき、その後跳ね返ってくる挙動を意識したことがある人はどれだけいるでしょうか？その挙動をどう実装するか考えたことはありますか？ この iOS の挙動をラバーバンドスクロールやバウンススクロール、バウンスバックなどと呼びますが、... 続きを読む

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

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

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

無料＆オープンソースのMac向けのマウスとトラックパッドユーティリティ「LinearMouse」

2023/07/02 11 users マウス Mac向け 無料＆オープンソース macOS向け 方向

WindowsとMacはどちらも主要な入力装置としてマウスを使用しますが、普段Windowsを使っている人がMacを使うと、その操作感があまりに違うことに面食らってしまうことがよくあります。オープンソースで開発されている「LinearMouse」はmacOS向けのマウスユーティリティで、スクロールの方向やカーソル速度などを自由に設... 続きを読む

PC/MacからAndroid端末を操作できるツール「scrcpy」が「Android 13」に対応／高精度タッチパッドもサポート、従来よりも滑らかにスクロール

2022/12/25 12 users scrcpy Mac Android端末 従来 ツール

続きを読む

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

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

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

ブラウザなどのツール操作を簡単に自動化できるAI「ACT-1」が登場

2022/09/15 15 users ツール操作 ブラウザ 登場 Transformerモデル 操作

AIスタートアップのAdeptが、デジタルツールを使用するように訓練された大規模なTransformerモデル「ACT-1」を発表しました。ACT-1はブラウザで何が起こっているかを監視し、クリック・入力・スクロールなどの特定アクションを実行できるChrome拡張機能に接続されており、操作を自動化できます。 ACT-1: Transformer for... 続きを読む

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の新機能「スティッキー スクロール」 ... 続きを読む

CSSアニメーションの実装もこれで簡単！ さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween

2022/06/21 16 users fff プロパティ スクリプト CSSアニメーション CSS

Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。 実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。 スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表... 続きを読む

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

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

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

最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js

2022/04/06 23 users ライブラリ マウス スワイプ操作 Apple プロダクト

マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作し... 続きを読む

端末の文字幅問題の傾向と対策 | 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。でも情報が欲しくてアクセスしてるページ... 続きを読む

HTMLのdialog要素とフォーム機能 - Hatena Developer Blog

2021/12/01 12 users dialog要素 モーダルダイアログ HTML 自前 CSS

こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決して... 続きを読む

JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する

2021/11/11 17 users Intersection Observer スペック

2021年11月11日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 ... 続きを読む

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

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

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