ブログBLOG

静止画は動かせるのか！？動く写真シネマグラフ

静止画の素材を動かしたい…動かしてほしい…そんな話を受けた人がいるのではないでしょうか？　 今回は静止画を動かしたいというテーマで、静止画の一部だけ動かしたシネマグラフの紹介や 静止画を動かすため、Photoshopのタイムラインを駆使し、チャレンジしてみる内容など （比較的？）簡単に動か ...

APNGでイラストやアイコンを動かそう！～AdobeAnimateの使い方～

イラストや写真を動かして、Webサイトで見られるアニメーションといえばGIFアニメーションですよね。 ですが、近頃GIFアニメーションに代わる新しいAPNGという形式が現れました！ 今回はこのAPNGについてと簡単にアニメーションを作成の過程をご紹介したいと思います。 APNGとは ...

【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode]

タイトルが上手くまとめられなかったのですが…そのままの内容です！ 写真の上に被っているテキストだけ色が変わっているデザインのコーディングを依頼されたことがあって（最終的には別のデザインになりましたが）、もしアニメーション付けるならどうコーディングするかな？と考えた結果のサンプルです。 mix ...

GIFアニメをつくってみよう～その2～作り方編[PhotoshopCC]

ご無沙汰しています。作り方編まで大分間が空いてしまいました！ その1ではGIFの作り方についての概要を説明させてもらいましたが、今回はそれを踏まえたうえで実際の手順を詳しく説明していこうと思います。 Contents フレームアニメーションでのGIF作成 ビデオタイムラインでのG ...

GIFアニメーションをつくってみよう（サンプルPSDダウンロード）～その1～フレームアニメーションとビデオタイムライン[PhotoshopCC]

動きのついた広告やWebサイトは目を引きますよね。 GIFアニメはHTMLをサポートしている媒体なら再生ができる手軽なデータなのでWEB広告やサイトの要素でも使われているのを見かけます。言葉や静止画では伝わりづらいことも動画ならすぐに伝わるので説明にも便利なので、選択肢として作成スキルがあ ...

SVGを動かす [cssアニメーション/クリッピングマスク/波/線を描く]

最近SVGを使用してコーディングすることが多くなりました。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）、つまり伸縮自在のベクター情報で作られた画像のことです。 一つのSVGファイルで、どのサイズでも綺麗に表示させることができます。 また、テ ...

webページ作成で CSSアニメーションを具体的に使えないか試す

CSS の animation や transition を使えるようになって久しいですが、実際の使いどころはいまいちな印象です。原因の大部分は IE にあるとおもいますけど。 そこで animation に対応しているまともなブラウザさんにはおもてなしを、 そして対応していない困ったブラウ ...

[jQueryプラグイン]いろいろなアニメーションが用意されたコンテンツスライダー | Adaptor, a jQuery 3D content slider

jQuery を利用したコンテンツスライダーはいろいろな方法やいろいろなプラグインがありますが、CSSの 3Dプロパティを使ったエフェクトを選べるプラグインを紹介します。 Adaptor, a jQuery 3D content slider デモページ GitHub 現時点では9種類 ...