画像表示演出 タイトル枠効果 (12-Dexter)

画像表示演出 タイトル枠効果 (12-Dexter)

menu_book　目次

1. 　オリジナル画像
2. 　タイトル枠効果 ／ 12-Dexter
3. 　画像の下には背景画
4. 　透明度を下げた画像
5. 　まとめ

1　オリジナル画像

手を加える前の画像

この画像に表示の効果を加えます。
マウスホバーすると、画像の色が変化したり、テキストが現れる･･･といった効果です。
目次に戻る

2　タイトル枠効果 12-Dexter

画像タイトルを囲んでいた枠が下がり、その中にテキストが出現。

完成形の画像表示演出

Strange Dexter

Dexter had his own strange way. You could watch him training ants.

この画像表示演出には、以下のテクニックが仕組まれています。
目次に戻る

3　画像の下には背景画

実は画像の下には、「上が青、下がオレンジ色のグラデーション」があります。マウスホバー時に画像の透明度が上がり、その分下の色が透けて見える仕組みになっています。

画像の下にあるグラデーション

画像の一番下には、このようなグラデーションが隠されていたんですね。

画像の下のグラデーションに重ねたホバーで動きのある枠と文字

Strange Dexter

Dexter had his own strange way. You could watch him training ants.

この状態は、完成形からお花畑の画像を抜き取った状態です。
目次に戻る

4　透明度を下げた画像

透明度 「opacity: 0.4」に下げた画像

画像下のグラデーションに画像を重ねた

あとは、この上に文字の効果を組み合わせたものが、項目2の画像演出です。
目次に戻る

5　まとめ

この記事は、お花畑の写真にホバーすると背景のグラデーションがハッキリ見え、ホバー前にあった白い枠が下がりその中に新たな文字が出現するという画像表示演出を行ったものです。
目次に戻る

合わせて読みたい記事 ／ 画像表示演出

1. ゆり編 (1-Lily)
2. ここわ編 (2-Sadie)
3. 新たな文字追加 (3-Honey)
4. 消滅と出現 (4-Layla )とFACTFULNESS
5. テキストとアイコンが出現 (5-Zoe)
6. 囲みとテキスト出現 (6-Osca)
7. 白線効果 (7-Marley)
8. タイトル色変化とテキスト出現 (8-Ruby)
9. 画像右に 枠とテキスト出現 (9-Roxy)
10. クリックで枠･テキストが (10-Bubba)
11. 画像縮小･線が交差効果 (11-Romeo)
12. タイトル枠効果 (12-Dexter) ⇐この記事
13. ライン等出現効果 (13-Sarah)
14. 画像縮小･テキスト出現 (14-Chico)
15. 画像が右に、テキスト出現 (15-Milo)
16. 画像拡大･テキスト出現 (16-Julia)
17. 上に移動 赤い帯出現 (17-Goliath)
18. 消滅と出現 (18-Hera)
19. タイトルが上に (19-Winston)
20. 縁取り効果 (20-Selena)
21. 可視範囲が縮小しタイトルが左に (21-Terry)
22. 8月は強い台風が多い ／ 画像表示演出･タイトルが上に (22-Phoebe )
23. 光とテキスト出現し色が変化 (23-Apollo)
24. タイトル上へ テキスト出現 (24-Kira)
25. 枠出現 (25-Steve)
26. もう一つ枠が出現 (26-moses)
27. テキストと斜線が出現 (27-Jazz)
28. 可視範囲縮小 テキスト出現 (28-Ming)
29. 円形テキスト枠効果 (29-Lexi)
30. 写真拡大枠出現 (30-Duke)