轻量级自定义css动画及动画激活

轻量级自定义css动画及动画激活

在常规项目开发中,对于动画要求明确并数量不多的情况下,并没有必要引入重量级CSS动画库,自定义的动画可以方便精准的满足开发需求。
以下为一个当页面滚动至动画元素位置并激活的简单(位移及模糊)动画样例,并通过不同的CSS类名组合实现动画效果选择:

JS:

//active animation area
jQuery(document).ready(function() {
    if (jQuery(window).width() >= 992) {
        jQuery(window).on('scroll', function() {
            var scrollHeight = jQuery(this).scrollTop();
            jQuery('.c-animation').each(function() {
                var windowHeight = jQuery(window).height(),
                    sectionsOffest = jQuery(this).offset().top;
                sectionsTop = sectionsOffest - windowHeight + 200;
                if (scrollHeight >= sectionsTop || scrollHeight >= sectionsOffest) {
                    jQuery(this).addClass('is-animation');
                }
            });
        });
        jQuery(window).on('load', function() {
            jQuery('.i-animation').each(function() {
                jQuery(this).addClass('is-animation');
            });
        });
    }
});

CSS:

/* 位移动画 */
@media(min-width: 992px) {
    .c-animation,
    .i-animation {
        visibility: hidden;
        transform: translateY(30px);
        opacity: 0;
        transition: 1s cubic-bezier(.215, .61, .355, 1);
        transition-delay: .18s;
        will-change: transform;
    }
    .c-animation.is-animation,
    .i-animation.is-animation {
        visibility: visible;
        transform: translateY(0);
        opacity: 1;
    }
    .o-animation {
        opacity: 0;
        transition: 1s cubic-bezier(.215, .61, .355, 1);
        transition-delay: .18s;
        will-change: transform;
    }

    .o-animation.is-animation {
        opacity: 1;
    }
}
/* 模糊动画 */
@-webkit-keyframes blur {
    0% {
        -webkit-filter: blur(0px) grayscale(100%) brightness(300%);
        -moz-filter: blur(0px) grayscale(100%) brightness(300%);
        -ms-filter: blur(0px) grayscale(100%) brightness(300%);
        filter: blur(0px) grayscale(100%) brightness(300%);
    }
    50% {
        -webkit-filter: blur(0px) grayscale(50%) brightness(150%);
        -moz-filter: blur(0px) grayscale(50%) brightness(150%);
        -ms-filter: blur(0px) grayscale(50%) brightness(150%);
        filter: blur(0px) grayscale(50%) brightness(150%);
    }
    100% {
        -webkit-filter: blur(0px) grayscale(0%) brightness(100%);
        -moz-filter: blur(0px) grayscale(0%) brightness(100%);
        -ms-filter: blur(0px) grayscale(0%) brightness(100%);
        filter: blur(0px) grayscale(0%) brightness(100%);
    }
}
.c-animation.is-animation.is-animation-blur,
.i-animation.is-animation.is-animation-blur,
.o-animation.is-animation.is-animation-blur{
    -webkit-animation-name: blur;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

 574 total views,  4 views today

Revisions

Comments are closed.