基于HTML5 SVG的页面过渡切换效果

原创文章 作者:月光光 2017年08月12日 18:05helloweba.com 标签:HTML5 

这是一款基于HTML5 SVG的页面过渡变形切换效果。该页面切换效果在两个页面进行切换时,通过SVG路径变形,制作出炫酷的页面过渡效果,可用于产品介绍页。

示例中使用了CSS Flexbox和CSS变量,不是所有的浏览器都支持这些新的CSS属性。

该HTML5 SVG的页面过渡变形切换效果的基本HTML结构如下:

<div class="content content--intro">
    <div class="content__inner">
        <!-- ... -->
    </div>
    <div class="shape-wrap">
        <svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">
            <path 
                d="M -44,-50 C -52.71,28.52 15.86,8.186 184,14.69 383.3,22.39 462.5,12.58 638,14 835.5,15.6 987,6.4 1194,13.86 1661,30.68 1652,-36.74 1582,-140.1 1512,-243.5 15.88,-589.5 -44,-50 Z" 
                pathdata:id="M -44,-50 C -137.1,117.4 67.86,445.5 236,452 435.3,459.7 500.5,242.6 676,244 873.5,245.6 957,522.4 1154,594 1593,753.7 1793,226.3 1582,-126 1371,-478.3 219.8,-524.2 -44,-50 Z">
            </path>
        </svg>
    </div>
</div><!-- /content--intro -->

<div class="content content--fixed">
    <div class="content__inner">
        <!-- ... -->
    </div>
</div><!-- /content--fixed -->

对于动画,我们使用了animejs, 对于字体效果,我们使用了Charming。DEMO中的动画效果只是众多案例中的一种而已,下面是该HTML5 SVG的页面过渡变形切换的一些截图效果。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/434.html

0条评论