向下滚动时幻灯片动画不起作用

问题描述 投票：0回答：2

我希望当用户滚动到网站动画触发的那部分时，意味着当该部分进入用户视图时动画就会发生，这里我谈论的是 div 类第 2 部分，第 1 部分工作正常，但第 2 部分不工作，意味着动画在网站加载时起作用，但当时用户正在查看第 1 部分，当滚动到第 2 部分时，没有任何反应，因为加载网站时动画已经发生了。所以请帮助我为什么它不起作用。

代码片段

// Function to handle animation when elements are in view
const handleAnimation = () => {
  const elements = document.querySelectorAll('.animate-slide-left-bg, .animate-slide-left, .animate-slide-right, .animate-slide-up');

  elements.forEach(element => {
    // Check if the element is in view
    const rect = element.getBoundingClientRect();
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;

    if (rect.top >= 0 && rect.bottom <= windowHeight) {
      // If the element is in view, add the animation class
      element.classList.add('animate-visible');
    }
  });
};

// Add event listener for scroll event
window.addEventListener('scroll', handleAnimation);

// Trigger animation on page load
handleAnimation();
.part2 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff6f2;
  display: flex;
  flex-direction: column;
  font-family: 'Baskerville Old Face', serif;
  overflow: hidden;
  /* Hide content overflow */
}

.part2b {
  display: flex;
  flex-direction: row;
  position: relative;
}

.part2a {
  display: flex;
  flex-direction: column;
}

.qq {
  font-size: 35px;
  margin-top: 50px;
  margin-left: 60px;
  opacity: 0;
  transition: opacity 1s ease;
}

.q2 {
  font-size: 25px;
  margin-left: 60px;
  margin-top: 100px;
  height: fit-content;
  width: fit-content;
  opacity: 0;
  transition: opacity 1s ease;
}

.q3 {
  font-size: 80px;
  margin-left: 70px;
  margin-top: 20px;
  opacity: 0;
  transition: opacity 1s ease;
}

.bg3 {
  width: 50%;
  height: auto;
  margin-left: auto;
  /* Align the image to the right edge of the screen */
  opacity: 0;
  transition: opacity 1s ease;
}

.circle-image {
  position: absolute;
  top: 40%;
  /* Adjust to your desired position */
  left: 65%;
  /* Adjust to your desired position */
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  border: 17px solid #fff6f2;
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease;
}

