このサイトの技術について

Question

こんにちは。具体的なプログラミング名はわからないのですが、以下のことを実践したいです。
下記のURLの下方にあるフッターに、ゆらゆらと動く波のような部分があります。
それがどのような仕組みになっているかを知りたいです。
ちなみに私はhtmlとcss、jsが若干わかる程度の初心者です。

http://www.benpeana365.com/

Answer 1

SVGのパラメーターを動的にいじって描いているようです。

F12キーを押すと出てくるツールから、ページがどういうエレメントで構成されているか見えますので、確認してみると面白いです。

Comments

[takane]

F12でなんでもわかるんですね・・・。なぜ私は調べ方すらうまくいかないのでしょうか・・・むん。

Answer 2

ブラウザの開発者ツール(F12)を使えば下記のことがわかりますよ。
（最近のPC向けブラウザにはほぼ登載されています）

波はSVGで描画されています。
（https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics）

動きはJavascriptで制御されています。
（Snap.svg）

背景として見えるようにCSSが指定されています。
(コンテンツはz-index:2で、footer側の波SVGはz-index:1)

というようなことがcontents.jsに記述されています。

Comments

[takane]

ありがとうございます。調べ方からわからないと話になりませんね。。。精進します。

Answer 3

Snap.svg
http://snapsvg.io/

色々あるので参考にしてください。

Snap.svg Animation Examples
http://svgdiscovery.com/Snap.svg/Animation/Snap-Animation-Examples.htm

30 Awesome SVG Animation For Your Inspiration
http://www.hongkiat.com/blog/svg-animations/