ページ遷移時のページ内リンクのスムーススクロール - Qiita
2021.05.29 修正 codepenのサンプル内からのリンクを別タブで開くと警告されるようになったので、 別でサンプルHTMLを準備しました よく出回ってるhoge.html?id=sec01など、URLのクエリパラメータでIDを指定するようなURLでページ内アンカーをさせるやり方はアクセシビリティ、マシンリーダブルの面では疑問です。 JavaScriptをOFFにされてもきちんと動作し、またGoogleなどのbotにも適切な箇所にリンク先を指定できるページ内アンカー(#id)で指定する方が好ましいと個人的に考えてます。 ✕悪い例 <a href="hoge.html?id=sec01"> ◎良い例 <a href="hoge.html#sec01"> なので素直にハッシュ(#)でID指定してページが自動スクロールするJavaScriptをjQueryで書きました。 Sample h
Waypoints
Waypoints is the easiest way to trigger a function when you scroll to an element. var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function(direction) { console.log('Scrolled to waypoint!') } }) Builds are available for multiple DOM libraries. jQuery 1.8+ Zepto 1.1+ No Framework IE 9+ npm install waypoints or bower install waypoints or GitHub Download Get Help
AOS - Animate on scroll library
<div data-aos="fade-up" data-aos-duration="3000"> </div> <div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> </div>
Parallax-Scroll by Aen
Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if their background-attachment property is between scroll and fixed, similar to the parallax scrolling effect you see on Spotify and is loosely based on Peder Andreas Nielsen’s Parallax ImageScroll. It makes clever use of background-position and background-size properties instead of CSS3 tranforms. It runs
スクロールに応じてパララックス効果を表現できるスクリプト・jarallax
スクロールに応じて視差効果 を表現できるスクリプト・ jarallaxのご紹介。jQueryを 必要とするみたいです。よく 見かけるやつですが、デモが 良かったので備忘録的に。 jQuery依存のパララックスエフェクト実装スクリプトです。時間無いので紹介だけとさせて頂きます。 よくあるパララックス実装スクリプト。デモ作る暇が無かったので公式のをご覧下さい。 Sample フェードエフェクトがうまく使われてます。 アニメーションの定義をcloneAnimationでクローン化出来る様にしたそうです。 var jarallax = new Jarallax(); var animation = jarallax.addAnimation('#foo',[{progress:'0', opacity:'0', top:'100%'}, {progress:'10', opacity:'1', t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
