我希望我的svg动画在向下滚动到div时启动

时间：2017-08-16 13:59:07

标签： javascript jquery html css svg

我的名字是DanielGötz，我目前正在我的投资组合网站上工作，但我遇到了问题。我的SVG动画在页面加载时启动，但我希望它在我滚动到它时启动。

我的网站：http://20162.hosts.ma-cloud.nl/portfoliowebsite/

如果向下滚动到H1，则称为“Mijn技能”您可以看到Photoshop徽标已设置动画。但我希望这个动画在向下滚动时启动。

我不知道怎么做，我真的希望有人可以帮助我。

HTML CODE： 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <meta name="author" content="Daniel Gotz">
  <title>Daniel G&ouml;tz | Porfolio </title>
  <link href="css/aos.css">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/styles.css" rel="stylesheet">
  <link href="css/scrolling-nav.css" rel="stylesheet">
  <link href="dist/hamburgers.css" rel="stylesheet">
  <link href="css/animate.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet">
  <script src="js/typed.js" type="text/javascript">
  </script>
</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
  <a class="page-scroll animated bounceInUp" href="#intro" id="myBtn" title="Go to top"> <img src="links/up-arrow.svg"> </a>
  <!-- Navigation -->
  <section id="intro" class="intro-section">
    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header page-scroll">
        <button class="hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class=" hamburger-box">
    <span class=" hamburger-inner"></span> </span>
        </button>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse ">
        <ul class="nav navbar-nav right">
          <li class="hidden">
            <a class="page-scroll " href="#page-top"></a>
          </li>
          <li> <a class="page-scroll " href="#intro">Intro</a> </li>
          <li> <a class="page-scroll" href="#mijnwerk">Mijn werk</a> </li>
          <li> <a class="page-scroll" href="#overdaniel">Over Daniel</a> </li>
          <li> <a class="page-scroll" href="#contact">Contact</a> </li>
        </ul>
      </div>
    </nav>
    <div class="overlay" id="overlay"></div>
    <div class="title">
      <div id="typed-strings">
        <h1> Hello,</h1>
        <h1> My name is Daniel G&ouml;tz.</h1>
        <h1> I'm an Interaction Designer.</h1>
        <h1> Discover my work.</h1> </div> <span id="typed"></span></div>
    <div class="berg"> <img src="links/backgroundmountain.svg"> </div>
  </section>
  <section class="mijnwerk-section">
    <div class="container">
      <div id="mijnwerk" class="center">
        <h2> Mijn werk </h2>
        <div class="row">
          <div class="col-sm-4 col-xs-12 .col-padding">
            <div class="project1 col-centered"> <img class="fit" src="links/stadalsspelthumbnail.jpg">
              <div class="blackframe"></div>
              <div class="projecttext"> Stad als spel</div>
              <div class="projecttextmobile"> Stad als spel</div>
            </div>
          </div>
          <div class="col-sm-4 col-xs-12 .col-padding">
            <div class="project1 col-centered"> <img class="fit" src="links/stadalsspelthumbnail.jpg">
              <div class="blackframe"></div>
              <div class="projecttext"> Stad als spel</div>
              <div class="projecttextmobile"> Stad als spel</div>
            </div>
          </div>
          <div class="col-sm-4 col-xs-12 .col-padding">
            <div class="project1 col-centered"> <img class="fit" src="links/stadalsspelthumbnail.jpg">
              <div class="blackframe"></div>
              <div class="projecttext"> Stad als spel</div>
              <div class="projecttextmobile"> Stad als spel</div>
            </div>
          </div>
          <div class="col-sm-4 col-xs-12 .col-padding">
            <div class="project1 col-centered"> <img class="fit" src="links/stadalsspelthumbnail.jpg">
              <div class="blackframe"></div>
              <div class="projecttext"> Stad als spel</div>
              <div class="projecttextmobile"> Stad als spel</div>
            </div>
          </div>
          <div class="col-sm-4 col-xs-12 .col-padding">
            <div class="project1 col-centered"> <img class="fit" src="links/stadalsspelthumbnail.jpg">
              <div class="blackframe"></div>
              <div class="projecttext"> Stad als spel</div>
              <div class="projecttextmobile"> Stad als spel</div>
            </div>
          </div>
          <div class="col-sm-4 col-xs-12 .col-padding">
            <div class="project1 col-centered"> <img class="fit" src="links/stadalsspelthumbnail.jpg">
              <div class="blackframe"></div>
              <div class="projecttext"> Stad als spel</div>
              <div class="projecttextmobile"> Stad als spel</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sea"> <img src="links/backgroundsea.svg"> </div>
  </section>
  <section class="services-section">
    <div id="overdaniel" class="center">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-xs-12 text">
            <div class="h3text">
              <h3> Over Daniel G&ouml;tz </h3> </div>
            <div class="ptext">
              <p> Mijn naam is Daniel, ik ben 18 jaar en studeer aan Het mediacollege Amsterdam als interactief vormgever. </p>
              <p> Ik ben een leergierige student en wil graag steeds nieuwe dingen leren en uitproberen, zodat ik uiteindelijk een hele goede interactieve designer word. </p>
              <p> Ik ben bekend met veel codetalen zoals: HTML, CSS, PHP en javascript. </p>
              <p> Ook ben ik belend met programma’s zoals Photoshop, Illustrator, Indesign, permiere pro en After Effects. En tot slot kan ik ook Bootstrap, Jquery en Mediaqueries toepassen. </p>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="foto"> </div>
          </div>
          <div class="col-xs-12">
            <div class="h3text">
              <h3> Mijn skills</h3> </div>
          </div>
            <div class="col-xs-4">
              <div class="aos-item" data-aos="fade-up">
                <div class="photoshop">
                  <object id="my-svg-id" type="image/svg+xml" data="links/photshop_animated.svg"></object>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="contact" class="contact-section"> </section>
  <!-- jQuery -->
  <script>
    var typed = new Typed('#typed', {
      stringsElement: '#typed-strings'
      , typeSpeed: 20
      , backSpeed: 20
      , backDelay: 1000
    , })
  </script>
  <script>
    new Vivus('my-svg-id', {
      type: 'delayed'
      , duration: 200
    }, myCallback);
  </script>
  <script src="js/jquery.js"></script>
  <!-- Bootstrap Core JavaScript -->
  <script src="js/bootstrap.min.js"></script>
  <!-- Scrolling Nav JavaScript -->
  <script src="js/jquery.easing.min.js"></script>
  <script src="js/scrolling-nav.js"></script>
  <script src="js/hamburgers.js"></script>
  <script src="dist/vivus.js"></script>
