ppt图片上下滚动播放效果:「滚动绽放」页面滚动时逐渐展示/隐藏元素-PPT教程-PPT教程网

下面的是PPT教程网给你带来的相关内容：

ppt图片上下滚动播放效果:「滚动绽放」页面滚动时逐渐展示/隐藏元素

本文将介绍如何使用HTML、CSS和代码实现页面在滚动时元素逐渐出现/隐藏。这个动画效果会在用户滚动/隐藏页面时从不同方向逐渐显示出一组彩色方块️‍

HTML结构

首先，HTML部分包含了一个元素和一个名为的容器，其中包含了多个box元素。别忘了引入外部CSS和JS文件；

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  
  <title>Scroll To Reveal Animationtitle>
head>
<body>
  <section>
    <h2>Scroll To Revealh2>
  section>
  <div class="container">
    
    
  div>
  
  <script src="./index.js">script>
body>
html>

CSS样式

ppt图片上下滚动播放效果

接着，设置一些基本的全局样式和居中布局、背景颜色和文字颜色；

这些选择器定义了方块元素的初始状态，使它们在页面加载时处于隐藏状态。并且预设了.box.激活状态的样式。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
body {
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
  background-color: #111;
  color: #fff;
  overflow-x: hidden;
}
section {
  min-height: 100vh;
  display: flex;
  justify-content:center;
  align-items: center;
}
section h2 {
  font-size: 8vw;
  font-weight: 500;
}
.container {
  width: 700px;
  position: relative;
  top: -200px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.container .box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  top: 50vh;
  transition: .5s;
}
.container .box:nth-child(3n + 1) {
  transform: translate(-400px, 0) scale(0);
}
.container .box:nth-child(3n + 2) {
  transform: translate(0, 400px) scale(0);
}
.container .box:nth-child(3n + 3) { 
  transform: translate(400px, 0) scale(0);
}
.container .box.active {
  transform: translate(0, 0) scale(1);
}

表现

ppt图片上下滚动播放效果

实现

ppt图片上下滚动播放效果

最后，使用生成每个方块并设置了随机的背景颜色，随后将它们添加到容器中ppt图片上下滚动播放效果:「滚动绽放」页面滚动时逐渐展示/隐藏元素，通过监听滚动事件，使方块在用户滚动页面时根据位置添加类名否，应用CSS样式实现逐渐显示或隐藏；

/**创建随机色 */
const randomColor = () => {
  const chars = "1234567890abcdef",
        colorLegh = 6;
  
  let color = '#';
  for (let i = 0; i < colorLegh; i++) {
    const p = Math.floor(Math.random() * chars.length);
    color += chars.substring(p, p + 1);
  };
  return color;
};
/**创建DOM */
const container = document.querySelector('.container'),
      fragment = document.createDocumentFragment();
for (let i = 0; i < 60; i++) {
  const box = document.createElement('div');
  box.style.backgroundColor = randomColor();
  box.classList.add('box');
  fragment.appendChild(box);
};
container.appendChild(fragment);
/**创建动画 */
const randomColorBlock = document.querySelectorAll('.box');
const scrollTrigger = () => { 
  randomColorBlock.forEach((box) => {
    if (box.offsetTop <= window.scrollY) {
      box.classList.add('active')
    } else {
      box.classList.remove('active')
    }
  });  
};
window.addEventListener('scroll', scrollTrigger);

总结

通过本篇文章的详细介绍，相信能够帮助你更好地使用CSS和来创建一个滚动显示元素动画ppt图片上下滚动播放效果，从而理解掌握和应用这个效果。通过设置合适的样式和脚本来控制元素的显示和隐藏为网页提供了生动和吸引力。

希望这篇文章对你在开发类似交互动画效果时有所帮助！如果你对这个案列还有任何问题，欢迎在评论区留言或联系(私信)我。码字不易，不要忘了三连鼓励，谢谢阅读，Happy ！

源码我放在了，里面还有一些酷炫的效果、动画案列，喜欢的话不要忘了不迷路！

感谢你支持pptjcw.com网，我们将努力持续给你带路更多优秀实用教程！

提示：如果您觉得本文不错，请点击分享给您的好友！谢谢

本文链接地址：http://www.pptjcw.com/PPTJC/2024/0221/182377.html

上一篇：ppt英文翻译:PPT翻译格式真的让人很头疼，有没有一键翻译完好保留格式的工具呢？下一篇：ppt英文全称怎么读:等等的英文etc怎么读？etc全称是什么？

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

相关文章阅读