DEMO

Question

HTML元素在屏幕上显示后如何设置动画？

我在堆栈溢出tour page上找到了一个示例，当您向下滚动足够远时，信息元素会滑入页面。这背后的诀窍是什么？

Answer 1

您需要使用javascript来检测视口的位置，并在视口可见时将其激活。

您可以使用javascript检测并执行转换，然后使用css或javascript来制作动画。

有许多基于jquery的脚本可用于实现此目的。这是一个例子：

DEMO

1。创建一个Html元素，你要检查它是否在视口中。

<div class="demo"></div>

2. 在文档末尾加载jQuery javascript库和jQuery Viewport Checker插件。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="viewportchecker.js"></script>

3. 在此元素上调用插件并在javascript中执行某些操作。

<script>
$(document).ready(function(){
$('.demo').viewportChecker({
// Class to add to the elements when they are visible
classToAdd: 'visible',

// The offset of the elements (let them appear earlier or later)
offset: 100,

// Add the possibility to remove the class if the elements are not visible
repeat: false,

 // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
callbackFunction: function(elem, action){}
});
});
</script>

DOWNLOAD THIS SCRIPT

Answer 2

您可以为此使用 intersection Observer。 Intersection Observer API 提供了一种方法来异步观察目标元素与祖先元素或顶级文档视口的交集的变化。

const startAnimation = (entries, observer) => {
  entries.forEach(entry => {
    entry.target.classList.toggle("slide-in-from-right", entry.isIntersecting);
  });
};

const observer = new IntersectionObserver(startAnimation);
const options = { root: null, rootMargin: '0px', threshold: 1 }; 

const elements = document.querySelectorAll('.card');
elements.forEach(el => {
  observer.observe(el, options);
});

.card {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-in-from-right {
  animation: 1.5s ease-out 0s 1 slideInFromRight forwards;
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(0);
  }
}

<div class="card">
  <h2>Card one</h2>
</div>
<div class="card">
  <h2>Card two</h2>
</div>
<div class="card">
  <h2>Card three</h2>
</div>

当元素出现在屏幕上时如何开始动画？

2 个答案:

DEMO

DOWNLOAD THIS SCRIPT