Webページにインタラクティブな視差効果のアニメーションを実装できる軽量のJavaScriptを紹介します。 スクロールすると要素が近づいてくるエフェクトは、Appleのランディングページなどでもよく見かけます。スクロールすると要素が押し出されるように近づくプッシュイン、スクロールすると要素に向かってカメラが近づくドリーインなどのエフェクトを簡単に実装できます。 PushIn.js PushIn.js -GitHub PushIn.jsの特徴 PushIn.jsのデモ PushIn.jsの使い方 PushIn.jsの特徴 PushIn.jsはJavaScriptとCSSを使用して、ユーザーがWebページをスクロールしたときに指定した要素のスケールを操作することにより、要素が移動するような錯覚を作り出します。ブラウザに組み込まれているrequestAnimationFrameを使用しており、
const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } }) としてもうまく動作しない。 console.log を入れて確認したところそもそも scrollBehavior 自体呼ばれていないようだった。 const scrollBehavior = (to, from, savedPosition) => { if (savedPosition) { return savedPosition; } else { return { x: 0, y: 0 } } }; const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, ro
A decorative website background effect where SVG shapes are morphing and transforming on scroll. Today we’d like to share a little background effect with you. The idea is to animate a decorative SVG shape on scroll. The shape is morphing into different forms depending on the section we are currently viewing. The animations are powered by Julian Garnier’s anime.js and the scroll detection is suppor
ページ内アンカーに移動させる時に、アニメーションでスムーズにスクロールさせるスクリプトをいろいろありますが、実装が簡単で、微調整も簡単に設定できる超軽量（2kb）のスクリプトを紹介します。 等速のアニメーション、緩和のアニメーション、到達地点の補正なども設定できます。
コンテンツの見出しを目次代わりにし、スクロールしてもサイドバーに固定表示されるナビゲーションを実装するJavaScriptのライブラリを紹介します。 ページのスクロールに合わせて、ナビゲーションの現在位置はアニメーションで移動します。
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
この1年、Webのパフォーマンスで変わったことは？──HTML5 Conference 2016 川田寛（ピクシブ株式会社） こんにちは、ふろしきです。HTML5 Conference 2016の当日は、38度近くの熱があり、発表時はろれつが回ってませんでした。しかし、伝えたいことは伝えられたと思っています。その内容とは… 「この1年でWebのパフォーマンスの技術にどんな動きがあったのか」 というダイジェスト。ここで話した3つのテーマについて、本記事でもご紹介。 1. レイアウト処理を減らす HTML5がバスワードするよりもずっと前から、CSSでアニメーションさせることはごくごくあたりまえ。JSが扱えないデザイナーであっても手軽にアニメーションできる良い世界になりました。しかしそこに、モバイルが出現したことで、JSだけで満足という人たちもCSSの機能を活用しなくてはいけなくなりました。 モ
ページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。 要素がビューポートに入った時、そして出る時にそれぞれアニメーションを適用できる他のスクリプトに依存なし、超軽量（1.9kb gzip）のスクリプトを紹介します。 すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。 in-view.js -GitHub in-view.jsのデモ in-view.jsの使い方 in-view.jsのデモ デモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。 アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。
アコーディオンやタブ、ダイアログ、オフ キャンバス、ページ内リンクなど、Webページでよく使用されるコンポーネントをアクセシブルに実装するコードを紹介します。 Frend 実装にあたり Frendのコンポーネントは最小限で、他のスクリプトやCSSの依存はありません。Web標準をプライオリティとして構築されています。 WAI-ARIAに基づき、ARIA属性とイベントバインディングを利用し、ディテールを提供しています。すべてのコンポーネントはキーボードでの操作も可能です。 コンテンツあるいはインタラクションは、それを利用するためのベースラインを保証し、CSSやJavaScriptで拡張している箇所は必ずしもすべてのブラウザで同じように機能しません。しかし、それを利用することに問題はありません。 アクセシブルに実装されたコンポーネント 各ページでは実際のデモとコード、解説が掲載されています。
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Before this new CSS I’m about to introduce existed, locking an element into the viewport on scroll required rigging up some JavaScript. As you may know, JavaScript has a well-earned reputation to be tricky when paired with scrolling behavior. The new CSS Scroll Snap Points spec promises to h
asvd/syncscroll GitHub 複数のスクロールバーを同時スクロールさせられるJS「syncscroll」 複数のスクロール領域があって一報をスクロールすると他の部分もスクロールする、というUIが実現できます。 ２つの領域を連動させたい場合なんかに使えそうです 関連エントリ スマホの傾きでページスクロール出来るようにする「Interdimensional」 流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集 アプリ等のスクリーンショットをスクロールアニメーションさせるjQueryプラグイン「Animated-Screenshots」 ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 スクロールバーをCSSベースの独自デザインで調整できるようにする「jQuery.scrollpanel」
jQuery Progress Tracker ページのスクロール位置を明示してくれる「jQuery Progress Tracker」 現在ページ内のどのセクションにいるか？分かりやすくしてくれる、最近よくあるプラグインの１つ。 関連エントリ リアルなページめくり効果をもったギャラリーが作れるjQueryプラグイン「Onebook3d」 ページ遷移を意識させないアニメーションによるページ切り替え効果実装 フルスクリーンのスクロールページを作れるjQueryプラグイン「Alton」 流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. We’ve taken an in-depth look at how SVG line drawing works before. It’s a clever trick where you use dashed lines for the stroke, but the gap in the dash is so long it covers the entire path. Then you can move it such that it covers the entire path again, which makes it
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. We recently launched Happy Apps. In co
Scrolling effects are increasingly popular these days. Scroll snapping is used widely for a better separation of the provided content (vertical full height pages) or, for example, to emulate galleries behavior. There are many popular plugins (fullPage.js, jQuery.panelSnap, jQuery Scrollify etc.) which provide such functionality. Can you imagine how easy would be creating such effects using CSS onl
索引 └ プラグイン目次 1章：小ネタ系 ├ イージングの追加 ├ 要素のセンタリング ├ クッキーの操作 ├ マウスホイール ├ スクロールバー(1) ├ スクロールバー(2) ├ スクロールバー(3) ├ スクロールバー(おまけ) └ アニメの一時停止/再開 2章：ショーケース系 ├ Nivo Slider(1) ├ Nivo Slider(2) ├ Nivo Slider(3) └ Nivo Sliderの改造 3章：カルーセル系 ├ carouFredSel(1) ├ carouFredSel(2) ├ carouFredSel(3) ├ carouFredSel(4) ├ carouFredSel(5) ├ スマホでカルーセル(1) ├ スマホでカルーセル(2) ├ カルーセルとnivo(1) ├ カルーセルとnivo(2) ├ カルーセルとnivo(3) └ カルーセルとniv
スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery） でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く