我在插画家中绘制了一个SVG图像。它类似于时间表。当我向上和向下滚动页面时（使用jQuery / JavaScript），我希望它能够进出。
实际上，如果没有JavaScript，布局就可以了（只有一件事）并且没有任何代码。如果没有JavaScript（或没有JavaScript功能的用户），用户已经看到了SVG图像，只需滚动到页面底部，而不会绘制图像。
问题1
我想用JavaScript或jQuery来做这件事。我已经研究过高低，尽管我理解了一些JavaScript和jQuery原理，但我并没有理解。
我已经看过＆＃34; Draw SVG＆＃34;来自Greensock，但你必须付钱才能访问该插件，我已经看过＆＃34; snap.svg＆＃34;但似乎没有记录，并且似乎不支持滚动。在jQuery或纯JavaScript中有没有一个公平的方法呢？
问题2
线的起点（左侧）距离边缘几个像素。我似乎无法让它与窗户的左侧齐平。有什么想法吗？
抱歉，目前无法发布图片
<!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"></></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>