</body>

</html>

CSS代码： 

body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;

}

html {
  width: 100%;
  height: 100%;
}

.overflow {
  overflow-x: hidden;
}

ul li a {
  width: 125px;
  text-align: center;
}

ul li a:before {
  content: "";
  width: 0px;
  height: 3px;
  background: white;
  position: absolute;
  top: 110%;
  left: 0;
  transition: .5s;
  mix-blend-mode: multiply;
}

ul li a:after {
  content: "";
  width: 0px;
  height: 3px;
  background: white;
  position: absolute;
  top: 110%;
  right: 0;
  transition: .5s;
  mix-blend-mode: multiply;
}

ul li:hover a:before {
  width: 50%;
  transform: translateX(100%)
}

ul li:hover a:after {
  width: 50%;
  transform: translateX(-100%)
}

.intro-section {
  height: 100%;
  background: #2ecc71;
  color: white;
  text-align: center;
}

.mijnwerk-section {
  width: 100%;
  min-height: 120vh;
  text-align: center;
  background: #27ae60;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-bottom: 50px;
}

.services-section {
  width: 100%;
  min-height: 120vh;
  text-align: center;
  background: #27ae60;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-bottom: 50px;  background: #3498db;
}

.contact-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
}

.home {
  height: 100vh;
  width: 100vw;
  background-color: #2ecc71;
}

.mijnwerk {
  height: 100vh;
  width: 100vw;
  background-color: #27ae60;
}

.navbar-default {
  background: none;
  border-color: transparent;
  z-index: 3;
  border: 0;
}

