1
私はイメージを自動的にリサイズするJSスクリプトと、バウンスイン効果のCSS3アニメーションを持っています。私は2つの効果をどのように組み合わせることができますか？ここではHTML/JSコードCSS3のトランスフォームとウェブキットのアニメーション
</head>
<body>
<div class="container-fluid perso" id="container">
<center>
<img class="img-responsive row" src="../img/row.png">
</center>
<img class="img-responsive button1 bounceIn" id="button1" src="../img/button.png">
</div>
<script>
var $el = $("#button1");
var $container=$("#container");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();
var wHeight1 = $container.height();
var wWidth1 = $container.width();
ratioHeight=elHeight/wHeight1;
ratioWitdh=elWidth/wWidth1;
$(window).resize(function() {
var scale;
var wHeight2 = $container.height();
var wWidth2 = $container.width();
var elHeight2=ratioHeight*wHeight2;
var elWidth2=ratioWitdh*wWidth2;
scale = (elHeight/elWidth)/(elHeight2/elWidth2);
$el.css({
transform: "scale(" + scale + ")"
});
});
</script>
ですそして、ここでCSSのコードは次のとおりです。あなたの助けのための
.img-responsive.button1.bounceIn
{
position:absolute;
left:75%;
top:50%;
transform: scale(1);
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
ありがとう！
"結合効果"がどのように見えるかは、私にはまだ分かりません。 – BillyNate
JSはコンテナサイズに関する画像のサイズを変更します - >イベントでトリガされますそしてCSSは始めにBounceInエフェクト – Nethim