[B! アニメーション] kimu12のブックマーク

ウェブサイト制作に欠かせない、アニメーション人気テクニック4つまとめ

機能的で楽しいアニメーションは、現代のウェブデザインに欠かせない重要な要素のひとつです。論理的に考えられたアニメーションを活用することで、ウェブサイトに大きな違いを生み出します。アニメーションはステータスを伝えたり、注意を引くことはもちろん、ユーザーの行った行動の結果をうまく表現できます。今回は、より快適なウェブサイト体験を実現するために加えたい、アニメーションの制作テクニックをサンプル例と一緒に詳しく見ていきましょう。進行状況（英: Progression）ローディング・アニメーションウェブデザインに使われるアニメーションでもっとも一般的なもので、ページの読み込みに関係しています。ローディング・アニメーションは、コンテンツを読み込むまでの待ち時間をユーガーが短く感じられるように工夫されています。シンプルな動きがローディング・アニメーションにとって最適で、音や余計なエフェクトなど

kimu12 2017/02/09

アニメーション

リンク

これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ

作成：2016/04/25 更新：2016/06/29 Web制作 > ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。エンジニア速報は Twitter の@commteで配信しています。背景色に合わせて、テキスト色をリバースさせる DOM要素の重なりを指定するCSS3のブレンドモードmix-blend-mode: differenceを使って、背景色と同時にテキストカラーを反転させていく方法。CSSだけでこれができるのは驚き。進捗を示すプログレスバーなどで使うと、コントラストがはっきりするので見やすくなりそうです。 mix-blend-modeの「 difference」についてはCSS3のブレンドモードが素敵！新プロパティmix-blend-modeを使いこな

kimu12 2016/04/25

リンク

PSDファイルでできるんだ！要素がぷるるんとアニメーションでくっついたり離れたりするエフェクト -Photoshop Gooey Effect

kimu12 2016/03/14

リンク

CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト - NxWorld

フラットやゴーストといったようにシンプルで一見ボタンと認識しずらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。サンプルの記述内容について CSSで記述している内容はこのサンプルの見た目に関する記述も多いので、矢印の動きのみ抜き出したい場合はボタンとなる要素にposition: relative;を追記し、::before, ::afterで記述している内容や:hoverで記述している部分を使ってもらえれば同じ動きを再現できるかと思います。また、紹介しているボタンに付いている矢印アイコンは、いずれもCSSのborderを使って実装をしています。サイトによっては

kimu12 2015/12/07

リンク

花火大会をみんなでつくろう！ - jsdo.it - Share JavaScript, HTML5 and CSS

今年の「鎌倉花火大会」は、残念ながら中止になりました。その代わりにはなりませんが、jsdo.it上で花火大会を開催します。「hanabi」タグをつけて花火のアニメーションを投稿すると、花火会場にあなたの花火が打ち上がります。花火職人のみなさんへ「hanabi」のタグがついたコードが会場で打ち上がります。各コードはiframeで表示され、徐々にフェードアウトしつつ約3秒間表示されます。他の花火と重なることはありません。背景は黒(#000)もしくは透過で作成してください。画像から花火を作ってみよう！ 1. THE花火職人 / Fireworks Generatorに画像をドラッグ＆ドロップして配列を生成します。 2. 以下のコードをフォークして、htmlのscriptタグの中に生成した配列を貼り付けます。 → やらない花注目の花火これらの花火をあなたらしくアレンジ（＝フォー