webのアニメーションについて

Question

下記、アニメーションは何を使っているのでしょうか?
わかる方、教えて下さい

http://odashi.com/
http://s-machi.com/

よろしくお願いいたします。

Answer 1

どこを指してるかはわかりませんが

http://odashi.com/
・ホバーエフェクト
・メインイメージのキャッチ
・メインイメージの拡大処理
→css transition

・メインイメージの切り替え
・スクロールに伴う画像のフェードイン
→js

http://s-machi.com/
・メインイメージの拡大処理
→css transition

・メインイメージの切り替え
→js

Comments

[NM3]

ありがとうございます。
わかりづらくて申し訳有りません、

>http://odashi.com/

のトップメインキャッチの写真と文字ですが、

画像にズーム
画像切り替え
テキストホバーエフェクト

この3つはcss3とjsで合わせて作成しているということですか?
jqueryなどではないんでしょうか?

[fuji_fe]

●テキストホバーエフェクト
→cssのみです

●キャッチ文字
キャッチ部分は、各テキストにtransition-delayを設定し
.loadというclassをjsで付与して動作させています。

body.page-index #Cover #Intro .wrap .pic.load p.p {
opacity: 1;
transform: translate3d(0px, 0px, 0px) !important;
-webkit-transform: translate3d(0px, 0px, 0px) !important;
-moz-transform: translate3d(0px, 0px, 0px) !important;
-ms-transform: translate3d(0px, 0px, 0px) !important;
-o-transform: translate3d(0px, 0px, 0px) !important;
}

●画像にズーム（メインイメージ
→jsでclassを切り替えてcssで動作

>この3つはcss3とjsで合わせて作成しているということですか?
>jqueryなどではないんでしょうか?

jQuery=jsです。
「jQueryを使用したプラグインを使用しているか？」
という意味でしたら、NOです。

[NM3]

ありがとうございます。
css3のtransform: scale
という拡大アニメーションのことでした。

設定してみたところ下記だけでは、URLのような動きはせず

transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);

下記を設定すると動くんですが

@keyframes inout {
1% { transform: scale(1.2) }
}

2つ疑問でして、
・URLはkeyframes inoutは使用していない
・タイムアウトすると画像がスタートの位置に戻るんですが、拡大したら縮小で元の位置まで戻ってくるように設定できないでしょうか?

http://www.matsusakaushi-yoshida.jp/

勉強不足ですみません。