<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动出现</title> <style type="text/css"> * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } section { background: #eee; padding: 40vh 10%; overflow: hidden; } section p { color: rgba(0, 0, 0, 0.5) !important; font-weight: 100; font-size: 36pt; } section.one { background-color: #FFE62B; } section.two { background-color: #FFCF00; } section.three { background-color: #FFB700; } section.four { background-color: #FF9E00; } section.five { background-color: #FF7A00; } .module { position: relative; float: left; margin: 5%; opacity: 0; } .module:nth-child(even) { margin-right: 0; } .come-in { transform: translateX(-150px); animation: come-in 0.5s cubic-bezier(0, -0.01, 0, 0.99) forwards; } .come-in:nth-child(odd) { animation-delay: .1s; animation-duration: .75s; } .leave { transform: translateX(150px); animation: leave 0.5s cubic-bezier(0, -0.01, 0, 0.99) forwards; } .leave:nth-child(odd) { animation-delay: .1s; animation-duration: .75s; } .already-visible { transform: translateY(0); animation: none; opacity: 1; } @keyframes come-in { to { transform: translateX(0); opacity: 1; } } @keyframes leave { to { transform: translateX(-150); opacity: 0; } } </style> </head> <body> <section class="one"> <div class="module"><p>Scroll down.</p></div> </section> <section class="two"> <div class="module"><p>Keep going.</p></div> </section> <section class="three"> <div class="module"><p>Almost there.</p></div> </section> <section class="four"> <div class="module"><p>One more.</p></div> </section> <section class="five"> <div class="module"><p>That is all.</p></div> </section> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> (function($) { /** * Copyright 2012, Digital Fusion * Licensed under the MIT license. * http://teamdf.com/jquery-plugins/license/ * * @author Sam Sehnert * @desc A small plugin that checks whether elements are within * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ $.fn.visible = function(partial) { var $t = $(this), $w = $(window), viewTop = $w.scrollTop(), viewBottom = viewTop + $w.height(), _top = $t.offset().top, _bottom = _top + $t.height(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom; return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); }; })(jQuery); var win = $(window); var allMods = $(".module"); allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("already-visible"); } }); win.scroll(function(event) { allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("come-in"); } }); }); ; </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 滚动出现 喜欢 (3)or分享 (0)
