How to scroll and animate SVG (draw)?

2019-08-12 18:44发布

站内问答 / JavaScript
1979 0 5

I have drawn an SVG image in illustrator. It's similar to a timeline. I want it to draw in and out as I scroll the page up and down (with jQuery/JavaScript).

As it is, without JavaScript, the layout is ok (just one thing) and functional without any code. Without JavaScript (or users without JavaScript functionality), users already see the SVG image, and simply scroll to the bottom of the page, without the image being drawn.

PROBLEM 1

I want to use JavaScript or jQuery to do this. I have researched high and low, and there is nothing that I understand, despite understanding some JavaScript and jQuery principles.

I have looked at both "Draw SVG" from Greensock, but you have to pay to access that plugin, and I have looked at "snap.svg" but doesn't seem to be as well documented, and doesn't seem to support scrolling. Is there an a fair way to do it in jQuery or in plain JavaScript?

PROBLEM 2

the start of the line (left side) sits a few pixels away from the edge. I can't seem to make it sit flush against the left side of the window. Any ideas how?

Sorry I cannot post images at the moment

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text">



       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <script src="http://use.edgefonts.net/quicksand:n3,i3,n4,i4,n7,i7:all.js" type="text/javascript"></script>
<title >BGDR creative</title>
</head>
<body>
<style>
/*

            This section isfor the default overall styling for the entire site


*/

html {
    margin-top: -27px;
    padding: 0;
}

body {
    font-family: quicksand, didact-gothic, sans-serif;
    text-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
    margin:0;
    font-style: normal;
    font-weight: 300;
    height: auto;
    width: 100%;
    /*background-color: grey;*/
}
            /*This section isfor the header section that includes the header itself, my h1 text logo, the nav bar and the top social buttons*/  
header {
    /*background-color: hsla(359,70%,46%,1.00);*/
    position: fixed;
    width:100%;
    height:20%;
    z-index:2;
}

            /*This h1 is in the header section and the h1 has an ID=logo and is in 2 sections, id=bgdr and id=creative.*/

h1 {
    /*background-color: orange;*/
    font-size: 4em;
    text-align: justify;
    color: black;
    margin-top: 41px;
    margin-right: 41px;
    margin-left: 19px;
    margin-bottom: 41px;
    position: fixed;
}


#logo {
    line-height: 30px;
    font-size: 4.em;
    text-align: justify;
    letter-spacing: 0.0em;
    padding-top: 10px;
    padding-bottom: 2px;
    padding-left: 5px;
}

            /*#bgdr and #creative IDs are part of the h1 (#logo). They are in 2 IDs so that I can adjust the BGDR and creative text independantly*/

#bgdr {
    text-align: justify;
}

#creative {
    font-size: 0.6em;
    text-align: justify;
    padding-top: 0px;
    letter-spacing: 0.065em;
    padding-left: 4px;
}   

            /* the "a" selector is followed by "link, visited and hover" to animate the states of menu/text links throughout the page/site*/

a:link {
    color: hsla(0,0%,0%,1.00);
    -webkit-transition: color 0.5s ease-out;
    -moz-transition: color 0.5s;
    -o-transition: color 0.5s;
    transition: color 0.5s;
    text-decoration:none;
    font-weight:500;
}

a:visited {
    color: hsla(0,0%,0%,1.00);
}

a:hover {
    color: hsla(0,0%,72%,1.00);
}

a:active {
    font-weight: 800;
}


            /*the ul, li, and .nav control the top nav menu. The ul is the table, il are the cells. (front page, about, contact, etc.)*/

ul {
    /*background-color: blue;*/
    float: right;
    position: inherit;
    margin-top: 60px;
    margin-right: 25px;
    margin-bottom: 0px;
    padding: 0em;
    font-size: 1.15em;
}

 li {
    float: right;
    display: block;
    width: inherit;
    margin-left: 3em;
}

            /*This is a class for my social buttons that are just below the menu (not large buttons at the bottom of the page*/
.social {
    position: inherit;
    bottom: auto;
    display: block;
    width: 11em;
    background-color: green;
    right: 25px;
    padding-top: 2px;
    padding-right: 0px;
    padding-left: 2px;
    padding-bottom: 2px;
    top: 85px;
}

            /*h2=page name e.g. About h3=Sound/music/web h4=long version*/
h2, h3, h4  {
            text-align: center; 
}   

            /*h2 is the title of each page eg "ABOUT"*/

h2 {
font-size: 2em;
position: relative;
font-style: normal;          
font-weight: 400;
}


h4 {
    font-weight:500; 
    font-size:1.4em
}

h2+p {
    text-align:center;
} 


    /*web text*/
p {
    font-size: 1.1em;
    text-align: justify;
}

main {
    position: relative;
    top: 240px;
    width: 100%;
    margin-top: 0em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(45%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
    padding-bottom: 5px;
}


.dotimg {
    background-position:right;
    background-size:100% 100%;
    right: 1em;
    position: fixed;
    /*background-size: 5em 3em;*/
    opacity: 0.4;
    bottom: 0em;
}

    /* This is for the CONTACT page only*/

form { 
    max-width:520px; margin:35px auto; 
}

.feedback-input {
    color:black;
    font-family: quicksand, Helvetica, Arial, sans-serif;
    font-weight:300;
    font-size: 18px;
    border-radius: 5px;
    line-height: 22px;
    background-color: transparent;
    border:2px solid black;
    transition: all 0.3s;
    padding: 13px;
    margin-bottom: 15px;
    width:100%;
    box-sizing: border-box;
    outline:0;
}

.feedback-input:focus {
    border:3px solid black; 
}

textarea {
    height: 250px;
    line-height: 150%;
    resize:vertical;
}

[type="submit"] {
    font-family: 'quicksand', Arial, Helvetica, sans-serif;
    width: 100%;
    background-color: white;
    border-radius:10px;
    border-color:black;
    cursor:pointer;
    color:black;
    font-size:24px;
    padding-top:10px;
    padding-bottom:10px;
    transition: all 0.4s;
    margin-top:-4px;
    font-weight:700;
}

[type="submit"]:hover { 
    background:#85BEE4; 
}

    /*This is the SVG element that has all the paths and text within it*/       
svg {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    padding-right: 0px;
    width: 100%;
    height: 100%;  
}

.linePath {
    stroke-dasharray: 1000;
    stroke-dashoffset: 50;
}

#frame {
  height: 3000px;
}

footer {
   position: static;
   display:block;
   left:0px;
   bottom:0;
 }
</style>
    <header>


  <!-- h1 is a text logo (i need to check to see having a h1 text logo is ok)-->

        <h1 id="logo" role="button"> 
            <a href="Home.html" title="Back to the front page" role="link">
                <span id="bgdr">
                    BGDR
                </span>
                    <br>
                <span id="creative">
                    creative
                </span>
            </a>
        </h1>


</header>
     <!-- main content + where the sgv image code is placed to be manipulated by Java script-->
    <main role="main">



    <div id="frame" title="skills line" role="img">

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 410.8 931.1 1985.1" style="enable-background:new 0 410.8 931.1 1985.1;" xml:space="preserve">

<style type="text/css">

    .st0{font-family:'ProximaNovaSoft-Regular';}

    .st1{font-size:52px;}

    .st2{font-family:'ProximaNovaSoft-Regular';}

    .st3{font-size:52px;}

    .st4{letter-spacing:-2;}

</style>

<g>

    <path class="linePath" d="M517.8,2395.9c-44.4,0-86.3-21.8-118-61.3c-31.4-39.1-49.5-91.5-50.9-147.4c0-0.1-0.1-0.3-0.1-0.4
c-0.8-3.8,8.7-24.7,16.7-41.6c8.1-17,19.5-39.4,25-46.5c6.6-8.6,20.1-15.8,30-21c4-2.1,8.4-4.5,9.5-5.5l0.1-0.5l0.7-0.6
c4-3.3,7-6.3,9.5-9.6c3.1-4.2,6-9,8.9-14.1l0.3-0.6l0.6-0.3c1.4-0.8,2.7-1.4,3.9-1.9c8.7-3.5,17.6-2.8,26.3-2.1
c1.2,0.1,2.4,0.2,3.5,0.3c14.2,0.9,27.3,0.3,40.1-1.9c4.1-0.7,5.5-6.8,5.8-8.6l0.7-3.8l3.2,2.1c6.8,4.5,14.1,8.8,21.6,12.8
c1.6,0.8,3.3,0.7,5-0.3c3.4-2.1,6-7.1,6-11.7c0-4.8-0.3-9.6-0.7-14.2l-0.5-5.5l4.4,3.2c3.9,2.8,8.3,5.3,13.1,7.3l1.4,0.6l0.1,1.5
c0.4,4.6,2.5,8.8,5.3,10.9c1.8,1.3,3.8,1.7,6,1.1c1-0.2,2.1-0.5,3.1-0.7l1.7-0.3l0.9,1.5c3.4,5.6,7,10.1,11,13.5l1.2,1l-0.4,1.5
c-0.6,2.4-0.7,4.8-0.1,7c5.9,21.4,17.7,32.5,31.5,45.3c1.6,1.5,3.3,3.1,5,4.7c10.1,9.6,16.2,19.9,18.1,30.5
c1.9,10.5-0.6,21.9-2.9,31.9c-0.5,2.4-1.1,4.8-1.5,7c-1.4,7,1.4,11.7,4.4,13.8c2.6,1.8,5.7,1.9,8.2,0.3l2-1.2l1.4,1.9
c1.1,1.5,2.5,2.4,4.4,2.7l1.1,0.2l0.6,0.9c0.7,1,0.4,1.9,0.2,3c0,0.1,0,0.1,0,0.2v0.5C677.7,2312.2,605.7,2395.9,517.8,2395.9z
M353.9,2185.2v1.3c1.3,55.1,18.9,106.5,49.8,145c30.8,38.3,71.3,59.4,114.1,59.4c85.1,0,154.9-81.5,162.5-189.6c0-0.2,0-0.3,0-0.5
c-1.4-0.6-2.7-1.4-3.8-2.4c-3.8,1.5-8.2,1.1-11.8-1.4c-4.3-3-8.3-9.5-6.5-18.9c0.5-2.3,1-4.7,1.5-7.2c2.2-10,4.5-20.4,2.8-29.9
s-7.3-18.9-16.7-27.7c-1.7-1.6-3.3-3.1-4.9-4.6c-13.7-12.8-26.6-24.9-32.9-47.6c-0.7-2.6-0.8-5.3-0.3-8.1
c-3.6-3.3-6.9-7.3-9.9-12.2c-0.4,0.1-0.8,0.2-1.2,0.3c-3.6,0.9-7.1,0.2-10.1-1.9c-3.7-2.7-6.4-7.5-7.2-13c-3-1.3-5.8-2.8-8.5-4.4
c0.2,3.1,0.3,6.3,0.3,9.5c0,6.3-3.5,13-8.4,16c-3.3,2-6.8,2.1-9.9,0.5c-6.6-3.5-13-7.2-19.1-11.1c-1.7,5.1-4.9,8.4-9,9.1
c-13.2,2.3-26.7,3-41.2,2c-1.2-0.1-2.4-0.2-3.6-0.3c-8.1-0.6-16.5-1.2-24.1,1.8c-0.9,0.3-1.7,0.8-2.7,1.3c-2.9,5-5.7,9.8-8.9,14
c-2.6,3.5-5.8,6.7-9.9,10.1c-1.1,1.9-4.2,3.6-11.6,7.5c-9.5,5-22.5,11.9-28.4,19.6c-4.2,5.5-13.6,23-23.9,44.6
C360.6,2167.1,354.8,2181.2,353.9,2185.2z"/>


<path class="linePath" d="M694.3,2210.2c-3.5,0-7.3-0.3-11.4-0.8l0.6-5c16,2,26.4-0.1,29.8-6.1c5.7-9.9-6.5-29.7-11.7-36.5l-9.6-12.5l13,8.9
c0.1,0.1,2.4,1.6,4.6,0.3c2.3-1.4,7.3-7.8,4.6-37.8c-1.8-19.8-7.2-32.9-15.6-37.8c-7.2-4.2-14.3-1-14.4-1l-6,2.7l2.6-6
c8.8-19.9,10-33.9,3.7-41.5c-9-10.7-30.8-5.4-31.1-5.4l-3.5,0.9l0.4-3.6c4.1-37.6-0.3-61-12.9-67.7c-17.1-9.1-44.9,14.1-45.2,14.4
l-3.2,2.7l-0.9-4c-6.5-29-15.8-45-26.7-46.3c-10.2-1.2-21.1,9.9-28.4,19.5c-8.2,10.8-13.9,22.1-13.9,22.2l-4.9,9.9l0.2-11
c0.5-29.8-5.8-38.4-11.1-40.4c-9.6-3.6-24.5,11-27.7,14.8l-2,2.4l-1.9-2.4c-8.3-10.6-16.2-15.1-23.4-13.6
c-19.2,4.2-30.1,47.8-30.2,48.2l-1,4.2l-3.1-2.9c-7.7-7.3-14.4-10.1-19.7-8.2c-9.2,3.2-13.6,19.6-14.5,25.6l-0.5,3.4l-3.1-1.5
c-8.7-4.3-15-5-18.8-2c-6.9,5.3-5.2,21.9-4,27.9l0.6,3h-3c-10.9,0.1-18.1,2.9-21.6,8.5c-6.1,9.8,1.1,25.1,1.1,25.3l1.7,3.6h-4
c-0.1,0-15.1,0.9-19.6,36.5c-1.7,13.1,0.2,22.8,5.7,28.8c5.8,6.4,13.7,6.1,13.8,6.1l4.6-0.2l-2.4,4c-0.4,0.7-10.5,17.9,0.1,37.3
c3.6,6.6,7.5,10.3,11.4,10.8c4.1,0.5,7.2-2.8,7.2-2.9l3.7,3.3c-0.2,0.2-4.8,5.3-11.5,4.5c-5.6-0.6-10.8-5.1-15.2-13.3
c-9.2-16.8-4.6-32.2-1.7-38.8c-3.7-0.6-9.2-2.4-13.7-7.4c-6.5-7.1-8.8-18.1-7-32.8c3.8-30.4,15.3-38.2,21.1-40.2
c-2.1-5.5-5.5-17.9,0.3-27.2c4.1-6.5,11.8-10.1,22.9-10.7c-1-6.7-2.3-23.2,6.3-29.9c4.9-3.8,12.1-3.8,21.2,0.1
c1.5-6.9,6.2-22.6,17.2-26.4c6.4-2.2,13.7,0,21.7,6.6c3.3-11.5,14.3-43.9,33-48c8.7-1.9,17.6,2.5,26.6,13.1c2-2,5.1-5,9-7.9
c8.6-6.3,16-8.4,22.1-6.2c8.9,3.2,13.6,14.9,14.4,35.6c8-13.5,25.2-38.1,42.7-36c13.1,1.6,23,16.8,30.1,46.4
c8.3-6.2,31.1-21.3,47.6-12.5c14.3,7.6,19.6,30.9,15.9,69.3c7.2-1.2,24-2.6,32.6,7.7c7.1,8.5,6.8,22.6-0.9,42
c3.6-0.5,8.6-0.3,13.7,2.6c10,5.8,16.1,19.8,18.1,41.7c2.2,24.6-0.1,38.5-7.1,42.6c-1,0.6-2,0.9-2.9,1.1
c5.5,8.6,14.8,25.8,8.5,36.9C714.1,2207.1,706.3,2210.2,694.3,2210.2z"/>


<path class="linePath" d="M463.1,2174.3c-15,0-27.2-10.3-27.2-22.9s12.2-22.9,27.2-22.9s27.2,10.3,27.2,22.9S478.2,2174.3,463.1,2174.3z
M463.1,2133.5c-12.3,0-22.2,8-22.2,17.9s10,17.9,22.2,17.9s22.2-8,22.2-17.9C485.4,2141.5,475.4,2133.5,463.1,2133.5z"/>


