原生JS实现下滑到当前模块时左右滑动到位

本文主要是介绍原生JS实现下滑到当前模块时左右滑动到位，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图：

​​​​​​​

源码： 

<div style="height: 1500px;"></div><div class="software-box"><div class="software-container" style="display: flex;"><div class="software-left" style="background-color: pink;width: 50%;height: 200px;"></div><div class="software-right" style="background-color: skyblue;width: 50%;height: 200px;"></div></div>
</div>
<style>/* donghua */.software-left,.software-right {opacity: 0;transform: translateX(-100%);/* 左边的模块初始位置在屏幕左侧外 */transition: transform 1s ease, opacity 1s ease;}.software-right {transform: translateX(100%);/* 右边的模块初始位置在屏幕右侧外 */}.software-box.in-view .software-left {transform: translateX(0);opacity: 1;}.software-box.in-view .software-right {transform: translateX(0);opacity: 1;}
</style>
<script>// 开门动画document.addEventListener('DOMContentLoaded', function () {const softwarebox = document.querySelector('.software-box');const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {softwarebox.classList.add('in-view');} else {softwarebox.classList.remove('in-view');}});}, {threshold: 0.5  // 当模块的50%出现在视口中时触发});observer.observe(softwarebox);});
</script>

这篇关于原生JS实现下滑到当前模块时左右滑动到位的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---