in-view 滚动出现 – 有爱前端

注:要IE9+(不包含IE9)
https://github.com/camwiegert/in-view

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动出现</title> <style type="text/css"> div{height: 300px;margin-bottom: 10px;background: #ddd;} .is-view { transition-duration: .5s; transition-timing-function: ease-out; } .is-view.is-off { opacity: 0; transform: translateY(20px); } </style> <script type="text/javascript" src="http://img.gzui.net/plug-in/in-view.min.js"></script> </head> <body> <div class="is-off is-view"></div> <div class="is-off is-view"></div> <div class="is-off is-view"></div> <div class="is-off is-view"></div> <div class="is-off is-view"></div> <div class="is-off is-view"></div> <div class="is-off is-view"></div> <div class="is-off is-view"></div> <div class="is-off is-view"></div> <div class="is-off is-view"></div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.is-view').each(function() { var dom = $(this); dom.css("background-color", "hsla(" + Math.floor(Math.random() * (360)) + ", 75%, 58%, 1)"); }); }); </script> <script type="text/javascript"> $(function(){ inView.offset({bottom:120}); inView('.is-view') .on('enter', function(el){ el.classList.remove('is-off'); }) .on('exit', function(el){ el.classList.add('is-off'); }) }); </script> </html>

提示：你可以先修改部分代码再运行。

其他:
https://codepen.io/jackrugile/pen/GpRYao
https://codepen.io/mackness/pen/avZbaV

转载请注明：有爱前端 » in-view 滚动出现