Параболи c анимация для div в Javascript или JQuery - PullRequest
Новая
       1

Параболи c анимация для div в Javascript или JQuery

0 голосов
/ 02 февраля 2020

Я новичок в Javascript. Я хочу такую ​​анимацию:

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

Затем объекты (я не знаю javascipt литературные, я имею в виду div, которые содержат изображение) начинают выходить из сумки с анимацией paraboli c. Когда анимация завершается sh, все элементы будут на одном на основе (выровнять) с сумкой.

Затем объекты начнут на go вправо. Каждый элемент, кроме первого, имеет задержку, так как мс также интервал между ними. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div.2").animate({left: '70vw'});
    $("div.1").delay( 800 ).animate({left: '40vw'});
  });
});
</script>
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div class="1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
x
</div>
<div class="2" style="background:pink;height:100px;width:100px;position:absolute;"></div>

последняя форма:

http://migrate2.deniz-tasarim.site/wp-content/ball/ball.php

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style>
    .bag {
        display: block;
        width: 240px;
        height: 120px;

        background-image: url("http://migrate2.deniz-tasarim.site/wp-content/ball/New Project240x120.png");
        position: relative;
        top: 150px;
       margin-left: auto!important;
        margin-right: auto!important;
        cursor: pointer;
    }

    .holder {
        position: absolute;
        top: 0;
        left: 0;
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 120px;
        height: 60px;

        display: block;
    }

    .dot {
        position: absolute;
     left: 95px;
        top: 0;

    }

    .dot::after {
        content: '';
        display: block;
        width: 50px;
        height: 150px;
        border-radius: 0px;
        z-index: 1;
    }

    .dot1::after {
        background-image: url("http://migrate2.deniz-tasarim.site/wp-content/ball/New Project (7).png");
    }

    .dot2::after {
        background-image: url("http://migrate2.deniz-tasarim.site/wp-content/ball/New Project (8).png");
    }

    .bag.open,
    .bag.open .mask {
        background-image: url("http://migrate2.deniz-tasarim.site/wp-content/ball/New%20Project%20(1)240x120.png");
    }

    .bag.open .dot1 {
        animation: xAxis1 2.5s cubic-bezier(0.02, 0.01, 0.21, 1);
        animation-fill-mode: forwards;
    }

    .bag.open .dot1::after {
        animation: yAxis1 2.5s cubic-bezier(0.3, 0.27, 0.07, 1.64);
        animation-fill-mode: forwards;
    }

    .bag.open .dot2 {
        animation: xAxis2 2.5s cubic-bezier(0.02, 0.01, 0.21, 1);
        animation-fill-mode: forwards;
    }

    .bag.open .dot2::after {
        animation: yAxis2 2.5s cubic-bezier(0.3, 0.27, 0.07, 1.64);
        animation-fill-mode: forwards;
    }

    @keyframes yAxis1 {
        50% {
            animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
            transform: translateY(-100px);
        }
        100% {
            animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
            transform: translateY(70px);
        }
    }

    @keyframes xAxis1 {
        100% {
            animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
            transform: translateX(150px);
        }
    }

    @keyframes yAxis2 {
        50% {
            animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
            transform: translateY(-100px);
        }
        100% {
            animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
            transform: translateY(70px);
        }
    }

    @keyframes xAxis2 {
        100% {
            animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
            transform: translateX(-150px);
        }
    }


</style>

<script>
    $(document).ready(function() {
        $(".bag").on("click", function() {
            $(this).toggleClass("open");
        });
    });




</script>



</head>



<body>

<div class="bag">
    <div class="dot dot1">
        Ekipman
    </div>
    <div class="dot dot2">
        Kıyafet
    </div>
    <div class="mask"></div>
</div>

</body>

</html>

Ответы [ 2 ]

0 голосов
/ 04 февраля 2020

Второе решение. Этот с чистыми JavaScript анимациями, с использованием https://github.com/yairEO/pathAnimator библиотеки и https://codepen.io/anthonydugois/pen/mewdyZ инструмента для рисования контуров. 

$(document).ready(function() {

  var paths = [
    "M 160 120 Q 160 30 210 30 Q 270 30 240 180",
    "M 160 120 Q 160 30 110 30 Q 60 40 60 180",
    "M 160 120 Q 160 30 210 50 Q 280 80 300 180"
  ];
  var walkers = [];

  function AnimateWalker(walker, index) {
    this.pathAnimator = new PathAnimator(paths[index], {
      duration: 3,
      step: this.step.bind(this),
      reverse: false,
      onDone: this.finish.bind(this)
    });

    this.walker = walker;
  }

  AnimateWalker.prototype = {
    start: function() {
      this.startOffset = (this.reverse || this.speed < 0) ? 100 : 0;
      this.pathAnimator.start();
    },

    step: function(point, angle) {
      var stretchFactor = 1,
        scale = 25 + this.pathAnimator.percent / 4;

      scale = (scale / 30) + 0.5;

      this.walker.style.cssText = "top:" + point.y * stretchFactor + "px;" +
        "left:" + point.x * stretchFactor + "px;" +
        "transform:rotate(" + angle + "deg) scale(" + scale + ");";
    },

    finish: function() {
      this.pathAnimator.stop();
    },

    resume: function() {
      this.pathAnimator.start(this.speed, this.step, this.reverse, this.pathAnimator.percent, this.finish, this.easing);
    }
  }

  function generateWalker(walkerObj) {
    var newAnimatedWalker = new AnimateWalker(walkerObj, walkers.length);
    walkers.push(newAnimatedWalker);
    return newAnimatedWalker;
  }

  $(".box").on("click", function() {

    if (!$('.wrapper').hasClass("open")) {

      $('img').each(function(k, v) {
        generateWalker(v).start();
      });
      $('.wrapper').addClass("open");
    } else {

      $('.wrapper').removeClass("open");
      $(walkers).each(function(k, v) {
        v.finish();
      });
      walkers = [];
    }

  });

});
img {
  position: absolute;
  width: 40px;
  display: none;
}

.wrapper {
  position: relative;
  display: inline-block;
  width: 480px;
  height: 240px;
  background-color: #fff;
}

.ground {
  background-color: #0a0;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 2px;
  left: 0;
}

.box {
  position: absolute;
  background-color: #f00;
  width: 100px;
  height: 100px;
  top: 120px;
  left: 120px;
  background: url('https://st2.depositphotos.com/1431107/6391/v/950/depositphotos_63919095-stock-illustration-open-and-closed-box-icon.jpg');
  background-size: 220%;
  background-position: -7px -20px;
  background-repeat: no-repeat;
}

.wrapper.open .box {
  background-position: -108px -20px;
}

.wrapper.open img {
  display: block;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/yairEO/pathAnimator@master/pathAnimator.js"></script>
<div class="wrapper">

  <div class="box"></div>
  <div class="ground"></div>

  <img src="https://raw.githubusercontent.com/yairEO/pathAnimator/master/demos/2/fire.png" />
  <img src="https://raw.githubusercontent.com/yairEO/pathAnimator/master/demos/2/fire.png" />
  <img src="https://raw.githubusercontent.com/yairEO/pathAnimator/master/demos/2/fire.png" />

</div>
0 голосов
/ 03 февраля 2020

Немного базовой c CSS анимации, надеюсь, поможет вам начать. 

$(document).ready(function() {
  $(".bag").on("click", function() {
    $(this).toggleClass("open");
  });
});
.bag {
  display: block;
  width: 120px;
  height: 120px;
  background-color: #ff0;
  position: relative;
  top: 150px;
  left: 150px;
  cursor: pointer;
}

.holder {
  position: absolute;
  top: 0;
  left: 0;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 60px;
  background-color: #ff0;
  display: block;
}

.dot {
  position: absolute;
  left: 35px;
  top: 0;
}

.dot::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  z-index: 1;
}

.dot1::after {
  background-color: #333;
}

.dot2::after {
  background-color: #00a;
}

.bag.open,
.bag.open .mask {
  background-color: #f00;
}

.bag.open .dot1 {
  animation: xAxis1 2.5s cubic-bezier(0.02, 0.01, 0.21, 1);
  animation-fill-mode: forwards;
}

.bag.open .dot1::after {
  animation: yAxis1 2.5s cubic-bezier(0.3, 0.27, 0.07, 1.64);
  animation-fill-mode: forwards;
}

.bag.open .dot2 {
  animation: xAxis2 2.5s cubic-bezier(0.02, 0.01, 0.21, 1);
  animation-fill-mode: forwards;
}

.bag.open .dot2::after {
  animation: yAxis2 2.5s cubic-bezier(0.3, 0.27, 0.07, 1.64);
  animation-fill-mode: forwards;
}

@keyframes yAxis1 {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-100px);
  }
  100% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(70px);
  }
}

@keyframes xAxis1 {
  100% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(150px);
  }
}

@keyframes yAxis2 {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-80px);
  }
  100% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(70px);
  }
}

@keyframes xAxis2 {
  100% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(-120px);
  }
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>

  <div class="bag">
    <div class="dot dot1"></div>
    <div class="dot dot2"></div>
    <div class="mask"></div>
  </div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...