Question

我正在创建一个动画很少的网站，下面是从左到右显示图像的javascript和css片段

＆＃13;

^!(\w+)\s+([\w,\s]+\w+)$|^!(\w+)$
  --#1-   -----#2------    --#3-

＆＃13;

    var i = 0;
    var interval = setInterval(function () {
    $('.mask').width(i + "%");
    i++;
    if (i == 101) {
    clearInterval(interval);
    }
    }, 20);

＆＃13;

    .mask {
      background:white;
      max-width: 640px;
      z-index:1;
      height: 426px;
      position: relative;
      overflow: hidden;
    }
    
    .img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

＆＃13;

然后是一个从右到左显示图像的JavaScript。

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="mask">
    <div class="img">
    <img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
    </div>
    </div>

＆＃13;

var i = 0;
    var interval = setInterval(function () {
    $('.mask3').css({ left: -i + "%" });
    i++;
    if (i === 0) {
    clearInterval(interval);
    }
    }, 20);

＆＃13;

    .wrapper {
      width: 640px;
      height: 430px;
      position: relative;
    }
    
    .mask3 {
      position: absolute;
      top: 0;
      left: 0;
      background:white;
      width: 100%;
      height: 100%;
      z-index:1;
    }
    
    .img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index:0;
    }

＆＃13;

现在我正在尝试仅在显示div时加载此动画，或者用户向下滚动到特定div，然后动画将回滚。

我尝试了很少的脚本，但所有脚本都被引导使用if else语句，虽然我无法选择任何有效的内容，但有人可以帮我解决这个问题。

Answer 1

这是一个非常粗略的答案，但如果你愿意，你可以这样做。您仍然需要更多地处理动画功能，使其隐藏，然后根据您的需要进行显示。

var elem = $('.img'); //use a better identifier like an id.
var counter = 0
elem.hide();

function myAnimation() {
    elem.show();
    var i = 0;
    var interval = setInterval(function () {
    $('.mask').width(i + "%");
    i++;
    if (i == 101) {
    clearInterval(interval);
    }
    }, 20);
    counter++;
}

$(window).scroll(function(){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && counter < 1) {
        myAnimation();
    }
});

计数器基本上是为它设置一次动画，因为你将在每个滚动条上触发此动画。

元素可见时运行动画 - 自定义javascript

1 个答案: