javascript - 求教大神，这样的有点渐进的效果的实现原理，已及是怎么实现的

问题描述

问 题

http://demo.cssmoban.com/cssthemes3/ft5_16_slant/index.html
其实也算是一个听常见的效果，很多响应式的网站都会使用。就是在页面滚动的时候，元素会有从左边或者上面，滑下来的效果是怎么实现的。就CSS动画做的话，是可以做到动画，但是如何鉴别元素正好进去可视区，然后才会添加class去执行动画?大神求教

解决方案

1个css库(animate.css), 1个js的插件(waypoints.js)

animate.css
https://github.com/hitherejoe/animate

waypoints.js:
https://github.com/imakewebthings/waypoints

简单的说就是, 用waypoints监听dom是否在当前屏幕, 然后给dom添加或者删除animate动画

            $('#fh5co-features').waypoint( function( direction ) {
                                        
                if( direction === 'down' && !$(this).hasClass('animated') ) {

                    $(this).addClass('animated');
                        
                }
            } , { offset: '70%' } );

这篇关于javascript - 求教大神，这样的有点渐进的效果的实现原理，已及是怎么实现的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！