页面滚动动画
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body>
<div class="con">content.....................................</div>
<ul class="list">
<li>
<p>第1屏动画进入视线</p>
</li>
<li>
<p>第2屏动画进入视线</p>
</li>
<li>
<p>第3屏动画进入视线</p>
</li>
</ul>
<div>
<div class="cc" style="display: flex;justify-content: space-around">
<div style="background: #000;width: 300px;">xx</div>
<div style="background: #acc;width: 300px">xx</div>
<div style="background: #aacccc;width: 300px">xx</div>
<div style="background: #efaa;width: 300px">xx</div>
</div>
</div>
<h1>01</h1>
<h1>02</h1>
<h1>03</h1>
<h1>04</h1>
<h1>05</h1>
<h1>06</h1>
<h1>07</h1>
<h1>08</h1>
<h1>09</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<div id="main" style="width: 100%;height: 300px;background: #aacccc;">
</div>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<h1>26</h1>
<h1>27</h1>
<h1>28</h1>
<h1>29</h1>
<h1>30</h1>
<h1>31</h1>
<h1>32</h1>
<h1>33</h1>
<h1>34</h1>
<h1>35</h1>
<h1>36</h1>
<h1>37</h1>
<h1>38</h1>
<h1>39</h1>
<h1>40</h1>
<h1>41</h1>
<h1>42</h1>
<h1>43</h1>
<h1>44</h1>
<h1>45</h1>
<h1>46</h1>
<h1>47</h1>
<h1>48</h1>
<h1>49</h1>
<h1>50</h1>
<h1>51</h1>
<h1>52</h1>
<h1>53</h1>
<h1>54</h1>
<h1>55</h1>
<h1>56</h1>
<h1>57</h1>
<h1>58</h1>
<h1>59</h1>
<h1>60</h1>
<h1>61</h1>
<h1>62</h1>
<h1>63</h1>
<h1>64</h1>
<h1>65</h1>
<h1>66</h1>
<h1>67</h1>
<h1>68</h1>
<h1>69</h1>
<h1>70</h1>
<h1>71</h1>
<h1>72</h1>
<h1>73</h1>
<h1>74</h1>
<h1>75</h1>
<h1>76</h1>
<h1>77</h1>
<h1>78</h1>
<h1>79</h1>
<h1>80</h1>
<h1>81</h1>
<h1>82</h1>
<h1>83</h1>
<h1>84</h1>
<h1>85</h1>
<h1>86</h1>
<h1>87</h1>
<h1>88</h1>
<h1>89</h1>
<h1>90</h1>
<h1>91</h1>
<h1>92</h1>
<h1>93</h1>
<h1>94</h1>
<h1>95</h1>
<h1>96</h1>
<h1>97</h1>
<h1>98</h1>
<h1>99</h1>
<h1>100</h1>
<style>
.con {
height: 1200px;
}
.list {
list-style: none;
padding: 0;
margin: 0;
border-top: 2px solid blue;
}
.list li {
height: 500px;
border-bottom: 1px solid green;
}
.list li p {
opacity: 0;
animation: move 1s forwards;
animation-play-state: paused;
}
.list .m1 p {
-moz-animation-play-state: running;
-webkit-animation-play-state: running;
}
.cc div{
margin-top:10px;
height: 300px;
animation: moreHeight 1s infinite alternate;
animation-play-state: paused;
}
.cc .m2{
-moz-animation-play-state: running;
-webkit-animation-play-state: running;
}
@keyframes moreHeight {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
@keyframes move {
from {
opacity: 0;
margin-left: 500px;
}
to {
opacity: 1;
margin-left: 0;
}
}
</style>
<script>
function startStopAnimation(element, incs) {
var a, b, c;
a = $(window).height();
$(window).scroll(function () {
var b = $(this).scrollTop();
$(element).each(function () {
c = $(this).offset().top;
if (a + b > c) {
$(this).addClass(incs);
} else {
$(this).removeClass(incs);
}
});
});
}
$(document).ready(function () {
startStopAnimation(".list li","m1");
startStopAnimation(".cc div","m2");
startStopAnimation("#main","animated swing");
});
</script>
</body>
</html>
技术改变一切
