Question

我需要一个jquery / js功能，当用户滚动页面并且某个div进入中间位置时，我的div慢慢淡入淡出。我不指望确切，但至少有一些东西是最接近的。当它是scrollUp或者scrollldown时，两个时间都应该是div的动画。

我可以给出动画效果，但寡妇的中间位置会如何发生，我做不到。我厌倦了尝试。

请帮帮我。我的HTML代码在这里：

   <div class="vts">
        <div class="container top-cut-white">
            <div class="row">
                <div class="animatable fadeInUp">
                    <div class="col-md-6">
                        <h3>AGD Vehicle Tracking System (VTS)</h3>
                        <p>With AGD gps vehicle tracking and asset tracking your mobile workforce need never be out of sight or mind.</p>
                        <br>
                        <h3>Benefits of Vehicle Tracking</h3>
                        <ul>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Real-time visibility of your mobile workforce</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Reduce fuel costs, mileage and emissions</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Increase control of overtime costs</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Boost productivity and workforce utilisation</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Increase customer satisfaction through improved communication</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Obtain detailed insight to help drive your business forward efficiently</li>
                        </ul>
                    </div>
                    <div class="animatable fadeInUp">
                        <div class="col-md-6">
                            <img src="img/agd_vts_software.png" class="img-responsive" alt="agdits">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

我的css代码是：

.animatable {
    visibility: hidden;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}


/* show objects being animated */

.animated {
    visibility: visible;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}
.animated.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    50% {
        opacity: 0.4;
        -webkit-transform: translateY(10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

我的js代码在这里：

<script>
    jQuery(function ($) {

        var doAnimations = function () {
            var offset = $(window).scrollTop() + $(window).height(),
                $animatables = $('.animatable');

            if ($animatables.size() == 0) {
                $(window).off('scroll', doAnimations);
            }
            $animatables.each(function (i) {
                var $animatable = $(this);
                if (($animatable.offset().top + $animatable.height() - 20) < offset) {
                    $animatable.removeClass('animatable').addClass('animated');
                }
            });

        };

        $(window).on('scroll', doAnimations);
        $(window).trigger('scroll');

    });
</script>

这里给出的例子。我需要，当动画div进入windows / page middile位置时会发生动画

Answer 1

也许这会有所帮助。确定DIV是否在屏幕中间的示例：

DEMO：http://jsfiddle.net/msuv4hgc/

<强> HTML：

<div id="middle"></div>
<div id="page">
    <div id="target"></div>   
</div>

<强> CSS：

body{
    padding:0; margin:0;
}
#page{
    padding-top:400px;
    height:2280px;
    z-index:100;
}
#target,#middle{    
    background-color:red;
    height:50px; width:200px;
}
#middle{
    background-color:#000;
    position:fixed; top:400px; left:0;
    height:1px; width:100%;
    z-index:1000;
}

<强> JS：

var middle=0;
var deviation=5;
var $target;
var targetH=0;

$(function(){    
    $(window).scrollTop(200);//## fot test

    $target = $('#target');

    //## calculates the middle of the screen
    targetH = $target.height();    
    var windowH = $(window).height();
    middle= (windowH - targetH)/2;    

    $('#middle').css('top',middle);//## fot test

    //## on scroll event
    $( window ).scroll(function(){
        getPositon();
    })    
})

function getPositon()
{
    //## calculates the relative position of the target
    var topT = $target.offset().top;    
    var topW = $(window).scrollTop();
    var top = topT - topW;

    //## calculates the relative position of the target middle
    var middleT=top+targetH/2;

    var animate=false;//## fot test
    if(middleT + deviation > middle && middleT - deviation < middle)
    {   
        //########
        //ANIMATE
        //########
        animate=true;//## fot test
    }        
    $target.text('ANIMATION: '+animate);//## fot test

}

Answer 2

尝试更改脚本中的if条件以反映您的逻辑：

$(window).scrollTop()给出当前滚动位置

$(window).height()会给你窗口的总高度，所以 $(window).height()/2将为您提供窗口的中间位置

所以你的逻辑应该是：动画if $(window).scrollTop() > $(window).height()/2 and $(window).scrollTop() < $(window).height()/2

但这失败了，因为我们无法确切地将滚动位置设置得比当前的scoll位置更大和更小，所以尝试考虑一些偏移长度，例如20或10甚至5，现在你的逻辑将是：

if($(window).scrollTop()-10 < $(window).height()/2 && $(window).scrollTop()+10 > $(window).height()/2)

所以你的JS代码是：

<script>
    jQuery(function ($) {

        var doAnimations = function () {
            var offset = $(window).scrollTop() + $(window).height(),
                $animatables = $('.animatable');

            if ($animatables.size() == 0) {
                $(window).off('scroll', doAnimations);
            }
            $animatables.each(function (i) {
                var $animatable = $(this);
                    if($(window).scrollTop()-15 < $(window).height()/2 && $(window).scrollTop()+15 > $(window).height()/2) {
                    $animatable.removeClass('animatable').addClass('animated');
                }
            });

        };

        $(window).on('scroll', doAnimations);
        $(window).trigger('scroll');

    });
</script>

希望它有所帮助。

当我们滚动和放大时，动画我的div div来到寡妇的中间位置

2 个答案: