z1a2nhのブックマーク / 2017年2月22日

z1a2nh id:z1a2nh

2017年2月22日のブックマーク (4件)

SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成するアニメーションを作る前に、Illustratorを使って素
z1a2nh 2017/02/22
SVG
リンク
webmanab.html
単純なアニメーションならCSSの@keyframesやtransitionで実装できますが、複雑なアニメーションやサクッといいものを描くときにはアニメーションライブラリを使うと、くわしい知識や経験がなくても簡単に実装できたり、複雑なアニメーションを構築することができます。また、アニメーションを実装する際の勉強や研究にもなるので、目を通しておきたいライブラリをまとめます。アニメーションを実装するためのライブラリまとめ (CSS) Tuesday 0.3秒くらいの短時間で終了するように作られた要素の表示／非表示に使える、シンプルなCSSアニメーションライブラリ。用意されたclass属性を付与するだけで簡単にアニメーションが実装できます。ソースはLessで記述されています。 Tuesday Tuesday github <div class="animated tdDropInLeft">an
z1a2nh 2017/02/22
CSS
リンク
Magic Animations CSS3
Magic CSS are a set of simple animations to include in your web or app project's
z1a2nh 2017/02/22
CSS
リンク
[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar
デスクトップ、タブレット、スマホに対応した、通常のスタティックなヘッダやスクロールしても常に上部・下部に固定表示されるバーとして配置できるナビゲーションを実装するスタイルシートを紹介します。スクリプトは一切無し、アニメーションも快適な超軽量のスタイルシートです。
z1a2nh 2017/02/22
CSS
リンク
- 2017年2月23日
- 2017年2月22日
- 2017年2月21日