アウトプット

707
水中っぽいアニメーションをCSSとjQueryで作ってみる

水中っぽいアニメーションをCSSとjQueryで作ってみる

最近なんだか暑いので、気分だけでも涼もうということで水中っぽい、泡が出るアニメーションを作ってみた。 はじめに実は泡が出るアニメーションはすでに多数存在する。ただ自分が表現したいものとは違っていたので、既出のものを参考にしながら作ってみた。 水中を表現しよう水中は絵でもグラデーションで表現することが多い。海藻や魚があれば別だが、個人的には青一色だとのっぺりした印象になり、水中だと認識しにくい。 しかしグラデーションをかけるだけで、不思議なことに水中っぽくなる。青系統の色

スキ
9
CSSアニメーションを使ってまばたきをさせてみる

CSSアニメーションを使ってまばたきをさせてみる

前回のおまけみたいなもの。CSSアニメーションもいろいろ触ってみたかったので、まばたきするアニメーションを作ってみた。 準備するもの 元の画像と動かしたいもの。動かしたいものは透過pngにしておく。 元の画像↓ 今回動かしたいのは目の部分なので、目を開けた状態と閉じた状態の透過画像を用意した。 この時、画像サイズを揃えておくと楽に重ねることができる。 CSSアニメーションを使ってみよう まずはHTMLに元の画像と目の画像2つをそれぞれ書いておく。開けた状態だけ少

スキ
4
GIFでもJSONでもダメ…それならAPNGとwebPで綺麗なアニメーションを実装しよう!

GIFでもJSONでもダメ…それならAPNGとwebPで綺麗なアニメーションを実装しよう!

UIデザイナーのNOEです。 先日、お仕事でアプリのローディングアニメーションを作成したのですが、 当初予定していた 、 GIFの書き出しを、するとグラデーションがきれいに表現できず…😂 (※サムネイルはイメージです!) 悩んでいたところ、 ふと APNGというPNGの連番ファイル形式の存在  を思い出し、 エンジニアさんに協力いただいて、 なんとか理想通りのアニメーションの実装が可能になりました!✨ 今回はそんな、 ・GIFだと汚くなってしまう ・JSONで表現で

スキ
22
【AfterEffect】初めての動画制作で学んだ、業務で役立つ4つのポイント

【AfterEffect】初めての動画制作で学んだ、業務で役立つ4つのポイント

こんにちは!デザイナーのNOEです。 先日業務で、はじめてアプリ紹介動画を作成しました! (↓いわゆるAppストアに並ぶアプリの操作について説明する動画です。) 今回先方がいる状態での業務、つまり戻しや修正が発生する中でそれらを際想定して作ったファイル内構造や自分ルールが割と基本的なことかと思いますが、心がけることでかなりスムーズに業務ができたのでその4つのポイントをまとめてみました。 1.二つ以上使う素材は全てコンポーネント化する コンポーネントとは、Adobe製品

スキ
6