一款由jquery实现的超炫的页面加载特效

浏览数：31 / 时间：2015年06月09日

今天为大家带来一款由jquery实现的超炫的页面加载特效。连续的几个页面分开特效。最后由三维的线条由远至近消失，然后由近至远出现。效果超级梦炫。一起看下效果图：

实现的代码。

html代码：

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1200 600">
        <line id="uno" x1="600" y1="0" x2="600" y2="0" stroke="navajowhite" stroke-width="1"
            stroke-linecap="round" />
        <line id="dos" x1="1200" y1="300" x2="1200" y2="300" stroke="teal" stroke-width="1"
            stroke-linecap="round" />
        <line id="tres" x1="0" y1="0" x2="0" y2="0" stroke="darkseagreen" stroke-width="1"
            stroke-linecap="round" />
        <line id="cuatro" x1="0" y1="600" x2="0" y2="600" stroke="tomato" stroke-width="1"
            stroke-linecap="round" />
        <line id="cinco" x1="1200" y1="0" x2="1200" y2="0" stroke="slateblue" stroke-width="1"
            stroke-linecap="round" />
        <line id="seis" x1="1200" y1="600" x2="1200" y2="600" stroke="turquoise" stroke-width="1"
            stroke-linecap="round" />
        <g id="vertical-first">
            <line class="vertical" x1="100" y1="0" x2="100" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="200" y1="0" x2="200" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="300" y1="0" x2="300" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="400" y1="0" x2="400" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="500" y1="0" x2="500" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="600" y1="0" x2="600" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="700" y1="0" x2="700" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="800" y1="0" x2="800" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="900" y1="0" x2="900" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1000" y1="0" x2="1000" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1100" y1="0" x2="1100" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="0" x2="1200" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="150" y1="0" x2="150" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="250" y1="0" x2="250" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="350" y1="0" x2="350" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="450" y1="0" x2="450" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="550" y1="0" x2="550" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="650" y1="0" x2="650" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="750" y1="0" x2="750" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="850" y1="0" x2="850" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="950" y1="0" x2="950" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1050" y1="0" x2="1050" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1150" y1="0" x2="1150" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="50" y1="0" x2="50" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="0" x2="0" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="50" x2="0" y2="50" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="100" x2="0" y2="100" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="150" x2="0" y2="150" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="200" x2="0" y2="200" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="250" x2="0" y2="250" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="300" x2="0" y2="300" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="350" x2="0" y2="350" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="400" x2="0" y2="400" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="450" x2="0" y2="450" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="500" x2="0" y2="500" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="550" x2="0" y2="550" stroke="black" stroke-width="1" />
            <line class="vertical" x1="0" y1="600" x2="0" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="100" y1="600" x2="100" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="200" y1="600" x2="200" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="300" y1="600" x2="300" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="400" y1="600" x2="400" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="500" y1="600" x2="500" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="600" y1="600" x2="600" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="700" y1="600" x2="700" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="800" y1="600" x2="800" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="900" y1="600" x2="900" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1000" y1="600" x2="1000" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1100" y1="600" x2="1100" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="600" x2="1200" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="150" y1="600" x2="150" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="250" y1="600" x2="250" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="350" y1="600" x2="350" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="450" y1="600" x2="450" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="550" y1="600" x2="550" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="650" y1="600" x2="650" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="750" y1="600" x2="750" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="850" y1="600" x2="850" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="950" y1="600" x2="950" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1050" y1="600" x2="1050" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1150" y1="600" x2="1150" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="50" y1="600" x2="50" y2="600" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="0" x2="1200" y2="0" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="50" x2="1200" y2="50" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="100" x2="1200" y2="100" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="150" x2="1200" y2="150" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="200" x2="1200" y2="200" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="250" x2="1200" y2="250" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="300" x2="1200" y2="300" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="350" x2="1200" y2="350" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="400" x2="1200" y2="400" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="450" x2="1200" y2="450" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="500" x2="1200" y2="500" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="550" x2="1200" y2="550" stroke="black" stroke-width="1" />
            <line class="vertical" x1="1200" y1="600" x2="1200" y2="600" stroke="black" stroke-width="1" />
        </g>
    </svg>

css代码：

 body
        {
            background-color: snow;
        }
        
        body, svg
        {
            width: 100%;
            height: 100%;
        }

js代码：

 $("#uno")
            .delay(200)
            .velocity({ y2: 600 }, { duration: 1500, easing: "spring" })
            .delay(50)
            .velocity({ strokeWidth: 1500 });

        $("#dos")
            .delay(2000)
            .velocity({ x2: 0 }, { duration: 1500, easing: "swing" })
            .delay(50)
            .velocity({ strokeWidth: 1500 });

        $("#tres")
            .delay(4000)
            .velocity({ x2: 1200, y2: 600 }, { duration: 1500, easing: "spring" })
            .delay(50)
            .velocity({ strokeWidth: 1500 });

        $("#cuatro")
            .delay(6000)
            .velocity({ x2: 1200, y2: 0 }, { duration: 1500, easing: "swing" })
            .delay(50)
            .velocity({ strokeWidth: 1500 });

        $("#cinco")
            .delay(8000)
            .velocity({ x2: 0, y2: 600 }, { duration: 1500, easing: "spring" })
            .delay(50)
            .velocity({ strokeWidth: 1500 });

        $("#seis")
            .delay(10000)
            .velocity({ x2: 0, y2: 0 }, { duration: 1500, easing: "spring" })
            .delay(50)
            .velocity({ strokeWidth: 1500 });

        $(".vertical")
            .delay(12000)
            .velocity({ y2: 300, x2: 600 }, { duration: 1500, easing: "easeInCubic" })
            .delay(100)
            .velocity({ y1: 300, x1: 600 }, { duration: 1500, loop: 1, easing: "easeInCubic" }); //@ sourceURL=pen.js