水面から文字を浮かばせたい

やりたいこと

テキストが背景画像（水面）からふわっと浮かび上がってくる
単純なtransitionではなく、水面から物が浮かび上がってくるような揺れのようなものをテキストに表現したい

わからないこと

jsのプラグインを中心に調べましたが、それに近いものが見つからず
実装するならthree.jsやWebGLになるのかなと思いますが、他に方法があればご教授いただきたく

曖昧な質問で申し訳ないですが、よろしくお願いします。

x_x

2018/09/12 04:48

リップルエフェクトとは違うのでしょうか？また、背景画像を見せてもらうことはできますか？

miyabeam

2018/09/12 04:51 編集

コメントありがとうございます！リップルエフェクトはちがいますね…メインビジュアル部分で静止画の海の画像の上に、キャッチ（テキスト）が海から浮かび上がってくるような演出を取り入れたいです

yambejp

2018/09/12 05:39

ざっくりペイントソフトで初期画面→最終画面といくつかの中割をしてgifアニメか何かでサンプルを提示することはできますか？

dit.

2018/09/13 01:56

「揺れる」のは水面ですか？テキストですか？

miyabeam

2018/09/13 02:46

サンプルは揺れの表現ができなかったので厳しそうです…文字が水のように揺れながら浮上してくるイメージで、あわせてopacityもアニメーションさせる感じです。

miyabeam

2018/09/13 02:47

揺れるのはテキストになります。背景画像を揺らすプラグインはありましたね！

行動規範の内容に同意します

回答4件

文字が浮き出て影が映ります．

HTML5
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <style>
6    body {
7	background: #c8e0ee;
8    }
9    p {
10	font-size: 48pt;
11	animation-name: fadeUp;
12	animation-duration: 3s;
13	animation-fill-mode: forwards;
14	animation-delay: 1s;
15	color: #c8e0ee;
16    }
17    @keyframes fadeUp {
18	100% {
19	    text-shadow: 10px 10px .25em rgba(0,0,0,0.8),
20                       -10px -10px .25em rgba(0,0,0,0.9);
21	    color: #333;
22	}
23    }
24  </style>
25</head>
26<body>
27  <p>文字</p>
28</body>
29</html>

　これ以降はアートの領域ですね．

投稿2018/09/12 12:55

IKIX

総合スコア142

miyabeam

2018/09/13 02:40

浮かすだけならおっしゃる通り `text-shadow` でいいですね。今回は揺れも表現したいです。

行動規範の内容に同意します

ベストアンサー

多分実現できるのはthree.js
これとかの派生

蛇足ながら、FlashならばそういうことするときはDisplacementMapFilterを使ってたんで
これをcanvasで再現しようと試みたことがあったですが、重すぎて実用に耐えませんでした

投稿2018/09/13 02:27

編集2018/09/13 02:35

KazuhiroHatano

総合スコア7804

miyabeam

2018/09/13 02:37

やはりそうですよね… 私もやるならthree.jsかWebGLらへんになるかな？と思って、それ以外の手法がないものかと質問してみた次第です。

KazuhiroHatano

2018/09/13 04:54

まあthree.jsでは確かに大げさで役不足な感じなのですよね画像の水面エフェクトは3Dにまでする必要はなく、画像を三角の断片に分解して各々アフィン変形という３Dの一歩手前のところで事足りるはずですそれで各頂点をDisplacementMapFilterの要領でビットマップデータをもとに移動させれるようにしておけばグラデーションのビットマップデータをもとに画像を歪ませる実用的な速度の歪みエフェクトが実現するんじゃないでしょうか本来のDisplacementMapFilterでやったりするステンドグラスのエフェクトへの転用は難しくなるでしょうが canvasで画像をメッシュ分解するぐらいのとこまではなんかライブラリありそうな気はします最近はそっち方面の処理と無縁なのでわからないですが

miyabeam

2018/09/13 06:32

詳しい解説までありがとうございます！いったんthree.jsで試してみたいと思います。

行動規範の内容に同意します

詳しくはないので具体的な手法を提示することはできませんが、
アニメーション自体はJavaScriptでもできるようなので、
「JavaScript　アニメーション　サンプル」等で検索すれば解決の糸口になるかもしれません。

投稿2018/09/12 04:42