特定の位置までスクロールしたときにアニメーションさせる | パソコン倶楽部りんご
jQuery でスクロール位置を取得して、色々と仕掛けをしたい時の方法です。 scroll-switch-animation まずはリンク先と、そのソースを見てみてください。 解説 仕掛けをしたい要素に共通のクラス名「j-scroll-switch」をつけておく。 jQuery でスクロール位置と、要素の位置を比較して、要素が良い位置に来たところで「on」クラスを足す。 css で動かす場合は、transition か animation を使う。 jQuery で animate させたいなら、ごりごりとコードを書く。ループは setTimeout を再起的に呼ぶ jQuery でもアニメーションできますが、css で動かす方が簡単だと思います。 jQuery には状態（スクロール量）の監視と、クラス名のコントロールだけをさせて、アニメーションは css で実装する、という役割分担の考え
Tocify - Boostrap対応の目次生成ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました お。これはプロジェクトサイトのヘルプや説明ページに使えそうですね。 BootstrapをベースにWebサイトを構築するメリットとして、多彩なプラグイン/ウィジェットの存在があります。こんなこと実現できるかな、と思って調べてみれば大抵そういったソフトウェアが存在するのが強みです。 例えばメインコンテンツの左側に見出しを目次として並べたい、そう思ったならばTocifyを使ってみましょう。Bootstrap + jQueryで格好いい目次表示を行ってくれます。 使い方としてはまずスタイルシートとJavaScriptを読み込みます。 <link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> <link type="
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
