5

スクロールして表示したときにアニメーションを発生させる方法を見つけようとしましたが、運がほとんどまたはまったくありません。JQuery プラグイン「Waypoints」を見つけましたが、それを利用するスキルがありません。ビューにスクロールするとアニメーション化される CSS3 キーフレームを使用しようとしています。私は突破口を開き、達成したいものに近づいていますが、それは私が望んでいる場所ではありません. 画面の右側にアイテムをバウンスさせる「bounceinright」という名前のクラスがあります。そのための CSS は次のとおりです。

@-webkit-keyframes bounceinright {
0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
}

60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
}

80% {
    -webkit-transform: translateX(10px);
}

100% {
    -webkit-transform: translateX(0);
}
}

@-moz-keyframes bounceinright {
0% {
    opacity: 0;
    -moz-transform: translateX(2000px);
}

60% {
    opacity: 1;
    -moz-transform: translateX(-30px);
}

80% {
    -moz-transform: translateX(10px);
}

100% {
    -moz-transform: translateX(0);
}
}

@-o-keyframes bounceinright {
-o-transform: translateX(2000px);
}

60% {
opacity: 1;
-o-transform: translateX(-30px);
}

80% {
-o-transform: translateX(10px);
}

100% {
-o-transform: translateX(0);
}   
}

@keyframes bounceinright {
0% {
    opacity: 0;
    transform: translateX(2000px);
}

60% {
    opacity: 1;
    transform: translateX(-30px);
}

80% {
    transform: translateX(10px);
}

100% {
    transform: translateX(0);
}
 }

.bounceinright {
display: none;
}

.bounceinright.start {
-webkit-animation: bounceinright 1s ease-out forwards;
-moz-animation: bounceinright 1s ease-out forwards;
-ms-animation: bounceinright 1s ease-out forwards;
-o-animation: bounceinright 1s ease-out forwards;
animation: eigbounceinrighthty 1s ease-out forwards;
display: block;
}

そして、スクロールされたときに「開始」クラスでアニメーションをトリガーする小さな JQuery スニペットがあります。

 ////////////////////////////////
 //scroll events
 ////////////////////////////////       
function isElementInViewport(elem) {
var $elem = $(elem);

// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();

// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();

return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.row .wpb_content_element');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

私の問題は、「bounceinright」を含む1つのアイテムがスクロールされると、同じクラスのすべてのアイテムがトリガーされることです。それらを個別に、しかし同じクラスでトリガーする方法があるかどうか疑問に思っていました。どんな助けでも大歓迎です。

ありがとうございました！

4

1 に答える 1

2

に変更checkAnimation()します

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.row .wpb_content_element');

    $elem.each(function(){
        var $singleElement = $(this);
        // If the animation has already been started
        if ($singleElement.hasClass('start')) return;

        if (isElementInViewport($singleElement)) {
            // Start the animation
            $singleElement.addClass('start');
        }
    });
}
于 2013-05-30T21:34:25.663 に答える