どのように "スマート" transfromを実装する：translate？

Question

ブロックでイメージチェックを実行する方法がわかりません。

説明が難しいですが、ただlinkに従ってください。カードにスクロールすると、数秒待ってから、その画像が開始点から外に出てきます（enter image description here など）。

イメージを独自のサイズを超えて移動できないように修正したいと考えています。

私のJavaScriptコード：私はそれを修正するにはどうすればよい

"use strict"; 
 
     var imgArr = document.getElementsByClassName('imgArr'); 
 

 
     [].forEach.call(imgArr, function(item, i, arr) { 
 
      // set variables 
 
      var randValWidth; 
 
      var randValHeight; 
 

 
      // take the width and height of each image 
 
      var size = { 
 
       'widthImg': arr[i].width, 
 
       'heightImg': arr[i].height 
 
      }; 
 

 
      // set time 
 
      setInterval(function() { 
 
       // add arguments for tRand() and wRand() 
 
       var randW = tRand(-size.widthImg/4, size.widthImg/4); 
 
       var randH = wRand(-size.heightImg/4, size.heightImg/4); 
 
       // start animation 
 
       motionItem(); 
 
      }, 2000); 
 

 
      // find a random value between min and max values 
 
      function tRand(min, max) { 
 
       randValWidth = Math.floor(Math.random() * (max - min) + min); 
 
      }; 
 
      function wRand(min, max) { 
 
       randValHeight = Math.floor(Math.random() * (max - min) + min); 
 
      }; 
 

 
      // animate elements 
 
      function motionItem() { 
 
       arr[i].style.transform = 'translate3d(' + randValWidth + 'px,' + randValHeight + 'px,' + 0 + ')'; 
 
      }; 
 
     });

？

Answer 1

これは単なる画像とCSSで、JavaScriptは必要ありません。たとえば、ボックスには高さ100pxの画像が含まれていますが、画像の高さは200pxなので、divで画像をいっぱいにしてから画像を画像に変換して上下に移動させます。

.box { 
 
    width:900px; 
 
    height:400px; 
 
    background-color:blue; 
 
} 
 
.img { 
 
    width:90%; 
 
    height:auto; 
 
    position:relative; 
 
    animation:4s movingUp infinite linear; 
 
    transition:4s; 
 
} 
 
@keyframes movingUp { 
 
    0%{ 
 
    transform:translateY(0px); 
 
    } 
 
    25% { 
 
    transform:translateY(50px); 
 
    } 
 
    50%{ 
 
    transform:translateY(100px); 
 
    } 
 
    75%{ 
 
    transform:translateY(-50px); 
 
    } 
 
    100% { 
 
    transform:translateY(0px); 
 
    } 
 
}

<div class="box"> 
 
    <img class="img"src="http://res.cloudinary.com/dhue87np7/image/upload/v1508082124/sample.jpg" /> 
 
</div>