滚动到界面，元素缓慢滑出（jquery / css）

 万能的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             width: 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             width: 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>

 

posted @ 2019-08-30 16:48  Xxiaoyu  阅读(816)  评论(0)  编辑  收藏  举报