画像リンクの動き

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

画像リンクの動き

「画像リンクの動き」はクリックした先に関連するページがあることを明示する機能の役割も担っています。

サイトの印象にあわせた動きを取り入れてみましょう！

２３種類の「画像リンクの動き」を作ってみた

今回はシリーズ最多の２３種類になります。

後半から疲れて余白調整とか手抜きしちゃってます(^◇^;)

あなたも途中から見るのが飽きてくるだろうと思ったので、ちょっと「ドキッ♡」とする画像を使ってます(о´∀`о)

最後までご覧になると、きっとうれしくなると思います！

お楽しみに！☆*:.｡. o(≧▽≦)o .｡.:*☆

よくある動作

背景が出現＋テキスト（下から）

背景が出現＋テキスト（上から）

背景が出現＋テキスト（左から）

背景が出現＋テキスト（右から）

背景が出現＋テキスト（中央から左右に）

背景が出現＋テキスト（中央から上下に）

回転＋テキスト（X軸）

回転＋テキスト（Y軸）

回転＋テキスト（Z軸1）

回転＋テキスト（Z軸2）

画像拡大（ぼかし）＋テキスト

画像縮小（ぼかし）＋テキスト

画像透過+ グラデーション＋テキスト

枠線＋テキスト

次回の予定

見出しやキャッチフレーズといった
「伝えたい言葉」を印象付ける「テキストの動き」に挑戦してみます ＼＼\\٩( ‘ω’ )و //／／

これはコピーライティング、セールスライティングと組み合わせると効果大です！