Question

我正在尝试构建一个基于视差的页面。我根据用户点击链接时的元素移动，但是当div不仅在点击功能上达到TOP时我想要触发其他动画。我如何获得＃circ1，＃circ2，＃circ3和＃circ4在点击时开始动画，以及当#english-channel到达时

$('a.english-channel').click(function(){
    $('html, body').animate({
        scrollTop:$('#english-channel').offset().top
    }, 1000, function() {
        parallaxScroll(); // Callback is required for iOS
    });
        $(function(){
            $('#circ1').delay(1200).animate({
            width: '150px',
            height: '150px',
            opacity: '1.0'
            },500);
            $('#circ2').delay(1400).animate({
            width: '300px',
            height: '300px',
            opacity: '1.0'
            },400);
            $('#circ3').delay(1600).animate({
            width: '750px',
            height: '750px',
            opacity: '1.0'
            },300);
            $('#circ4').delay(1800).animate({
            width: '1350px',
            height: '923px',
            opacity: '1.0'
            },200);
        });
    return false;
});

Answer 1

您必须在项目中使用waypoint.js来跟踪网页中的元素。所以每当他们进入窗口时，它就会触发一些动作

例如，您希望＃circ1是动画的，您应该以这种方式执行此操作

    $("#circ1").waypoint(function(event, direction) {
            $('#circ1').delay(1200).animate({
            width: '150px',
            height: '150px',
            opacity: '1.0'
            },500);
    });

祝你好运

Answer 2

您最好使用诸如Skrollr.js之类的JavaScript库。

您可以更好地控制动画和时间。

以下是一些帮助您入门的教程：

当点击特定ID到达窗口顶部时触发ID

2 个答案: