今回は映画の予告や車のCMでよく見る、テキストアニメーションを紹介します。文字が左から浮き上がっていくアニメーションです。CSSのみで実装できますので、トライしてみてください。
映画の予告風テキストアニメーション【UsingOnlyCSS】
fullpage.jsを使った全画面ページの実装方法とデザイン
JQueryのプラグインである、fullpage.jsを使ってワンスクロールで一画面スクロールするDEMOページを作成しました。簡単に実装できるので参考にしてみてください。
CSSだけで出来る横スクロールの実装【webデザイン】
横向きにページがスクロールされるサイトをたまに見ますが、今回はCSSだけで横スクロールサイトを再現してみました。参考にしてもらえたら幸いです。
TweenMaxとTimeLineMaxを使ったアニメーション【MV】
今回はメインビジュアルに使えそうなファーストビューのアニメーションを作成しました。簡単なJavascriptのライブラリを使っているので、詳しくない方でもすぐに実装できますよ！
画像が左から右へゆっくり表示されるアニメーション【webデザイン】
画像がカーテンを開くように左から右に表示されるアニメーションを作ってみました。最近のサイトには多く実装されているので、自分のサイトなどに実装したい人の参考になればと思います。
【HTML,CSS,jQuery】回転するロゴアニメーション
今回はスクロールすると、ロゴが回転するアニメーションを作成しました。ページの途中のアクセントに使ってもいいかもしれません。
【レスポンシブ】アコーディオンするナビゲーションメニュー
今回はレスポンシブなアコーディオン機能を持ったナビゲーションメニューを紹介します。仕組みはシンプルなので、コピペして使って見えください。
SVGで作るテキストアニメーションの実装方法【webデザイン】
今回はお洒落なテキストアニメーションを紹介します。illustratorで作成したテキストを簡単にhtmlに変換してアニメーションをしています。インパクトのあるメインビジュアルなどに使えそうですね。
CSSで作る伸び縮みする検索フォーム【webデザイン】
スタイリッシュな検索フォームのデザインを提案します。CSSだけで実装できるのでデザインの参考にしてみてはどうでしょうか！
【CSS】:targetで作るアコーディオンメニュー【webデザイン】
CSSだけでできるアコーディオンメニューを紹介します。今回のポイントは”:target”です。デザインの参考にどうでしょうか。