50
过去,在网页上添加页面转换是一个简单的过程。当您单击链接时,它会将您重定向到下一页,因为浏览器会加载下一页或元素。如果你想到的话,网络已经开始变得过时了,而且还有很大的提升空间。添加一些平滑过渡以创建下一页加载的更熟练的用户体验不是很好吗?
宝安网站开发可以做到的好事。有许多复杂的应用程序和插件可以提供相同类型的效果,有些人可能认为很难实现。幸运的是,它不一定是这样的。
我一直在玩jQuery来找出用一个非常棒的动画替换网页重新加载的方法,这肯定会在不使用插件的情况下打击用户的思维。今天我将与大家分享我所拥有的一切。
HTML结构将包含两个包含主页和下一页 ID 的两个div。
1 2 3 4 五 6 7 | <div id="main-page"> <!--- Main Content Here --> </div> <div id="next-page"> <!--- Next Page Content Here --> </div> |
我们在div中添加内容。我们将为每个页面提供一个链接,以通过mainlink和nextlink 类导航并将它们相互连接。
1 2 3 4 五 6 7 8 9 10 11 12 13 14 | <div id="main-page"> <div class="maincontent"> <h1>Full Page Transition</h1> <a class="mainlink">TRY IT NOW ➜</a> </div> </div> <div id="next-page"> <div class="nextcontent"> <h1>Great! You're in the 2nd Page!</h1> <a class="nextlink"> ← GO BACK</a> </div> </div> |
现在让我们在标记上添加一些通用样式。我们将整个body元素设置为100%,并为h1标记设置一些字体属性。
1 2 3 4 五 6 7 8 9 10 11 | body { width: 100%; } h1 { font-family: 'Raleway'; font-weight: bold; text-align: center; font-size: 50px; color: #fff; margin-top: 120px; } |
接下来让我们处理主页和下一页样式。除背景颜色外,它们都共享相同的默认属性。我将位置设置为绝对,并通过display:none隐藏两个元素。
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #main-page { height: 25px; width: 375px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #27ae60; display: none; } #next-page { height: 25px; width: 375px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #e74c3c; display: none; } .maincontent, .nextcontent { padding-top: 40px; display: none; } |
我还为按钮添加了基本样式,使它们更具吸引力。我使用边框在按钮上创建一个平滑的盒子形状,并将它们与中心对齐。
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | a.back{ font-family: 'Lato'; font-size: 20px; color: #dfdfdf; text-decoration: none; text-align: center; width: 20%; margin: 25px auto 30px auto; display: block; } a.mainlink, a.nextlink { font-family: 'Lato'; color: #fff; border: 3px solid #fff; padding: 15px 10px; display: block; text-align: center; margin: 25px auto; width: 13%; text-decoration: none; cursor: pointer; font-size: 20px; font-weight: 500; } a.mainlink:hover, a.nextlink:hover{ background: #fff; color: #575757; } |
对于我们在页面加载上的jQuery,我们将首先创建一个旋转函数,该函数将通过属性,持续时间,缓和完整值来执行一组CSS属性的自定义动画。
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 | $(document).ready(function() { $.fn.animateRotate = function(angle, duration, easing, complete) { var args = $.speed(duration, easing, complete); var step = args.step; return this.each(function(i, e) { args.complete = $.proxy(args.complete, e); args.step = function(now) { $.style(e, 'transform', 'rotate(' + now + 'deg)'); if (step) return step.apply(e, arguments); }; $({deg: 0}).animate({deg: angle}, args); }); }; |
接下来,我们将重置主页面的所有属性并淡化它。当单击mainlink和nextlink类时,它们将执行上面的函数但使用不同的对象。
该函数将首先淡出主页中的文本并使对象缩小。执行后,对象使用函数旋转以转换旋转。
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38 39 | $("#main-page").css("background-color", "#e74c3c"); $("#main-page").css("height", "100vh"); $("#main-page").css("width", "100%"); $("#main-page").fadeIn(); $(".maincontent").fadeIn(); $(".mainlink").on("click", function() { $(".maincontent").fadeOut(); $("#main-page").animate({ width: "25px", height: "375px" }, function() { $(this).animateRotate(90); }); setTimeout(function() { $("#main-page").fadeOut(); }, 1500); setTimeout(function() { $("#next-page").animateRotate(0, 0); $("#next-page").css("height", "25px"); $("#next-page").css("width", "375px"); $("#next-page").fadeIn(); $("#next-page").animate({ backgroundColor: "#27ae60" }, function() { $(this).animate({ height: "100vh" }, function() { $(this).animate({ width: "100%" }, function() { $(".nextcontent").fadeIn(300); }); }); }); }, 800); }); |
完成所有这些步骤后,该函数淡出单击的对象以显示新对象,然后更改与新对象匹配的对象的背景颜色。
最后,我们设置高度和宽度的动画,并淡化显示的新对象的内容。
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 | $(".nextlink").on("click", function() { $(".nextcontent").fadeOut(); $("#next-page").animate({ width: "25px", height: "375px" }, function() { $(this).animateRotate(-90); }); setTimeout(function() { $("#next-page").fadeOut(); }, 1500); setTimeout(function() { $("#main-page").animateRotate(0, 0); $("#main-page").css("height", "25px"); $("#main-page").css("width", "375px"); $("#main-page").fadeIn(); $("#main-page").animate({ height: "100vh" }, function() { $(this).animate({ width: "100%" }, function() { $(".maincontent").fadeIn(300); }); }); }, 1400); }); }); |
你有它!最终结果是我们网站页面之间的平滑过渡。最后,当我们在加载下一页之前触发动画时,元素现在可以从一个页面移动到另一个页面。
宝安网站开发
热门分享
最新文章
2019.08.23
宝安企业网站开发:虚拟现实设计的基本设计理念
2019.08.20
宝安建站:10种方法来促进您的设计项目
2019.08.19
宝安设计网站:模型在网络和产品设计的重要性
2019.08.17
宝安网页设计:了解登陆页面中的即时和预期情绪
2019.08.17
宝安企业网站建设:排版很响亮之以类型为中心的前页
2019.08.17
宝安网站开发:如何创建整页动画过渡
2019.08.16
宝安网站制作:对于设计师而言,客户永远是对的
2019.08.16
宝安网页设计:移动设备的热门导航设计模式
2019.08.16
宝安企业网站建设:单页用户体验设计的5个最佳实践
2019.08.15
宝安企业网站开发:您现在需要投资案例研究的5个理由
随机推荐
2019.08.16
宝安网站制作:对于设计师而言,客户永远是对的
2019.08.19
宝安设计网站:模型在网络和产品设计的重要性
2019.08.14
宝安网站开发:15种内容格式被证明可以提升观众参与度
2019.08.16
宝安企业网站建设:单页用户体验设计的5个最佳实践
2019.08.14
宝安做网站:25个巧妙的内容营销示例
2019.08.15
宝安网站设计:6种为买家角色定制内容的有效方法
2019.08.15
宝安企业网站开发:您现在需要投资案例研究的5个理由
2019.08.16
宝安网页设计:移动设备的热门导航设计模式
2019.08.17
宝安网页设计:了解登陆页面中的即时和预期情绪
2019.08.14
宝安网站建设:85个引人入胜的内容营销统计数据