Добавить и удалить CSS анимацию на элементе, видимом только в view-port - PullRequest
Новая
       1

Добавить и удалить CSS анимацию на элементе, видимом только в view-port

0 голосов
/ 02 февраля 2019

Я хочу плавную css translate анимацию на .caption, когда div находится в порту просмотра, и удалите его, когда div нет в порту просмотра.

У меня естьдобавил анимацию, но почему-то я не получаю именно то, что хочу.Прокрутите до конца, чтобы лучше понять.

Вот фрагмент: 

$(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

1 Ответ

0 голосов
/ 10 февраля 2019

Вы можете определить, когда элемент входит или выходит из области просмотра с помощью getBoundingClientRect: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Но главное препятствие, которое я вижу в вашем коде, состоит в том, что вы используете ту же самую переменную stransform длявсе элементы .caption.Поэтому, когда появляется второй элемент, он принимает значение translateX, уже увеличенное для первого элемента, вместо того, чтобы начинаться с 0.

Решение состоит в добавлении условия для сброса переменной stransform, когдановый элемент входит в область просмотра: https://codepen.io/pen/jdzMVa

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...