画像リンクの動き
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
画像リンクの動き
「画像リンクの動き」はクリックした先に関連するページがあることを明示する機能の役割も担っています。 サイトの印象にあわせた動きを取り入れてみましょう！
２３種類の「画像リンクの動き」を作ってみた
今回はシリーズ最多の２３種類になります。 後半から疲れて余白調整とか手抜きしちゃってます(^◇^;) あなたも途中から見るのが飽きてくるだろうと思ったので、ちょっと「ドキッ♡」とする画像を使ってます(о´∀`о) 最後までご覧になると、きっとうれしくなると思います！ お楽しみに！☆*:.｡. o(≧▽≦)o .｡.:*☆
よくある動作
See the Pen よくある動作 by Web Navigator (@web-navigator) on CodePen.
背景が出現＋テキスト（下から）
See the Pen 背景が出現＋テキスト（上から） by Web Navigator (@web-navigator) on CodePen.
背景が出現＋テキスト（上から）
See the Pen 背景が出現＋テキスト（上から） by Web Navigator (@web-navigator) on CodePen.
背景が出現＋テキスト（左から）
See the Pen 背景が出現＋テキスト（左から） by Web Navigator (@web-navigator) on CodePen.
背景が出現＋テキスト（右から）
See the Pen 背景が出現＋テキスト（右から） by Web Navigator (@web-navigator) on CodePen.
背景が出現＋テキスト（中央から左右に）
See the Pen 背景が出現＋テキスト（中央から左右に） by Web Navigator (@web-navigator) on CodePen.
背景が出現＋テキスト（中央から上下に）
See the Pen 背景が出現＋テキスト（中央から上下に） by Web Navigator (@web-navigator) on CodePen.
回転＋テキスト（X軸）
See the Pen 回転＋テキスト（X軸） by Web Navigator (@web-navigator) on CodePen.
回転＋テキスト（Y軸）
See the Pen 回転＋テキスト（Y軸） by Web Navigator (@web-navigator) on CodePen.
回転＋テキスト（Z軸1）
See the Pen 回転＋テキスト（Z軸1） by Web Navigator (@web-navigator) on CodePen.
回転＋テキスト（Z軸2）
See the Pen 回転＋テキスト（Z軸2） by Web Navigator (@web-navigator) on CodePen.
画像拡大（ぼかし）＋テキスト
See the Pen 画像拡大（ぼかし）＋テキスト by Web Navigator (@web-navigator) on CodePen.
画像縮小（ぼかし）＋テキスト
See the Pen 画像縮小（ぼかし）＋テキスト by Web Navigator (@web-navigator) on CodePen.
画像透過+ グラデーション＋テキスト
See the Pen 画像透過+ グラデーション＋テキスト by Web Navigator (@web-navigator) on CodePen.
枠線＋テキスト
See the Pen 枠線＋テキスト by Web Navigator (@web-navigator) on CodePen.
次回の予定
見出しやキャッチフレーズといった
「伝えたい言葉」を印象付ける「テキストの動き」に挑戦してみます ＼＼\\٩( ‘ω’ )و //／／ これはコピーライティング、セールスライティングと組み合わせると効果大です！
