代码之家 › 专栏 › 技术社区 › ItFreak

在视窗中可见时设置Javascript动画

jquery javascript

ItFreak · 技术社区 · 7 年前

我有下面的HTML结构和相应的JavaScript。我想制作 .half-width-text , .list-div .list-div2 .
因此,我编写了JavaScript。我用了 container
有人能帮我吗?
更新:
https://codepen.io/anon/pen/MqMeKE

(function($) {
  $.fn.visible = function(partial) {

    var $t = $(this),
      $w = $(window),
      viewTop = $w.scrollTop(),
      viewBottom = viewTop + $w.height(),
      _top = $t.offset().top,
      _bottom = _top + $t.height(),
      compareTop = partial === true ? _bottom : _top,
      compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };

})(jQuery);

var win = $(window);

var allModifications = $(".container");


//make all elements visible that are directly visible
allModifications.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.find(".half-width-text").addClass("open");
    el.find(".list-div ul li").addClass("animate");
  }
});


//make elements visible that get scrolled into the viewport
win.scroll(function(event) {
  var current = 5;
  var current2 = 1;
  allModifications.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.find(".half-width-text").addClass("open");
      el.find(".list-div ul li").each(function() {
        $(this).addClass("animate").css("animation-delay", current + 's');
        current++;
      });
      el.find(".list-div2 ul li").each(function() {
        $(this).addClass("animate").css("animation-delay", current2 + 's');
        current2++;
      });
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="full-width">
    <iframe class="video-iframe fullsize"></iframe>
    <a href="#section2">
      <span class="dot">
            <i class="arrow-down"></i>
          </span>
    </a>
  </div>
  <div class="half-width" id="section2">
    <div class="half-width-content">
      <h1></h1>
      <div class="half-width-text">

        <div class="text-content">
          <p>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="instagram-slideshow" id="1">
        <img class="slide">
      </div>
    </div>
  </div>
  <div class="half-width section3">
    <div class="half-width-content">
      <div class="instagram-slideshow" id="2">
        <img class="slide">
      </div>
    </div>
  </div>
  <div class="half-width section3">
    <div class="half-width-content">
      <div class="middle-text">
        <h2></h2>
        <p></p>
        <div class="list-div">
          <ul class="items-list" id="list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <img class="hand-writing-img">
      </div>
    </div>
  </div>
  <div class="full-width section3">
    <div class="content">
      <div class="third-parent">
        <div class="third" id="one">
          <img>
        </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1></h1>
            <div class="list-div2">
              <ul class="items-list2" id="list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="third" id="three">
          <img>
        </div>
      </div>
    </div>
  </div>
</div>

0 回复 | 直到 7 年前