<path class="linePath" d="M569,2172.6c-14.4,0-26.2-9.9-26.2-22s11.8-22,26.2-22s26.2,9.9,26.2,22S583.5,2172.6,569,2172.6z M569,2133.5
c-11.7,0-21.2,7.6-21.2,17s9.5,17,21.2,17s21.2-7.6,21.2-17S580.7,2133.5,569,2133.5z"/>


    <g>


<path class="linePath" d="M516,2317c-11.3,0-23-5.8-34.7-17.3c-3.5-3.4-4.8-9-3.3-14.2c1.3-4.3,4.3-7.3,8-8.1l62.8-12.7c3.6-0.7,7.2,0.8,9.6,4.1
c3.2,4.4,3.5,10.8,0.7,15.5c-7.8,13.5-20.8,30-38.6,32.4C519,2316.9,517.5,2317,516,2317z M487.1,2282.3c-2.7,0.6-3.9,3.4-4.2,4.6
c-0.8,2.8-0.5,6.8,2,9.2c12.1,11.9,23.9,17.1,35,15.6c15.8-2.2,27.7-17.5,35-30c2.1-3.6,1.2-7.7-0.5-10.1c-0.7-1-2.2-2.6-4.5-2.1
L487.1,2282.3z"/>


    </g>


<path class="linePath" d="M471.8,2171.6c-7.2,0-13.1-5.5-13.1-12.3s5.9-12.3,13.1-12.3s13.1,5.5,13.1,12.3S479,2171.6,471.8,2171.6z M471.8,2152
c-4.5,0-8.1,3.3-8.1,7.3s3.6,7.3,8.1,7.3s8.1-3.3,8.1-7.3S476.2,2152,471.8,2152z"/>

<path class="linePath" d="M577.7,2169.6c-7.2,0-13.1-5.5-13.1-12.3s5.9-12.3,13.1-12.3s13.1,5.5,13.1,12.3S584.9,2169.6,577.7,2169.6z M577.7,2150
c-4.5,0-8.1,3.3-8.1,7.3s3.6,7.3,8.1,7.3s8.1-3.3,8.1-7.3S582.2,2150,577.7,2150z"/>


<g>


<path class="linePath" d="M417.4,2147.4l-4.5-3.2l0.6-1.8c0-0.1,0.5-1.5,1.5-4c1-2.7,2.7-6.2,4.6-10c0.9-1.8,2-3.8,3.5-6.4c1.3-2.1,2.8-4.4,4.5-6.8 c1.4-2,3-4,5.3-6.6l3.1-3.2l3.1-2.7c0.8-0.8,1.6-1.4,2.4-1.9c0.3-0.3,0.7-0.5,1-0.8c1.4-1.1,2.6-1.9,3.7-2.5
c0.3-0.2,0.7-0.4,1-0.6c0.8-0.5,1.7-1,2.7-1.5c1-0.4,2-0.8,3-1.2l0.7-0.3c1.2-0.5,2.3-0.6,3.4-0.8c0.2,0,0.5-0.1,0.7-0.1
c0.4,0,0.7-0.1,0.9-0.1c0.9-0.1,1.9-0.3,2.9-0.2c2.4,0,4.7,0.3,6.8,0.8c1.7,0.4,3.5,1,5.5,1.9c1.6,0.7,2.9,1.5,4.1,2.3
c1.1,0.8,2,1.4,2.4,1.9l1.9,1.7l-1.1,4.3l-5.4-0.2c-1.1,0-2.3-0.1-3.6,0c-1.5,0-3.2,0.1-4.6,0.2c-1.6,0.1-3.3,0.4-5,0.7
c-0.9,0.3-1.8,0.5-2.7,0.7c-1,0.2-2,0.5-3,0.8l-0.5,0.2c-0.8,0.3-1.7,0.5-2.6,0.8c-0.5,0.2-1.1,0.4-1.7,0.6
c-0.4,0.2-0.9,0.3-1.3,0.5c-0.1,0.1-0.3,0.1-0.5,0.2c-0.3,0.1-0.5,0.2-0.8,0.3l-1.5,0.8c-0.3,0.2-0.7,0.4-1.1,0.6
c-0.6,0.3-1.2,0.6-1.7,1l-3,2.1l-3.3,2.9c-1.6,1.5-3.2,2.9-4.5,4.5l-0.1,0.1c-1.2,1.3-2.4,2.7-3.5,4.1c-0.4,0.4-0.7,0.9-1.1,1.3
c-1.2,1.5-2.6,3.4-3.8,5.2c-2.3,3.4-4,6.3-5.3,8.5c-1.2,2.1-1.8,3.4-1.8,3.4L417.4,2147.4z M439.4,2109.2l-2.8,2.9
c-1.3,1.5-2.5,2.8-3.4,4.1c0.7-0.7,1.5-1.4,2.2-2.1l0.7-0.7l3-2.6l3-2.1c0.7-0.6,1.6-1,2.3-1.4c0.3-0.2,0.7-0.3,1-0.5l1.8-1
c0.4-0.2,0.8-0.3,1.2-0.5c0.2-0.1,0.3-0.1,0.5-0.2c0.5-0.2,0.8-0.3,1.2-0.5c0.7-0.3,1.4-0.5,2.1-0.8h0.1c0.8-0.2,1.6-0.4,2.4-0.7
l0.5-0.2c1.1-0.3,2.2-0.6,3.3-0.9c0.9-0.2,1.8-0.4,2.6-0.7l0.2-0.1c2-0.4,3.8-0.6,5.6-0.8c2.2-0.2,3.6-0.2,5-0.2
c0.1,0,0.2,0,0.3,0c-0.2-0.1-0.5-0.2-0.7-0.3c-1.6-0.7-3.1-1.2-4.6-1.6c-1.8-0.4-3.7-0.7-5.7-0.6h-0.1H461c-0.6,0-1.3,0.1-2.1,0.2
c-0.3,0-0.6,0.1-0.9,0.1c-0.2,0-0.4,0.1-0.7,0.1c-0.8,0.1-1.6,0.2-2.3,0.5l-0.7,0.3c-0.9,0.3-1.9,0.7-2.7,1.1
c-0.6,0.3-1.3,0.7-2,1.1c-0.4,0.2-0.8,0.5-1.2,0.7c-0.9,0.5-1.9,1.2-3.1,2.1c-0.4,0.3-0.8,0.6-1.2,0.9c-0.7,0.5-1.3,1-1.9,1.5
l-0.1,0.1L439.4,2109.2z"/>

    </g>


    <g>


