0

Всем привет. Я захотел сделать карточную и сразу столкнулся с проблемой. У меня есть блок из карт, хочу с помощью библиотеки GSAP сделать анимацию для сдвига вправо. Я обернул анимацию в функцию. В общем я хотел сделать, чтобы при нажатие на блок карт- у меня передвигалась одна карта, а не все. Как это реализовать подскажите, пожалуйста.

   function image(){

        gsap.to(".img",{
x:500,
})
}
 const img=document.querySelector('.img');
 img.addEventListener('click',image);
* {
    margin: 0;
    padding: 0;
  }
  
  html,
  body {
    width: 100%;
    height: 100%;
    background: #272727;
    color: #fff;
  }
  
  .images {
    position: relative;
  }
  
  img {
    position: absolute;
  }
  
  img:nth-child(2) {top: 10px;left: 10px;}
  img:nth-child(3) {top: 20px;left: 20px;}
  img:nth-child(4) {top: 30px;left: 30px;}
  img:nth-child(5) {top: 40px;left: 40px;}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <link rel="stylesheet" href="./index.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <title>Россия</title>
</head>
<body>


<div class="images">
    <img class="img" src="http://via.placeholder.com/250x250/ff00ff/00ff00">
    <img class="img"  src="http://via.placeholder.com/250x250/c009ff/ff0000">
    <img class="img" src="http://via.placeholder.com/250x250/0000ff/000fff">
    <img class="img" src="http://via.placeholder.com/250x250/dd00ff/000000">
    <img  class="img" src="http://via.placeholder.com/250x250/0d00ff/fff000">
  </div>

 
<body>
    
</html>

1 ответ 1

1
  1. Соберите все картинке через querySelectorAll не просто querySelector;
  2. Добавьте в функцию image не класс, а параметром событие event и работайте с event.currentTarget.

https://jsfiddle.net/z6jnyhof/

  function image(e){

        gsap.to(e.currentTarget,{
x:500,
})
}
 const img = document.querySelectorAll('.img');
 for(let i of img){
  i.addEventListener('click',image);
 }
* {
    margin: 0;
    padding: 0;
  }
  
  html,
  body {
    width: 100%;
    height: 100%;
    background: #272727;
    color: #fff;
  }
  
  .images {
    position: relative;
  }
  
  img {
    position: absolute;
  }
  
  img:nth-child(2) {top: 10px;left: 10px;}
  img:nth-child(3) {top: 20px;left: 20px;}
  img:nth-child(4) {top: 30px;left: 30px;}
  img:nth-child(5) {top: 40px;left: 40px;}
<div class="images">
    <img class="img" src="http://via.placeholder.com/250x250/ff00ff/00ff00">
    <img class="img"  src="http://via.placeholder.com/250x250/c009ff/ff0000">
    <img class="img" src="http://via.placeholder.com/250x250/0000ff/000fff">
    <img class="img" src="http://via.placeholder.com/250x250/dd00ff/000000">
    <img  class="img" src="http://via.placeholder.com/250x250/0d00ff/fff000">
  </div>

 
 </body>
    
</html>

1
  • Спасибо за помощь)
    – user450050
    16 фев 2022 в 4:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.