JS实现炫酷的页面切换动画效果

JS实现炫酷的页面切换动画效果

这是一款超炫的页面切换动画效果,前端开发中最常用的超炫的页面切换动画效果。

使用方法
在页面引入以下modernizr.custom.js、jquery.min.js、jquery.dlmenu.js、pagetransitions.js文件

1
2
3
4
<script src="js/jquery.dlmenu.js"></script>
<script src="js/pagetransitions.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.min.js"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<div class="pt-triggers">
<button id="iterateEffects" class="pt-touch-button">显示下一页切换</button>
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">选择切换效果</button>
<ul class="dl-menu">
  <li>
      <a href="#">Move</a>
      <ul class="dl-submenu">
          <li data-animation="1"><a href="#">Move to left/ from right</a></li>
          <li data-animation="2"><a href="#">Move to right/ from left</a></li>
          <li data-animation="3"><a href="#">Move to top/ from bottom</a></li>
          <li data-animation="4"><a href="#">Move to bottom/ from top</a></li>
      </ul>
  </li>
  <li>
      <a href="#">Fade</a>
      <ul class="dl-submenu">
          <li data-animation="5"><a href="#">Fade / from right</a></li>
          <li data-animation="6"><a href="#">Fade / from left</a></li>
          <li data-animation="7"><a href="#">Fade / from bottom</a></li>
          <li data-animation="8"><a href="#">Fade / from top</a></li>
          <li data-animation="9"><a href="#">Fade left / Fade right</a></li>
          <li data-animation="10"><a href="#">Fade right / Fade left</a></li>
          <li data-animation="11"><a href="#">Fade top / Fade bottom</a></li>
          <li data-animation="12"><a href="#">Fade bottom / Fade top</a></li>
      </ul>
  </li>
  <li>
      <a href="#">Different easing</a>
      <ul class="dl-submenu">
          <li data-animation="13"><a href="#">Different easing / from right</a></li>
          <li data-animation="14"><a href="#">Different easing / from left</a></li>
          <li data-animation="15"><a href="#">Different easing / from bottom</a></li>
          <li data-animation="16"><a href="#">Different easing / from top</a></li>
      </ul>
  </li>
  <li>
      <a href="#">Scale</a>
      <ul class="dl-submenu">
          <li data-animation="17"><a href="#">Scale down / from right</a></li>
          <li data-animation="18"><a href="#">Scale down / from left</a></li>
          <li data-animation="19"><a href="#">Scale down / from bottom</a></li>
          <li data-animation="20"><a href="#">Scale down / from top</a></li>
          <li data-animation="21"><a href="#">Scale down / scale down</a></li>
          <li data-animation="22"><a href="#">Scale up / scale up</a></li>
          <li data-animation="23"><a href="#">Move to left / scale up</a></li>
          <li data-animation="24"><a href="#">Move to right / scale up</a></li>
          <li data-animation="25"><a href="#">Move to top / scale up</a></li>
          <li data-animation="26"><a href="#">Move to bottom / scale up</a></li>
          <li data-animation="27"><a href="#">Scale down / scale up</a></li>
      </ul>
  </li>
  <li>
      <a href="#">Rotate</a>
      <ul class="dl-submenu">
          <li>
              <a href="#">Glue</a>
              <ul class="dl-submenu">
                  <li data-animation="28"><a href="#">Glue left / from right</a></li>
                  <li data-animation="29"><a href="#">Glue right / from left</a></li>
                  <li data-animation="30"><a href="#">Glue bottom / from top</a></li>
                  <li data-animation="31"><a href="#">Glue top / from bottom</a></li>
              </ul>
          </li>
          <li>
              <a href="#">Flip</a>
              <ul class="dl-submenu">
                  <li data-animation="32"><a href="#">Flip right</a></li>
                  <li data-animation="33"><a href="#">Flip left</a></li>
                  <li data-animation="34"><a href="#">Flip top</a></li>
                  <li data-animation="35"><a href="#">Flip bottom</a></li>
              </ul>
          </li>
          <li data-animation="36"><a href="#">Fall</a></li>
          <li data-animation="37"><a href="#">Newspaper</a></li>
          <li>
              <a href="#">Push / Pull</a>
              <ul class="dl-submenu">
                  <li data-animation="38"><a href="#">Push left / from right</a></li>
                  <li data-animation="39"><a href="#">Push right / from left</a></li>
                  <li data-animation="40"><a href="#">Push top / from bottom</a></li>
                  <li data-animation="41"><a href="#">Push bottom / from top</a></li>
   
                  <li data-animation="42"><a href="#">Push left / pull right</a></li>
                  <li data-animation="43"><a href="#">Push right / pull left</a></li>
                  <li data-animation="44"><a href="#">Push top / pull bottom</a></li>
                  <li data-animation="45"><a href="#">Push bottom / pull top</a></li>
              </ul>
          </li>
          <li>
              <a href="#">Fold / Unfold</a>
              <ul class="dl-submenu">
                  <li data-animation="46"><a href="#">Fold left / from right</a></li>
                  <li data-animation="47"><a href="#">Fold right / from left</a></li>
                  <li data-animation="48"><a href="#">Fold top / from bottom</a></li>
                  <li data-animation="49"><a href="#">Fold bottom / from top</a></li>
                  <li data-animation="50"><a href="#">Move to right / unfold left</a></li>
                  <li data-animation="51"><a href="#">Move to left / unfold right</a></li>
                  <li data-animation="52"><a href="#">Move to bottom / unfold top</a></li>
                  <li data-animation="53"><a href="#">Move to top / unfold bottom</a></li>
              </ul>
          </li>
          <li>
              <a href="#">Room</a>
              <ul class="dl-submenu">
                  <li data-animation="54"><a href="#">Room to left</a></li>
                  <li data-animation="55"><a href="#">Room to right</a></li>
                  <li data-animation="56"><a href="#">Room to top</a></li>
                  <li data-animation="57"><a href="#">Room to bottom</a></li>
              </ul>
          </li>
          <li>
              <a href="#">Cube</a>
              <ul class="dl-submenu">
                  <li data-animation="58"><a href="#">Cube to left</a></li>
                  <li data-animation="59"><a href="#">Cube to right</a></li>
                  <li data-animation="60"><a href="#">Cube to top</a></li>
                  <li data-animation="61"><a href="#">Cube to bottom</a></li>
              </ul>
          </li>
          <li>
              <a href="#">Carousel</a>
              <ul class="dl-submenu">
                  <li data-animation="62"><a href="#">Carousel to left</a></li>
                  <li data-animation="63"><a href="#">Carousel to right</a></li>
                  <li data-animation="64"><a href="#">Carousel to top</a></li>
                  <li data-animation="65"><a href="#">Carousel to bottom</a></li>
              </ul>
          </li>
          <li data-animation="66"><a href="#">Sides</a></li>
      </ul>
  </li>
  <li data-animation="67"><a href="#">Slide</a></li>
</ul>
<div class="footer-banner" style="position:absolute;bottom:-350px;left:-200px;width:728px; margin:30px auto"></div>
</div><!-- /dl-menu-wrapper-->
</div><!-- /triggers -->
   
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1"><h1><span>A collection of</span>页面切换效果</h1></div>
<div class="pt-page pt-page-2"><h1><span>A collection of</span>页面切换效果</h1></div>
<div class="pt-page pt-page-3"><h1><span>A collection of</span>页面切换效果</h1></div>
<div class="pt-page pt-page-4"><h1><span>A collection of</span>页面切换效果</h1></div>
<div class="pt-page pt-page-5"><h1><span>A collection of</span>页面切换效果</h1></div>
<div class="pt-page pt-page-6"><h1><span>A collection of</span>页面切换效果</h1></div>
</div>

文件信息:

    0

    发表评论