トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
スクロール追従するページ内ナビゲーション
Result 少しのVanillaなJSで作るページ内スクロールと追従するナビゲーション。よくドキュメントページとかナレッジ共有系のWebサイトで見かけますね。 今更感なネタですが、ボーっとCodePenの2020年ベストPenみたいな記事を眺めてたら見かけたので割と需要あるネタですしメモ的にと思って書いてます。 javascriptwindow.addEventListener('DOMContentLoaded', () => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const id = entry.target.getAttribute('id'); if (entry.intersectionRatio > 0) { document.querySelec
最新のユーザーエージェント対応はどうするべきか？ - ICS MEDIA
ユーザーエージェント文字列は、ユーザー分析やデバイス・ブラウザーで処理を分けたい時に広く用いられています。取得方法は昔からあまり変わっておらず、ウェブブラウザーの種類・バージョン・プラットフォームごとに固有の文字列を取得しています。 実は、この文字列が近い将来固定化され、正常に情報を取得できなくなってしまうことをご存知でしょうか？ 今回はユーザーエージェント文字列の変遷を追いながら、現在策定されている新しいユーザーエージェント仕様である「User-Agent Client Hints」の概要を紹介します。 User-Agent Client Hintsの使い方、ユーザーエージェント文字列が固定化された時の対応についてもまとめています。 旧来のユーザーエージェント判別方法 従来のユーザーエージェント文字列取得は、navigatorオブジェクトのuserAgentプロパティを参照する方法です。
20+ CSS Fixed Backgrounds
Are you searching for a way to create a visually striking and immersive website design? Look no further! We are thrilled to present our latest update, featuring a meticulously curated collection of HTML and CSS fixed background code examples. With our January 2023 update, we have scoured reputable sources like CodePen, GitHub, and other reliable platforms to bring you an extensive selection of fix
high-performance-sticky-sidebar.html
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。 サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。 特定の状況下でフックするために、イベントトリガーを用意。 コンテナが長くても短くてもサイドバーを扱うことができます。 他のスクリプトへの依存はなく動作。 jQueryやZeptoのプラグインとして利用することも可能。 実装はスーバー簡単！ Sticky Sidebarのデ
[JS]コンテンツの見出しを目次にし、スクロールしてもサイドバーに固定表示されるナビゲーション -Progress Nav
コンテンツの見出しを目次代わりにし、スクロールしてもサイドバーに固定表示されるナビゲーションを実装するJavaScriptのライブラリを紹介します。 ページのスクロールに合わせて、ナビゲーションの現在位置はアニメーションで移動します。
![[JS]コンテンツの見出しを目次にし、スクロールしてもサイドバーに固定表示されるナビゲーション -Progress Nav](https://cdn-ak-scissors.b.st-hatena.com/image/square/1363512ba0c47a1ad5ef8a9de39578e811b41510/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017020802.png)
[JS]スマフォで各セクションのヘッダをそれぞれスクロールに追従させるスクリプト
iPhone, iPad, ガラケーなどのスマフォで、各セクションのヘッダをそれぞれ半透明の状態でスクロールに追従させるスクリプトを紹介します。 A, B, C と追従中 対応ブラウザ iPhone 4GS (iOS5) iPhone 4G (iOS5) iPhone 3GS (iOS5) iPad 3 (iOS5) iPad 2 (iOS5) Galaxy S3 (Ice Cream Sandwich) Galaxy S2 (Gingerbread) NEXUS S (Jelly Bean) 実装 Step 1: 外部ファイル 外部ファイルは下記の2つのスクリプトと当スクリプト・スタイルシートをhead内に記述します。 zepto.js jQueryと互換性のあるモバイル用軽量ライブラリ iscroll.js モバイルでposition:fixedを実現するスクリプト <script s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
