javascript - 仅在视口(viewport)中可见的元素上添加和删除 CSS 动画

标签 javascript jquery css

当 div 在视口(viewport)中时，我希望在 .caption 上有一个流畅的 css translate 动画，并在 时将其删除>div 不在视口(viewport)中。

我已经添加了一个动画，但不知何故我没有得到我想要的。 滚动到最后以获得更好的理解。

这是片段:

$(function() { 
  var scroll = $("#js-slideContainer").scrollLeft();
    if (scroll >= 0) {
    $('#animateBtn').click(function(){
    $('.section-parent').addClass('half');
    // Smooth Scroll
    $('#js-slideContainer').niceScroll({
      cursorwidth: "0px",
      cursorborder: "5px solid transparent",
      scrollspeed: 260,
      smoothscroll: true
    });
  });
}
   
var lastPos = 0;
var stransform = 0;
$("#js-slideContainer").scroll(function() {
    var currPos = $("#js-slideContainer").scrollLeft();
    if (currPos == 0) {
      $('.section-parent').removeClass('half');
    } else {
      $('.section-parent').addClass('half');
    }
    if (lastPos < currPos) {
        stransform ++ ;
        stransform = stransform + 2 ;
        var srotate = "translateX(-" + stransform + "px)";
        $('.caption').css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
    }
    if (lastPos > currPos) {
        stransform -- ;
        stransform = stransform - 2 ;
        var srotate = "translateX(-" + stransform + "px)";
        $('.caption').css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
    }
    lastPos = currPos;
});



    // Custom Cursor
      var follower, init, mouseX, mouseY, positionElement, printout, timer;
      follower = document.getElementById('follower');
      printout = document.getElementById('printout');
      mouseX = (function(_this) {
        return function(event) {
          return event.clientX;
        };
      })(this);
      mouseY = (function(_this) {
        return function(event) {
          return event.clientY;
        };
      })(this);
      positionElement = (function(_this) {
        return function(event) {
          var mouse;
          mouse = {
            x: mouseX(event),
            y: mouseY(event)
          };
          follower.style.top = mouse.y + 'px';
          return follower.style.left = mouse.x + 'px';
        };
      })(this);
      timer = false;
      window.onmousemove = init = (function(_this) {
        return function(event) {
          var _event;
          _event = event;
          return timer = setTimeout(function() {
            return positionElement(_event);
          }, 1);
        };
      })(this);
});
* {
	box-sizing: border-box;
}
/**:before, *:after {
	content: "";
	display: table;
}*/
html, body {
	height: 100%;
	width: 100%;
}
body {
	padding: 100px;
	margin: 0;
	background: #e2e1dc;
}
::-webkit-scrollbar {
  display: none;
}
.card {
  /*display: flex;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;*/

  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /*scroll-behavior: smooth;*/
}
.section-parent {
  width: 87.5vw;
  height: calc(100vh - 12.5vw);
  margin-right: 6.25vw;
  margin-bottom: 0;
  transition: width 1.6s cubic-bezier(.73,.01,.36,.99);
  position: relative;
  z-index: 2;
  /*will-change: width;*/
  flex: 0 0 auto;
}
.section-bg {
  background: url("https://via.placeholder.com/700x300") center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.half {
  width: 49.7792vh;
}
.section {
  /*min-height: calc( 100vh - 5vh );*/
  width: calc( 100vw - 6.25vw );
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-right: 6.25vw;
}
.grey {
  background-color: #bfbeb7;
}
.green {
	background-color: green;
}
.white-smoke {
  background-color: whitesmoke;
}

.caption {
  text-align: center;
  transition: 0.5s;
}




/*** Cursor ***/
html {
  cursor: none;
}
#follower {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  pointer-events: none;
}
#follower #circle1 {
  position: absolute;
  -webkit-animation: pulse 2s infinite; /* Chrome, Safari, Opera */
  animation: pulse 2s infinite;
  background: #fff;
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
#follower #circle2 {
  position: absolute;
  -webkit-animation: pulse 4s infinite; /* Chrome, Safari, Opera */
  animation: pulse 4s infinite;
  background: rgba(142, 86, 1, 0.51);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
@-moz-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-o-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://nicescroll.areaaperta.com/wp-content/plugins/jnicescroll/js/jquery.nicescroll.min.js"></script>
<!-- Custom Cursor -->  
<div id="follower">
  <div id="circle1"></div>
  <div id="circle2"></div>
</div>
<!-- Custom Cursor Ends -->


<div class="card" id="js-slideContainer">
  <div class="section-parent">
    <div class="section-bg">
      <button type="button" id="animateBtn" class="animateBtn">Click Here</button>
    </div>   
  </div>
  <div class="section grey" id="second">
    <div class="caption box">
      <h2>Some Heading</h2>
      <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</P>
    </div>
  </div>  
  <div class="section white-smoke">
    <div class="caption box">
      <h2>Other Heading</h2>
      <P>Error explicabo architecto iure, numquam quisquam dolores itaque quos aliquid laudantium eaque, voluptas.</P>
    </div>
  </div> 
</div>
  

<script src="js/jquery-1.10.2.js"></script>
<!-- <script src="js/jquery.mousewheel.js"></script> -->
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

引用网站:villafeltrinelli

最佳答案

您可以使用 getBoundingClientRect 检测元素何时进入或退出视口(viewport):https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

但我在您的代码中看到的主要障碍是您对所有 .caption 元素使用相同的 stransform 变量。因此，当第二个元素出现时，它采用第一个元素已经递增的 translateX 值，而不是从 0 开始。

一个解决方案是添加一个条件来在新元素进入视口(viewport)时重置 stransform 变量:https://codepen.io/pen/jdzMVa

关于javascript - 仅在视口(viewport)中可见的元素上添加和删除 CSS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54490953/

上一篇：倒计时之前/之后的 Javascript 动画

下一篇：html - CSS 位置未按预期工作。如何解决？

相关文章：

javascript - Angular2 QueryList 基于元素类

html - 如何使用 CSS 导航创建子菜单？

javascript - 从 JSON 字符串中提取嵌套的 <a> 元素

javascript - 我可以仅返回状态对象的一部分而不是整个状态对象的新副本吗

javascript - 如何判断一个字段是否有焦点？

JQuery、XML 和标签名称中的句点

jquery - css/jQuery 在多个 li ie7 上覆盖 div

html - 旋转木马不适用于 html

css - 如何在 primefaces 的北方布局下隐藏空白区域？

javascript - Safari 9 中后退按钮后触发 JQuery/Javascript

©2024 IT工具网  联系我们