<path class="linePath" d="M617.8,2165.8l-0.7-2.6c0,0-0.4-1.5-1.2-3.9c-0.9-2.8-2-6.1-3.6-10.1c-0.7-1.9-1.6-4-2.8-6.4c-0.2-0.5-0.5-1-0.8-1.6
c-0.8-1.7-1.7-3.5-2.6-5.1v-0.1c-1-1.9-2.1-3.7-3.3-5.6l-0.7-1.2l-2.3-3.3c-0.4-0.6-1-1.2-1.5-1.9c-0.3-0.4-0.6-0.8-0.9-1.2
c-0.6-0.7-1.2-1.4-1.9-2.1l-0.9-0.9c-0.7-0.7-1.4-1.4-2.1-1.9l-0.6-0.5l-2.2-1.8c-0.8-0.5-1.6-1.1-2.3-1.6l-0.6-0.4
c-0.8-0.7-1.7-1.2-2.6-1.8c-0.8-0.5-1.7-1.1-2.5-1.7c-0.9-0.6-1.6-0.9-2.3-1.3l-0.1-0.1c-0.7-0.4-1.4-0.8-2.3-1.2
c-3-1.4-5.7-2.4-7.7-3l-5.2-1.7l-0.2-4.3l2.4-1c0.6-0.3,1.6-0.6,2.9-1c1.3-0.4,2.8-0.6,4.5-0.7c1.4-0.1,3.5-0.2,5.9,0.2
c0.9,0.1,2.1,0.3,3.3,0.6s2.5,0.8,3.4,1.1c1.1,0.4,2.1,0.9,3,1.4l0.6,0.3c0.9,0.5,2.3,1.2,3.7,2.3l0.6,0.5
c0.9,0.7,1.7,1.4,2.6,2.2l0.1,0.1c0.7,0.7,1.4,1.5,2.1,2.3c0.3,0.3,0.6,0.6,0.9,1c0.8,0.8,1.6,1.8,2.3,2.8
c0.2,0.3,0.4,0.5,0.6,0.8l0.5,0.7c0.8,1,1.5,2,2.2,3.2c0.2,0.4,0.5,0.8,0.8,1.2c0.5,0.8,1.1,1.7,1.7,2.5l2.3,4
c1.3,2.5,2.7,5.4,3.9,8.3c1.2,2.7,2.2,5.5,3,7.9c0.9,2.8,1.6,5.2,2.2,7.4c1.2,4.3,2.1,8.3,2.6,11.2c0.5,2.7,0.7,4.3,0.7,4.3l0.3,2
L617.8,2165.8z M595.5,2114c1,0.7,1.9,1.6,2.7,2.5l0.9,0.9c0.8,0.8,1.6,1.6,2.3,2.5c0.3,0.3,0.6,0.7,0.9,1.1
c0.5,0.7,1.1,1.4,1.7,2.1l2.4,3.5l0.7,1.2c0,0.1,0.1,0.1,0.1,0.2c-0.5-0.9-0.9-1.8-1.4-2.7l-2.2-3.8c-0.5-0.7-1-1.5-1.5-2.3
c-0.3-0.4-0.6-0.9-0.9-1.3c-0.6-1-1.3-1.8-2-2.8l-0.5-0.7c-0.2-0.3-0.4-0.5-0.6-0.8c-0.7-0.9-1.3-1.7-1.9-2.4
c-0.3-0.4-0.6-0.7-0.9-1c-0.7-0.7-1.3-1.4-1.9-2c-0.8-0.7-1.6-1.3-2.4-2l-0.6-0.5c-0.8-0.6-1.6-1.2-2.8-1.7l-0.7-0.3
c-0.8-0.4-1.6-0.8-2.4-1.2c-0.7-0.3-2-0.7-2.9-0.9c-1-0.2-2-0.4-2.8-0.5c-1.9-0.3-3.6-0.2-4.8-0.1c-0.2,0-0.3,0-0.5,0
c1.6,0.6,3.5,1.3,5.5,2.3c1,0.5,1.8,0.9,2.6,1.3c0.9,0.5,1.7,0.9,2.7,1.5l0.3,0.2c0.7,0.5,1.5,1,2.3,1.5c1,0.6,2,1.3,3,2.1
l0.5,0.4c0.7,0.5,1.4,1,2.2,1.5l0.2,0.2L595.5,2114z"/>


    </g>


<path class="linePath" d="M506.5,1925.3h-5v-210c0-1.9-1.6-3.5-3.5-3.5H150c-4.7,0-8.5-3.8-8.5-8.5v-132c0-4.7,3.8-8.5,8.5-8.5h348
c1.9,0,3.5-1.6,3.5-3.5v-24c0-1.9-1.6-3.5-3.5-3.5H393c-4.7,0-8.5-3.8-8.5-8.5v-168c0-4.7,3.8-8.5,8.5-8.5h285
c4.7,0,8.5,3.8,8.5,8.5v168c0,4.7-3.8,8.5-8.5,8.5h-96c-1.9,0-3.5,1.6-3.5,3.5v24c0,1.9,1.6,3.5,3.5,3.5h204c1.9,0,3.5-1.6,3.5-3.5
v-118.4c0-4.1-0.6-12.4-1.3-22c-1.8-24.4-4-54.8-0.6-64.6c4.4-12.8,16.3-27.9,30.4-32.1c9.9-2.9,27.3-2.1,31.5,2.7
c0.1,0.1,0.2,0.3,0.3,0.4c3.9,5.9,2.1,17.4,0.5,27.5c-0.5,3.3-1.2,7.6-1.2,9.9c4.5-3,15.9-12.6,21.1-18.5c3.2-4,9.7-12.3,10.3-18
c0.7-6.7-2.6-11.8-5.6-14.9c-6-6.4-16.3-10.6-24.9-10.2c-9.6,0.5-28.4,12.2-38.4,18.5c-1.7,1.1-3.2,2-4.4,2.7c-4,2.4-7.1,1.7-9,0.6
c-8.6-4.8-8.8-25.4-8.8-27.7v-14.6c0-3.1,1.7-5.8,4.4-7.2l130.2-65.1c1.2-0.6,1.9-1.8,1.9-3.1s-0.7-2.5-1.9-3.1L793.9,1137
c-2.7-1.4-4.4-4.1-4.4-7.2V995.3c0-1.9-1.6-3.5-3.5-3.5H507.1c-2.8,0-5.3-1.4-6.8-3.8l-37.6-60.2c-1.7-2.7-1.7-5.9-0.2-8.6
c1.5-2.7,4.3-4.4,7.4-4.4H498c1.9,0,3.5-1.6,3.5-3.5c0-3.2,1.8-6.2,4.7-7.6c2.9-1.4,6.3-1.1,8.9,0.8l16.8,12.6
c1.1,0.8,2.5,0.9,3.7,0.3c1.2-0.6,1.9-1.8,1.9-3.1v-57c0-1.4-0.7-2.5-1.9-3.1s-2.6-0.5-3.7,0.3l-16.8,12.6c-2.6,1.9-6,2.3-8.9,0.8
c-2.9-1.4-4.7-4.4-4.7-7.6v-9c0-1.9-1.6-3.5-3.5-3.5H366c-1.9,0-3.5,1.6-3.5,3.5v60c0,1.9,1.6,3.5,3.5,3.5h51.5
c3.5,0,6.5,2,7.9,5.2c1.3,3.2,0.6,6.8-1.8,9.3l-60.1,60.1c-1.5,1.5-3.5,2.3-5.7,2.3H150c-4.7,0-8.5-3.8-8.5-8.5v-357
c0-4.7,3.8-8.5,8.5-8.5h134.4c3.2,0,6,1.9,7.3,4.8l26.5,59.6c0.7,1.5,2.1,1.9,3.2,1.8c1.1-0.2,2.3-0.9,2.5-2.6l11.2-89.4
c0.5-4,3.7-6.9,7.7-7s7.4,2.6,8.1,6.5l12,64.1c0.5,2.5,2.7,2.5,3.2,2.4c0.4,0,2.7-0.3,2.8-2.8l5.2-98.6c0.2-3.9,2.9-6.9,6.7-7.5
c3.8-0.6,7.3,1.4,8.7,5c0.1,0.2,0.2,0.5,0.2,0.7l8.7,64.9c0.7,1.7,2,2.5,2.9,2.4s1.1-1.3,1.1-2l5.1-78.9c0.4-4.2,3.5-7.2,7.7-7.4
s7.6,2.7,8.2,6.8l12.8,85.2c0.4,2.5,2.6,2.6,3.1,2.6c0.4,0,2.7-0.2,2.9-2.8l1.3-16.6c0.3-4.4,3.7-7.7,8.2-7.8
c4.5-0.2,8,2.8,8.7,7.2l2,12.7c0.4,2.6,2.7,2.6,3.1,2.5c0.5,0,2.7-0.3,2.9-2.8L470,588c0.3-4.9,4.2-7.5,7.9-7.6
c3.7-0.1,7.7,2.5,8.1,7.4v0.1l2.5,95.2c0.1,1,2.1,1.9,4.6,2.2c4.2,0.4,7.9-1,8.4-2.5l27-180v-0.1c1-3.7,3.7-6.1,7-6
c3.2,0,5.9,2.4,6.8,6v0.2l18.6,128.4c0.5,1.7,1.9,2.3,3.1,2.2c1.2-0.1,2.6-0.9,2.7-2.8l2.5-35.6c0.3-4.5,3.7-7.7,8.2-7.9
c4.5-0.1,8.1,2.8,8.7,7.3l4.3,29.8c0.3,2.4,2.5,2.6,3,2.6l0,0c0.4,0,2.6-0.1,3-2.6l6.1-49.1c0.5-4.2,3.9-7.1,8.1-7
c4.3,0.1,7.5,3.1,7.8,7.4l2.5,33c0.2,2.1,1.7,3,3.1,3.2c1.4,0.2,3.1-0.4,3.7-2.4l5.9-17.7c1.3-4,5.2-6.4,9.4-5.7s7.1,4.1,7.1,8.4
v40.5c0,2.6,2.3,3,2.8,3s2.8,0.1,3.2-2.5L677.2,511c0.6-3.8,3.7-6.5,7.6-6.7c3.9-0.2,7.1,2.3,8.1,6.1l28.5,114.1
c0.3,1.3,1.5,2.3,2.9,2.3H786c1.9,0,3.5-1.6,3.5-3.5v-204c0-1.9-1.6-3.5-3.5-3.5H0v-5h786c4.7,0,8.5,3.8,8.5,8.5v204
c0,4.7-3.8,8.5-8.5,8.5h-61.7c-3.7,0-6.9-2.5-7.8-6.1L688,511.6c-0.4-1.7-1.8-2.3-3-2.3s-2.5,0.7-2.8,2.5l-20.7,124.3
c-0.8,4.8-4.9,7-8.6,6.7c-3.7-0.3-7.3-3.1-7.3-8v-40.5c0-2.2-1.5-3.2-2.9-3.5c-1.4-0.2-3.2,0.3-3.9,2.3l-5.9,17.7
c-1.3,3.9-5,6.3-9.1,5.7c-4.1-0.5-7.1-3.6-7.4-7.8l-2.5-33c-0.2-2.6-2.5-2.8-2.9-2.8s-2.7,0.1-3.1,2.6l-6.1,49.1
c-0.5,4.1-3.7,7-7.9,7h-0.1c-4.1,0-7.3-2.8-7.9-6.9l-4.3-29.8c-0.4-3-3.1-3-3.6-3s-3.2,0.3-3.4,3.2L572,631c-0.3,4-3.3,7.1-7.3,7.4
c-4,0.3-7.5-2.1-8.5-6v-0.2l-18.6-128.4c-0.4-1.3-1.1-2.1-2-2.1l0,0c-0.9,0-1.7,0.8-2.1,2.2l-27,180v0.1c-1.3,4.9-7.9,6.9-13.7,6.3
c-5.4-0.5-8.9-3.1-9.2-6.8v-0.1l-2.5-95.2c-0.2-2.6-2.6-2.7-3-2.7c-0.5,0-2.8,0.2-3,2.8l-1.7,32.7c-0.2,4.2-3.3,7.4-7.6,7.6
c-4.2,0.2-7.7-2.6-8.3-6.8l-2-12.7c-0.3-2.3-2.1-3-3.6-3c-1.5,0.1-3.2,0.9-3.4,3.2l-1.3,16.6c-0.3,4.2-3.5,7.2-7.7,7.4
c-4.2,0.1-7.6-2.7-8.2-6.8l-12.8-85.2c-0.4-2.5-2.6-2.6-3.1-2.6c-0.4,0-2.7,0.2-2.9,2.8l-5.1,78.9c-0.4,4.3-3,6.2-5.4,6.5
c-3.4,0.5-6.9-1.9-8.4-5.7c-0.1-0.2-0.1-0.5-0.2-0.7l-8.7-64.9c-0.7-1.5-2.1-1.9-3.2-1.7c-1.2,0.2-2.4,1-2.5,2.8l-5.2,98.6
c-0.2,4.2-3.3,7.3-7.5,7.6s-7.6-2.4-8.4-6.5l-12-64.1c-0.3-1.9-1.8-2.5-3-2.5s-2.7,0.7-2.9,2.6L328.9,682c-0.5,3.6-3.2,6.4-6.8,6.9
c-3.6,0.5-7-1.3-8.5-4.7l-26.5-59.6c-0.5-1.1-1.6-1.8-2.7-1.8H150c-1.9,0-3.5,1.6-3.5,3.5v357c0,1.9,1.6,3.5,3.5,3.5h207.7
c0.8,0,1.6-0.3,2.1-0.9l60.1-60.1c1.5-1.5,1-3.3,0.8-3.8s-1.1-2.2-3.2-2.2H366c-4.7,0-8.5-3.8-8.5-8.5v-60c0-4.7,3.8-8.5,8.5-8.5
h132c4.7,0,8.5,3.8,8.5,8.5v9c0,1.4,0.7,2.5,1.9,3.1c1.2,0.6,2.6,0.5,3.7-0.3l16.8-12.6c2.6-1.9,6-2.3,8.9-0.8s4.7,4.4,4.7,7.6v57
c0,3.2-1.8,6.2-4.7,7.6c-2.9,1.4-6.3,1.1-8.9-0.8l-16.8-12.6c-1.1-0.8-2.5-0.9-3.7-0.3c-1.2,0.6-1.9,1.8-1.9,3.1
c0,4.7-3.8,8.5-8.5,8.5h-28.2c-1.3,0-2.4,0.7-3.1,1.8c-0.6,1.1-0.6,2.5,0.1,3.6l37.6,60.2c0.6,0.9,1.5,1.4,2.5,1.4H786
c4.7,0,8.5,3.8,8.5,8.5v134.6c0,1.1,0.6,2.2,1.7,2.7l130.2,65.1c2.9,1.4,4.7,4.4,4.7,7.6s-1.8,6.2-4.7,7.6L796.2,1278
c-1,0.5-1.7,1.5-1.7,2.7v14.6c0,11.3,2.7,21.4,6.3,23.4c0.7,0.4,1.8,0.7,4-0.6c1.2-0.7,2.7-1.7,4.3-2.7c11.2-7,29.9-18.8,40.9-19.3
c10.1-0.5,21.7,4.2,28.8,11.7c5.2,5.6,7.6,12.1,6.9,18.9c-0.7,7.1-7.7,15.8-11.4,20.6l-0.1,0.1c-3.2,3.7-21.5,21.1-26.2,21.1
c-0.1,0-0.1,0-0.2,0c-1-0.1-1.8-0.6-2.4-1.4c-1.7-2.3-1.1-6.5,0.2-15.1c1.3-8.2,3-19.5,0.3-23.9c-2.3-2.2-16.1-4.2-26.3-1.1
c-12.4,3.6-23.2,17.6-27.1,28.9c-3.1,8.9-0.7,41.2,0.8,62.7c0.7,9.7,1.3,18.1,1.3,22.4v118.4c0,4.7-3.8,8.5-8.5,8.5H582
c-4.7,0-8.5-3.8-8.5-8.5v-24c0-4.7,3.8-8.5,8.5-8.5h96c1.9,0,3.5-1.6,3.5-3.5v-168c0-1.9-1.6-3.5-3.5-3.5H393
c-1.9,0-3.5,1.6-3.5,3.5v168c0,1.9,1.6,3.5,3.5,3.5h105c4.7,0,8.5,3.8,8.5,8.5v24c0,4.7-3.8,8.5-8.5,8.5H150
c-1.9,0-3.5,1.6-3.5,3.5v132c0,1.9,1.6,3.5,3.5,3.5h348c4.7,0,8.5,3.8,8.5,8.5V1925.3z"/>


<path class="linePath" d="M811.1,1244.2l-2.2-4.5l27.4-13.7c4.5-2.2,7.3-6.7,7.3-11.8v-16.7c0-5-2.8-9.5-7.3-11.8l-27.4-13.7l2.2-4.5l27.4,13.7
c6.2,3.1,10,9.3,10,16.2v16.7c0,6.9-3.8,13.1-10,16.2L811.1,1244.2z"/>


<path class="linePath" d="M655.5,1508.5h-240c-7.1,0-13-5.8-13-13v-123.1c0-7.1,5.8-13,13-13h240.1c7.1,0,13,5.8,13,13v123.1
C668.5,1502.7,662.7,1508.5,655.5,1508.5z M415.5,1364.5c-4.4,0-8,3.6-8,8v123.1c0,4.4,3.6,8,8,8h240.1c4.4,0,8-3.6,8-8v-123.1
c0-4.4-3.6-8-8-8H415.5z"/>


<path class="linePath" d="M611.9,1490H439.1c-5,0-9.1-4.1-9.1-9.2v-91.5c0-5.1,4.1-9.2,9.1-9.2h172.8c5,0,9.1,4.1,9.1,9.2v91.5

C621,1485.9,616.9,1490,611.9,1490z M439.1,1382c-3.9,0-7.1,3.2-7.1,7.2v91.5c0,4,3.2,7.2,7.1,7.2h172.8c3.9,0,7.1-3.2,7.1-7.2
v-91.5c0-4-3.2-7.2-7.1-7.2H439.1z"/>

<rect class="linePath" x="432" y="1397" width="189" height="2"/>

<circle class="linePath" cx="441.5" cy="1389.5" r="4.5"/>

<circle class="linePath" cx="455.5" cy="1389.5" r="4.5"/>

<circle  cx="469.5" cy="1389.5" r="4.5"/>

<text transform="matrix(1 0 0 1 480 1457.3804)" class="st0 st1">&lt;/&gt;</text>

<text transform="matrix(9.799059e-03 1 -1 9.799059e-03 799.998 417.0004)" class="st2 st3">SOUND</text>

<text transform="matrix(1 0 0 1 189 978)" class="st2 st1">FILM</text>

<text transform="matrix(1 0 0 1 670.0456 978)" class="st2 st1">ANIM</text>

<text transform="matrix(4.489659e-11 1 -1 4.489659e-11 803.8828 986.0002)" class="st2 st1 st4">A</text>

<text transform="matrix(4.489659e-11 1 -1 4.489659e-11 803.8828 1016.7002)" class="st2 st1">TION</text>

<text transform="matrix(1 0 0 1 480 1337)" class="st2 st1">WEB</text>

</g>

</svg>
</div>      
    </main>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript" src="../js/Snap.svg-0.4.1/dist/snap.svg-min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>

  <script>


$(document).ready(function() {
  //variable for the 'stroke-dashoffset' unit
  var $dashOffset = $(".linePath").css("stroke-dashoffset");
  //on a scroll event - execute function
  $(window).scroll(function() {
    //calculate how far down the page the user is 
    var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);
    //convert dashoffset pixel value to interger
    var $newUnit = parseInt($dashOffset, 10);
    //get the value to be subtracted from the 'stroke-dashoffset'
    var $offsetUnit = $percentageComplete * ($newUnit / 100);
    //set the new value of the dashoffset to create the drawing effect
    $(".linePath").css("stroke-dashoffset", $newUnit - $offsetUnit);
  });
});


    </script>
</body>
</html>

0条回答
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)