万能的jquery：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>move</title> 9 10 <style> 11 .bg { 12 margin: 0 auto; 13 margin-top: 900px; 14 margin-bottom: 900px; 15 800px; 16 height: 600px; 17 position: relative; 18 background-color: #000; 19 } 20 21 .move { 22 position: absolute; 23 top: 10px; 24 left: 200px; 25 400px; 26 height: 300px; 27 opacity: 0; 28 background-color: #fff; 29 } 30 </style> 31 <script src="style/js/jquery-1.11.3.min.js"></script> 32 <script> 33 34 $(function () { 35 $(window).scroll(function () { 36 slideIn($(".move"), 150); 37 }); 38 39 function slideIn(obj, left) { 40 var MoveHeight, ScrollHeight; 41 MoveHeight = obj.offset().top; //目标元素到顶部的距离 42 ScrollHeight = $(window).scrollTop(); //页面滚动的距离 43 44 if (ScrollHeight > MoveHeight - 750) { 45 obj.animate({ left: left + 'px', opacity: 1, filter: 'Alpha(opacity=90)' }, 500); 46 } 47 }; 48 49 }); 50 51 </script> 52 53 </head> 54 55 <body> 56 <div class="bg"> 57 <div class="move"> 58 jquery 59 </div> 60 </div> 61 62 63 </body> 64 65 </html>
简单的css：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>move</title> 9 10 <style> 11 .bg { 12 margin: 0 auto; 13 margin-top: 50px; 14 width: 800px; 15 height: 600px; 16 position: relative; 17 background-color: #000; 18 } 19 20 .move { 21 position: relative; 22 animation: mymove 0.5s; 23 -webkit-animation: mymove 0.5s; 24 animation-fill-mode: forwards; 25 top: 10px; 26 width: 400px; 27 height: 300px; 28 opacity: 0; 29 background-color: #fff; 30 } 31 32 @keyframes mymove { 33 from { 34 left: 200px; 35 opacity: 0; 36 filter: alpha(opacity=0); 37 } 38 39 to { 40 left: 150px; 41 opacity: 1.0; 42 filter: alpha(opacity=100); 43 } 44 } 45 46 </style> 47 48 </head> 49 50 <body> 51 <div class="bg"> 52 <div class="move"> 53 css 54 </div> 55 </div> 56 57 </body> 58 59 </html>