.navbar.navbar-default {
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navbar.navbar-default .navbar-collapse {
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.right {
  float: right;
  text-align: right;
}

.navbar-default .navbar-nav>li>a {
  font-family: 'Roboto', sans-serif;
  color: #ecf0f1;
  font-size: 14px;
}

.nav>li>a {
  padding: 15px 25px;
  border-style: none;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: #ecf0f1;
  border-style: none;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background: none
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-style: none;
}

h1 {
  font-size: 37px;
  font-family: 'Exo 2', sans-serif;
  font-weight: 900;
  line-height: 60px;
}

.title {
  font-family: 'Exo 2', sans-serif;
  text-align: center;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 37px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  z-index: 3;
  min-width: 1000px;
}

.berg {
  position: absolute;
  width: 100%;
  bottom: 0;
  margin: 0 0 -2px 0;
  z-index: 2
}

.sea {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
  margin: 0 0 -2px -1px;
}

.overlay {
  position: fixed;
  top: 0;
  z-index: 2;
  display: none;
  overflow: auto;
  width: 100%;
  height: 100%;
  background: #333;
}

.project1 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  height: 200px;
  width: 100%;
  max-width: 300px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  z-index: 2;
}

.project1 img {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  height: 100%;
  transition: all .5s ease-in-out;
}

.project1:hover img {
  transform: scale(1.3);
}

.blackframe {
  top: 100%;
  position: relative;
  height: 200px;
  width: 100%;
  background-color: rgba(0, 0, 0, .3);
  max-width: 300px;
  transition: all .3s ease-in-out;
}

.project1:hover .blackframe {
  transform: translateY(-100%);
}

.project1:hover .projecttext {
  transform: translatex(-100%);
}

.col-padding {}

.col-centered {
  float: none;
  margin: 15px auto;
}

.projecttext {
  position: relative;
  top: 100%;
  width: 100%;
  max-width: 300px;
  height: 50px;
  background-color: #2c3e50;
  line-height: 50px;
  text-align: center;
  margin-left: 100%;
  margin-top: -250px;
  transition: all .3s ease-in-out;
  color: white;
}

h2 {
  padding-top: 40px;
  font-size: 24spx;
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  color: white;
  padding-bottom: 20px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.projecttextmobile {
  position: relative;
  top: 75%;
  width: 100%;
  max-width: 300px;
  height: 50px;
  background-color: #2c3e50;
  line-height: 50px;
  text-align: center;
  color: white;
}

@media screen and (min-width: 768px) {
  .projecttextmobile {
    visibility: hidden;
  }
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #2c3e50;
  color: white;
  cursor: pointer;
  height: 40px;
  width: 40px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#myBtn img {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 15px;
}

#myBtn:hover {
  background-color: #34495e;
}

@media only screen and (max-width: 600px) {

  #myBtn {
    height: 50px;
    width: 50px;
  }
}



.text p {
  float: left;
  text-align: left;
  color: white;
  max-width: 450px;
    margin-right: auto;
  margin-left: auto;
}

.foto {
  height: 400px;
  width: 300px;
  background-color:white;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

h3 {
  margin-top: -0px;
  float: left;
  font-size: 24px;
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  color: white;
  padding-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   margin: 0 auto;


}


.h3text{
  width: 100%;
  height: 50px;
   margin: 0 auto;


}
#overdaniel {
  padding-top: 20px;
}

.typedtext{
  margin-top: -0px;
  float: left;
  font-size: 24px;
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  color: white;
  padding-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   margin: 0 auto;


}

@media(min-width:767px) {
  .navbar {}
  .top-nav-collapse {
    padding: 0;
  }
}

@media(max-width:767px) {
  ul li:hover a:before {
    display: none;
  }
  ul li:hover a:after {
    display: none;
  }
  ul li a {
    text-align: right;
  }
  h3 {
float: none;
  }

  .text p {
    max-width: none;
    padding-left:  50px;
    padding-right: 50px;

  }

  .foto {
    margin-bottom: 20px;
    margin-top: 20px;
  }

    .title {
top: 50%;
    font-size: 20px;
    min-width: 500px;
  }

}

.typed-cursor {
  opacity: 1;

  -webkit-animation: blink 1.0s infinite;
  -moz-animation: blink 1.0s infinite;
  -ms-animation: blink 1.0s infinite;
  -o-animation: blink 1.0s infinite;
  animation: blink 1.s infinite;
}

@-keyframes blink {
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}

@-webkit-keyframes blink{
  0% { opacity:1; }          
  50% { opacity:0; }
  100% { opacity:1; }
}

@-moz-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}

@-ms-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}

@-o-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}

.photoshop {
height: 100px;
  width: 100px;

}

0 个答案:

没有答案
相关问题
最新问题