Building Arrows

In this example below you will see how to do a Building Arrows with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ourpathway, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ourpathway ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Building Arrows</title>
  
  
  <link rel='stylesheet prefetch' href='https://dev-new.pathwaysupport.org/styles/mixins.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <article>
  <div>
    <h1>Scroll Down to see Animation</h1>
    <h2>Main page Title</h2>
    <h3>Subheading</h3>
    <p>A random paragraph to give the page height and to enable the testing of scrolling animation of the arrows, which will presumably start out with one and as the user scrolls will appear one at a time, building to the fourth arrow.</p>
    <p>another paragraph to give the page some space to scroll.</p>
    <h3>Subheading 2</h3>
    <p>and another to further our purposes and to make the page a vast space for the use of scrolling</p>
    <p>Still need more space so here is another paragraph and we will make it long by typing several extra words that we don't actually need, but then again we don't actully need any of these paragraphs becasue they are just filled with unimportant words.</p>
    <h3>Subheading 3</h3>
    <p>A random paragraph to give the page height and to enable the testing of scrolling animation of the arrows, which will presumably start out with one and as the user scrolls will appear one at a time, building to the fourth arrow.</p>
    <p>another paragraph to give the page some space to scroll.</p>
    <h3>Subheading 3</h3>
    <p>A random paragraph to give the page height and to enable the testing of scrolling animation of the arrows, which will presumably start out with one and as the user scrolls will appear one at a time, building to the fourth arrow.</p>
    <p>another paragraph to give the page some space to scroll.</p>
  </div>
  <div class="arrows" id="degree">
    <div class="arrow1">
      <img src="https://pathwaysupport.org/cdn/ref/pc-logo2.png" onerror="this.onerror=null;this.src='/Content/images/pc-logo2.png';">
    </div>
    <div class="arrow2">
      <h4>Certificate</h4>
    </div>
    <div class="arrow3">
      <h4>Associate<br>Degree</h4>
    </div>
    <div class="arrow4">
      <h4>Bachelor's<br>Degree</h4>
    </div>
  </div>
  <div>
    <h3>Subheading 4</h3>
    <p>and another to further our purposes and to make the page a vast space for the use of scrolling</p>
    <p>Still need more space so here is another paragraph and we will make it long by typing several extra words that we don't actually need, but then again we don't actully need any of these paragraphs becasue they are just filled with unimportant words.</p>
  </div>
</article>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ourpathway/building-arrows-qXadeG */
article {
  margin: 60px 10%;
}

h4 {
  text-transform: uppercase;
  text-align: center;
  color: white;
}

p {
  max-width: 300px;
}

.arrows {
  position: relative;
  margin: 100px auto;
}
.arrows div {
  height: 0px;
  width: 0px;
  margin: 5px auto 0;
  display: block;
  vertical-align: baseline;
  position: relative;
  border-bottom: 50px solid;
  border-left: 100px solid;
  border-right: 100px solid;
  transition: all 3s;
}
.arrows div:not(.arrow1) {
  opacity: 0;
}
.arrows div > * {
  margin-top: 25px;
  margin-right: -100px;
  margin-left: -100px;
}
.arrows div:after {
  border-top: 50px solid;
  border-bottom: 50px solid transparent;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  content: "";
  height: 0;
  width: 0;
  right: -100px;
  bottom: -150px;
  position: absolute;
  z-index: -1;
}
.arrows div.arrow1 {
  background-color: #F0A11F;
  border-color: #f0a11f;
}
.arrows div.arrow1 img {
  height: 25px;
  padding-left: 20px;
}
.arrows div.arrow1:after {
  border-top-color: #F0A11F;
}
.arrows div.arrow2 {
  border-color: cornflowerblue;
  border-top: 50px solid transparent;
}
.arrows div.arrow2:after {
  border-top-color: cornflowerblue;
}
.arrows div.arrow3 {
  border-color: steelblue;
  border-top: 50px solid transparent;
}
.arrows div.arrow3:after {
  border-top-color: steelblue;
}
.arrows div.arrow4 {
  border-color: midnightblue;
  border-top: 50px solid transparent;
}
.arrows div.arrow4:after {
  border-top-color: midnightblue;
}
@media (min-width: 767px) {
  .arrows div {
    min-width: 100px;
    display: inline-block;
    border-top: 50px solid;
    border-bottom: 50px solid;
    border-left: 35px solid transparent !important;
    border-right: 0;
    vertical-align: middle;
  }
  .arrows div > * {
    margin-top: -12px;
    margin-left: -80px;
    padding-left: 10px;
  }
  .arrows div:after {
    border: 35px solid;
    border-top: 50px solid transparent !important;
    border-bottom: 50px solid transparent;
    border-right: 50px solid transparent;
    content: "";
    right: -85px;
    top: -50px;
    position: absolute;
    z-index: -1;
  }
  .arrows div.arrow1 {
    background-color: #F0A11F;
    border-color: #f0a11f;
  }
  .arrows div.arrow1 img {
    height: 25px;
    margin-left: -40px;
    padding-left: 8px;
  }
  .arrows div.arrow1:after {
    border-left-color: #F0A11F;
  }
  .arrows div.arrow2 {
    border-color: cornflowerblue;
    right: 50px;
  }
  .arrows div.arrow2:after {
    border-left-color: cornflowerblue;
  }
  .arrows div.arrow3 {
    border-color: steelblue;
    right: 200px;
  }
  .arrows div.arrow3:after {
    border-left-color: steelblue;
  }
  .arrows div.arrow4 {
    border-color: midnightblue;
    right: 350px;
  }
  .arrows div.arrow4:after {
    border-left-color: midnightblue;
  }
}


/*Downloaded from https://www.codeseek.co/ourpathway/building-arrows-qXadeG */
jQuery(document).ready(function() {
  jQuery(window).scroll(function() {
    var position = measureScroll();
    arrows("#degree", position);
  });
  // jQuery(window).resize(function() {
  //   location.reload( _.debounce());
  //   console.log("resize happened");
  // });
});

function arrows(id, location) {
  var targetPosition = jQuery('#degree').position().top;
   var targetHeight = jQuery('#degree').outerHeight();
  
  if (location[0] + location[1] + targetHeight >= targetPosition) {
    //change width to breakpoint when moving over
    if (jQuery(window).width() >= 767){
      jQuery(id + "> div").css({"opacity":"1", "right":"0"});
    }else {
      jQuery(id + "> div").css("opacity","1");
    }
  }
}

function measureScroll() {
  var scrollTop = jQuery(document).scrollTop();
   var viewportHeight = jQuery(window).height();
var values = [scrollTop, viewportHeight];
  return values;
  // if (scrollTop + viewportHeight + targetHeight >= targetPosition) {
  //   arrows("#degree");
  // }
  // viewport stretches from scrollTop to (scrollTop + viewportHeight)
}

Comments