当我们滚动&Div来到Windows中间位置

animate my div when we scroll & div come windows middle position

本文关键字：Windows 中间 位置 来到 Div 我们 滚动      更新时间：2023-09-26

我需要一个jquery/js功能，通过它，当用户滚动页面时，某个div出现在中间位置，然后我的div慢慢fadeInUp。我不期望精确，但至少是最接近的。当它向上滚动或向下滚动时，这两个时间都应该被动画化。

我可以给动画效果，但如何窗口的中间位置将发生，我不能。我已经厌倦了尝试。

我的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到达窗口/页面中间位置

也许这能帮上忙。确定DIV是否位于屏幕中间的示例:

演示: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
}

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

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

$(window).height()将给出窗口的总高度，因此$(window).height()/2会给你窗口的中间位置

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

但这失败了，因为我们不能得到精确的滚动位置大于或小于当前滚动位置，所以尝试考虑一些偏移长度，如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>

希望能有所帮助。

相关文章：