Question

所以我一直在用JS，CSS，HTML学习动画，我试图学习如何为类似于this的滚动设置动画

我曾尝试使用jQuery-SlotMachine虽然我很失落，即使使用旁边的JS代码也会执行操作。有人可以解释我如何用相同的API或其他API编写代码，或者用vanilla JS编写代码。

Answer 1

您可以使用一些小的javascript代码尝试CSS动画来控制自定义动画状态。

我认为我的样本可以帮到你。

$(document).ready(function() {
  let $elements = $(".element");
  let $transitionList = $(".transition-list");

  let currentIndex = 0;

  setInterval(function() {
    $transitionList.css(
      "transform",
      "translateY(" + currentIndex * -250 + "px)"
    );
    currentIndex++;
    if ($elements.length - 1 < currentIndex) {
      currentIndex = 0;
    }
  }, 750);
});

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  width: 50%;
}

.center {
  align-items: center;
  justify-content: center;
}

.border-container {
  border: 25px solid #dfe0a0ed;
  border-radius: 30%;
  overflow: hidden;
}

.transition-list {
  width: 250px;
  height: 250px; 
  background-color: #fefefe;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.1, 0.2, 0.7, 1);    
}

.element {
  background-color: #6f6f6f;
  width: 250px;
  height: 250px;
  font-size: 188px;
  display: flex;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="conainer center">
  <div class="border-container">
<div class="transition-list">
  <div class="element center"><i class="fas fa-clock"></i></div>
  <div class="element center"><i class="fas fa-unlock"></i></div>
  <div class="element center"><i class="fas fa-th"></i></div>
  <div class="element center"><i class="fas fa-american-sign-language-interpreting"></i></div>
</div>
  </div>
</div>

Answer 2

1。首先，您必须拥有一个容器：

<div id="theContainer" class="container">
</div>

2。很好，现在让我们放一些图像。

<div id="theContainer" class="container">
   <img src="https://picsum.photos/100/?random">
   <img src="https://picsum.photos/100/?random">
   <img src="https://picsum.photos/100/?random">
</div>

3。现在，让我们添加两个按钮来移动它：

<div id="theContainer" class="container">
   <img src="https://picsum.photos/100/?image=0">
   <img src="https://picsum.photos/100/?image=1">
   <img src="https://picsum.photos/100/?image=2">
</div>
<button id="prev" value="Previous">
<button id="next" value="Next">

4。甜蜜！我们得到了HTML，现在我们只需要添加我们的Javascript：

// Set up previous button
const btnPrev = document.querySelector('#prev');

// Set up Next Button
const btnNext = document.querySelector('#next');

// Set up our container
const el = document.querySelector('#theContainer');

// Create new SlotMachine
const slot = new SlotMachine(el, {});

// Add Event Listeners or do things when we click it
btnPrev.addEventListener('click', () => slot.prev());
btnNext.addEventListener('click', () => slot.next());

<link href="https://cdn.jsdelivr.net/npm/jquery-slotmachine@4.0.0/dist/jquery.slotmachine.min.css"></style>

<div id="theContainer" class="container" style="width: 100px; height: 100px">
  <div><img src="https://picsum.photos/100/?image=0"></div>
  <div><img src="https://picsum.photos/100/?image=1"></div>
  <div><img src="https://picsum.photos/100/?image=2"></div>
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

<!-- Add script files -->
<script src="https://cdn.jsdelivr.net/npm/jquery-slotmachine@4.0.0/dist/slotmachine.min.js"></script>

5. 注：

你必须加一个宽度＆amp;高度为#theContainer。（style="width: 100px; height: 100px"）
图像必须被块元素包围。（<div><img /></div>）

如何动画流畅的动画

2 个答案: