![Swiper - Most Modern Mobile Touch Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/bddaa775df114262e601ce7ba69c92e3e9d55b78/height=288;version=1;width=512/https%3A%2F%2Fswiperjs.com%2Fi%2Fshare-banner.png)
公開日 : 2017年12月21日 (2018年6月9日 更新) カテゴリー : アクセシビリティ / ユーザビリティ この記事は、Web Accessibility Advent Calendar 2017 の21日目の記事です。 12月16日に開催された「CSS Nite LP55 / Shift11 : Web デザイン行く年来る年」で、インフォアクシアの植木さんと一緒に「アクセシビリティ」セッションに登壇させていただきました。(フォローアップが公開されていますので、当日のスライドや動画をご覧いただくことができます。) 撮影 : サン・スタジオ 鍋坂樹伸様 「アクセシビリティ 改め インクルーシブデザイン?」というセッションタイトルで、欧米のウェブアクセシビリティコミュニティを中心に「インクルーシブデザイン (inclusive design)」というキーワードが広まりつつあること、
通常SVGのモーフィングアニメーションといえばCSSで動かすにしろ、jsで動かすにしろ、元のSVGの頂点の数を次のSVGの頂点の数に合わせなければ、スムーズなアニメーションにはならないです。 flubberは簡潔な記述で、その問題を解決し、スムーズなSVGモーフィングアニメーションを実行できます。 flubberのライセンスは、MIT LicenseなのでSVGモーフィングアニメーションを使いたい時は、こちらを使った方がお得そう。 flubberの使い方 flubber 上記Githubページからzipファイルをダウンロードするかnpm installする。 使用したいページに以下を記述(D3.jsを使うのが一番簡潔な書き方になりそうなので、同時にD3.jsも読み込む。topojsonは地図データを使いたい時に任意で読み込めばいい。) また、D3.jsだけでなく様々なライブラリとの互換性も
アニメーションは、もはやホームページを作る上で必須の要素と言えます。 単調な動きをする静的なページは、ユーザーの興味がなくなった瞬間に離脱率が劇的に高まります。 一方、少しでもアニメーションを取り入れるだけで、親しみや好感を持つことができるので、ユーザーのホームページに対するエンゲージメントが高まりやすいと言われています。 今回は、眼球を捉えるようなユニークな動きをするアニメーションを簡単に実装することができるCSSやJavaScriptのライブラリをご紹介します。 10年前にはAdobe Flashを使わないと表現できなかったリッチな動きをするアニメーションも、短いコードで実装することが可能です。 ぜひ使いやすいライブラリを見つけてみてください。 ホームページにアニメーションを実装するライブラリ&プラグイン12選 1. Animate.css https://daneden.github
アニメーション系のプラグインとしては大御所のTweenMax.js。 ちなみに、TweenMax自体はjQuery不要だけどjQuery使用前提で書いてます。 いつものごとく、スムーススクロールとか設置してないからブラウザの検索機能使ってね。 TweenMaxとは 公式サイトはこちら https://greensock.com/tweenmax 世界的に有名なアニメーション系のJavascriptプラグイン。外国の、「このサイトすげえええ!」ってサイトでも使ってたりする。このプラグインすげえええ! 実際問題、アニメーションと聞くとhtmlとcssと簡単なjs(スムーススクロールとか)しかしたことない人にとっては小難しいと感じるかもしれない。 特に、CSS3のanimationやtransitionから入ろうとすると、よくわからないし大したアニメーションが作れない!ってなる。少なくとも自分は
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く