画像のズーム

解決済

質問者：hossy0314
質問日時：2016/04/12 21:42
回答数：2件

下記サイトのように画像が自動てきにズームされる方法を知りたいです。
やはりJavascriptで表現してるのでしょうか？もしそうなら記述してる部分も教えて頂けると大変助かります＞＜

https://www.yanmar.com/jp/

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2016/04/13 19:28

スタイルシートにいくつかの致命的なミスがありfirefoxでは動作しませんね。

画像の変更はjavascriptですが、画像サイズの変更はtransitionプロパティを使用しています。

この場合は、動作を開始するセレクタの変化がないためにanimationを使うべきです。
　それが原因で動かない。

CSS Animations( https://www.w3.org/TR/css3-animations/ )

サンプル
★タブは＿に置換してあるので戻してください。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿</p>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

詳しくご回答頂きありがとうございます＞＜
最近勉強を始めたばかりなのでとても助かります！！
ご回答頂いた内容をもとに頑張ってみます！！

通報する

お礼日時：2016/04/13 20:16

No.1

回答者： fujillin
回答日時：2016/04/13 13:41

こんにちは。

上の方の画像が切り替わって、ゆっくりとズームするもののことですよね？
手元のＩＥではズームしますが、fxでは変化しないようですね。

ご提示のサイトの場合、ズームの仕組み自体はCSSのアニメーションを利用して行っているようです。
transform、transitionなどを用いて、画像の中央を固定点にしておいて画像サイズを拡大していくことで実現していると思われます。
全てかどうかまでは確かめていませんが、all--51424f59.cssの中で指定しているようですね。