.animate-slide-right {
  animation: slideRight 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-slide-left {
  animation: slideLeft 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-slide-up {
  animation: slideUp 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-slide-right-circle {
  animation: slideRight 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-slide-left-bg {
  animation: slideLeft 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

@keyframes slideRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
<body>
  <div class="part1">
    <div class="A1">
      <div class="tt">
        <p class="txt2">Creative Portfolio</p>
      </div>
      <div class="pv">
        <p class="txt">PREMIUM<br> VIRTUAL ASSIST</p>
        <p class="txt1">Elevating Your Efficiency</p>
      </div>
    </div>
    <div class="A1">
      <img src="{% static 'virtualAssist/bg1.jpg' %}" alt="Background Image" class="image">
    </div>
    <div class="logo-container">
      <img src="{% static 'virtualAssist/logo.jpeg' %}" alt="Logo" class="logo">
    </div>
  </div>
  <div class="part2">
    <img src="{% static 'virtualAssist/bg4.jpg' %}" alt="Circle Image" class="circle-image animate-slide-up">
    <div class="part2b">
      <div class="part2a">
        <div class="qq animate-slide-left-bg ">Introducing</div>
        <div class="q2 animate-slide-left-bg">Premium Virtual Assist stands out for its<br>professional, sophisticated, and efficient <br>approach, making it the go-to choice for clients in<br>need of exceptional virtual assistant services</div>
      </div>
      <div class="bg3 animate-slide-right">
        <img src="{% static 'virtualAssist/bg3.jpg' %}" alt="Background Image" class="image">
      </div>
    </div>
    <div class="q3 animate-slide-up">
      WELCOME TO MY </br>
      PORTFOLIO
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

javascript html css animation slide
2个回答
0
投票

完整代码：

// Function to handle animation when elements are in view
const handleAnimation = () => {
  const elements = document.querySelectorAll('.animate-slide-left-bg, .animate-slide-left, .animate-slide-right, .animate-slide-up');

  elements.forEach(element => {
    // Check if the element is in view
    const rect = element.getBoundingClientRect();
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;

    if ((rect.top >= 0 || rect.height >= windowHeight) && rect.bottom <= windowHeight) {
      // If the element is in view, add the animation class
      element.classList.add('animate-visible');
    }
  });
};

// Add event listener for scroll event
window.addEventListener('scroll', handleAnimation);

// Add event listener for resize event
window.addEventListener('resize', handleAnimation);

// Trigger animation on page load
window.addEventListener('load', handleAnimation);
.part2 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff6f2;
  display: flex;
  flex-direction: column;
  font-family: 'Baskerville Old Face', serif;
  overflow: hidden;
  /* Hide content overflow */
}

.part2b {
  display: flex;
  flex-direction: row;
  position: relative;
}

.part2a {
  display: flex;
  flex-direction: column;
}

.qq {
  font-size: 35px;
  margin-top: 50px;
  margin-left: 60px;
  opacity: 0;
  transition: opacity 1s ease;
}

.q2 {
  font-size: 25px;
  margin-left: 60px;
  margin-top: 100px;
  height: fit-content;
  width: fit-content;
  opacity: 0;
  transition: opacity 1s ease;
}

.q3 {
  font-size: 80px;
  margin-left: 70px;
  margin-top: 20px;
  opacity: 0;
  transition: opacity 1s ease;
}

.bg3 {
  width: 50%;
  height: auto;
  margin-left: auto;
  /* Align the image to the right edge of the screen */
  opacity: 0;
  transition: opacity 1s ease;
}

.circle-image {
  position: absolute;
  top: 40%;
  /* Adjust to your desired position */
  left: 65%;
  /* Adjust to your desired position */
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  border: 17px solid #fff6f2;
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease;
}

.animate-slide-right {
  animation: 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-visible.animate-slide-right {
  animation-name: slideRight;
}

.animate-slide-left {
  animation: 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-visible.animate-slide-left {
  animation-name: slideLeft;
}

.animate-slide-up {
  animation: 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-visible.animate-slide-up {
  animation-name: slideUp;
}

.animate-slide-right-circle {
  animation: 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-visible.animate-slide-right-circle {
  animation-name: slideRight;
}

.animate-slide-left-bg {
  animation: 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-visible.animate-slide-left-bg {
  animation-name: slideLeft;
}

@keyframes slideRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
<div class="part1">
  <div class="A1">
    <div class="tt">
      <p class="txt2">Creative Portfolio</p>
    </div>
    <div class="pv">
      <p class="txt">PREMIUM<br> VIRTUAL ASSIST</p>
      <p class="txt1">Elevating Your Efficiency</p>
    </div>
  </div>
  <div class="A1">
    <img src="{% static 'virtualAssist/bg1.jpg' %}" alt="Background Image" class="image">
  </div>
  <div class="logo-container">
    <img src="{% static 'virtualAssist/logo.jpeg' %}" alt="Logo" class="logo">
  </div>
</div>
<div class="part2">
  <img src="{% static 'virtualAssist/bg4.jpg' %}" alt="Circle Image" class="circle-image animate-slide-up">
  <div class="part2b">
    <div class="part2a">
      <div class="qq animate-slide-left-bg ">Introducing</div>
      <div class="q2 animate-slide-left-bg">Premium Virtual Assist stands out for its<br>professional, sophisticated, and efficient <br>approach, making it the go-to choice for clients in<br>need of exceptional virtual assistant services</div>
    </div>
    <div class="bg3 animate-slide-right">
      <img src="{% static 'virtualAssist/bg3.jpg' %}" alt="Background Image" class="image">
    </div>
  </div>
  <div class="q3 animate-slide-up">
    WELCOME TO MY </br>
    PORTFOLIO
  </div>
</div>

所有动画都会立即播放，因为定义如下时它们的状态为 

running
：

.animate-slide-right {
  animation: slideRight 1s forwards;
}

如果更改为：

.animate-slide-right {
  animation: 1s forwards;
}
.animate-visible.animate-slide-right {
  animation-name: slideRight;
}

动画仅当元素具有 

animate-visible
类时才会开始。

查看检查条件

rect.top >= 0 && rect.bottom <= windowHeight

应该延长

(rect.top >= 0 || rect.height >= windowHeight) && rect.bottom <= windowHeight

确保高度过高的元素也被激活。

最好将 

handleAnimation()
的初始调用更改为 
window.addEventListener('load', handleAnimation)
，这样第一个动画就不会太快开始。添加 
window.addEventListener('resize', handleAnimation)
将提高响应能力。

0
投票

类似这样的事情。

  • 获取元素的
    getBoundingClientRect()
    。
  • 使用 
    scroll
    事件跟踪滚动。
  • 当
    scrollY
    到达
    y
    的
    getBoundingClientRect()
    时，将动画类添加到元素。

在这里，我已经用这种方式处理了WELCOME TO MY PORTFOLIO文本。

let elem = document.getElementById("id1");
let rect = elem.getBoundingClientRect();

window.addEventListener('scroll', () => {
  if (window.scrollY > rect.y) {
    welcome.classList.add("q3", "animate-slide-up");
  }
});
.part2 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff6f2;
  display: flex;
  flex-direction: column;
  font-family: 'Baskerville Old Face', serif;
  overflow: hidden;
  /* Hide content overflow */
}

.part2b {
  display: flex;
  flex-direction: row;
  position: relative;
}

.part2a {
  display: flex;
  flex-direction: column;
}

.qq {
  font-size: 35px;
  margin-top: 50px;
  margin-left: 60px;
  opacity: 0;
  transition: opacity 1s ease;
}

.q2 {
  font-size: 25px;
  margin-left: 60px;
  margin-top: 100px;
  height: fit-content;
  width: fit-content;
  opacity: 0;
  transition: opacity 1s ease;
}

.q3 {
  font-size: 80px;
  margin-left: 70px;
  margin-top: 20px;
  opacity: 0;
  transition: opacity 1s ease;
}

.bg3 {
  width: 50%;
  height: auto;
  margin-left: auto;
  /* Align the image to the right edge of the screen */
  opacity: 0;
  transition: opacity 1s ease;
}

.circle-image {
  position: absolute;
  top: 40%;
  /* Adjust to your desired position */
  left: 65%;
  /* Adjust to your desired position */
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  border: 17px solid #fff6f2;
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease;
}

.animate-slide-right {
  animation: slideRight 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-slide-left {
  animation: slideLeft 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-slide-up {
  animation: slideUp 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-slide-right-circle {
  animation: slideRight 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

.animate-slide-left-bg {
  animation: slideLeft 1s forwards;
  opacity: 0;
  /* Initially hide the elements */
}

@keyframes slideRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
<div class="part1">
  <div class="A1">
    <div class="tt">
      <p class="txt2">Creative Portfolio</p>
    </div>
    <div class="pv">
      <p class="txt">PREMIUM<br> VIRTUAL ASSIST</p>
      <p class="txt1">Elevating Your Efficiency</p>
    </div>
  </div>
  <div class="A1">
    <img src="{% static 'virtualAssist/bg1.jpg' %}" alt="Background Image" class="image">
  </div>
  <div class="logo-container">
    <img src="{% static 'virtualAssist/logo.jpeg' %}" alt="Logo" class="logo">
  </div>
</div>
<div id="id1" class="part2">
  <img src="{% static 'virtualAssist/bg4.jpg' %}" alt="Circle Image" class="circle-image animate-slide-up">
  <div class="part2b">
    <div class="part2a">
      <div class="qq animate-slide-left-bg ">Introducing</div>
      <div class="q2 animate-slide-left-bg">Premium Virtual Assist stands out for its<br>professional, sophisticated, and efficient <br>approach, making it the go-to choice for clients in<br>need of exceptional virtual assistant services</div>
    </div>
    <div class="bg3 animate-slide-right">
      <img src="{% static 'virtualAssist/bg3.jpg' %}" alt="Background Image" class="image">
    </div>
  </div>
  <div id="welcome" class="">
    WELCOME TO MY PORTFOLIO
  </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.