電子書籍の厳選無料作品が豊富！

画像のズーム

解決済

  • 質問者：hossy0314
  • 質問日時：
  • 回答数：2件

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

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

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

スタイルシートにいくつかの致命的なミスがあり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">
<!--
section{
＿background-image:url(./images/1000.png);
＿background-size:100% auto;
＿min-height:400px;
＿animation-name: anime1;
＿animation-duration: 10s;
＿animation-timing-function: ease;
＿animation-iteration-count: infinite;
}
＿@keyframes anime1 {
＿0% {background-size: 100%; height: auto;}
＿100% {background-size: 150%; height:auto;}
}

-->
</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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2016/04/13 20:16

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは。



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

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

回答ありがとうございます！！CSSで表現してたんですね^^;　てっきりJSかと思ってました・・・　回答を参考にもっと検証してみます！！

通報する
お礼日時：2016/04/13 20:12

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報