宝安网站开发：如何创建整页动画过渡

2019.08.17 mf_web

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 &#10140;</a>
                
            </div>
        </div>
             
        <div id="next-page">
            <div class="nextcontent">
                 <h1>Great! You're in the 2nd Page!</h1>
                <a class="nextlink"> &#8592 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启动

对于我们在页面加载上的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);
    });
     
});

结论

你有它！最终结果是我们网站页面之间的平滑过渡。最后，当我们在加载下一页之前触发动画时，元素现在可以从一个页面移动到另一个页面。

宝安网站开发

相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

联系电话 400-6065-301
在线咨询

留言