Building Hexagons

In this example below you will see how to do a Building Hexagons 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 Hexagons</title>
  
  
  
      <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-hexagons-NXmYeg */
article {
  margin: 60px 10%;
}

.showing {
  opacity: 1 !important;
}

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

p {
  max-width: 300px;
}

.arrows {
  position: relative;
  margin: 90px auto 200px auto;
}
.arrows div {
  height: 0px;
  width: 0px;
  margin: 5px auto 0;
  display: block;
  vertical-align: baseline;
  position: relative;
  border-top: 35px solid;
  border-bottom: 35px solid;
  border-left: 60px solid;
  border-right: 60px solid;
}
.arrows div:not(.arrow1) {
  opacity: 0;
  transition: all 3s;
}
.arrows div > * {
  margin-top: -10px;
  margin-right: -100px;
  margin-left: -100px;
}
.arrows div:before {
  border: 35px solid;
  border-top: 35px solid transparent;
  border-bottom: 35px solid;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  content: "";
  right: -60px;
  top: -105px;
  position: absolute;
  z-index: -1;
}
.arrows div:after {
  border: 35px solid;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-right: 60px solid transparent;
  content: "";
  right: -60px;
  top: 35px;
  position: absolute;
  z-index: -1;
}
.arrows div.arrow1 {
  background-color: #F0A11F;
  border-color: #f0a11f;
  right: 30px;
}
.arrows div.arrow1 img {
  height: 25px;
  margin-left: -70px;
  padding-left: 8px;
}
.arrows div.arrow1:before {
  border-bottom-color: #F0A11F;
}
.arrows div.arrow1:after {
  border-top-color: #F0A11F;
}
.arrows div.arrow2 {
  border-color: cornflowerblue;
  right: -35px;
  top: 40px;
}
.arrows div.arrow2:before {
  border-bottom-color: cornflowerblue;
}
.arrows div.arrow2:after {
  border-top-color: cornflowerblue;
}
.arrows div.arrow3 {
  border-color: steelblue;
  right: 30px;
  top: 80px;
  transition-delay: 2s;
}
.arrows div.arrow3:before {
  border-bottom-color: steelblue;
}
.arrows div.arrow3:after {
  border-top-color: steelblue;
}
.arrows div.arrow4 {
  border-color: midnightblue;
  right: -35px;
  top: 120px;
  transition-delay: 4s;
}
.arrows div.arrow4:before {
  border-bottom-color: midnightblue;
}
.arrows div.arrow4:after {
  border-top-color: midnightblue;
}
@media (min-width: 767px) {
  .arrows div {
    min-width: 15px;
    display: inline-block;
    border-top: 60px solid;
    border-bottom: 60px solid;
    border-left: 60px solid;
    border-right: 0;
    vertical-align: middle;
  }
  .arrows div > * {
    margin-top: -12px;
    margin-left: -150px;
  }
  .arrows div:before {
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent !important;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    right: 75px;
    top: -60px;
    position: absolute;
  }
  .arrows div:after {
    border: 35px solid;
    border-top: 60px solid transparent !important;
    border-bottom: 60px solid transparent;
    border-right: 60px solid transparent;
    right: -95px;
    top: -60px;
    position: absolute;
  }
  .arrows div.arrow1 {
    background-color: #F0A11F;
    border-color: #f0a11f;
    right: -35px;
  }
  .arrows div.arrow1 img {
    height: 25px;
    margin-left: -70px;
    padding-left: 8px;
  }
  .arrows div.arrow1:before {
    border-right-color: #F0A11F;
  }
  .arrows div.arrow1:after {
    border-left-color: #F0A11F;
  }
  .arrows div.arrow2 {
    border-color: cornflowerblue;
    top: 65px;
    right: -80px;
  }
  .arrows div.arrow2:before {
    border-right-color: cornflowerblue;
  }
  .arrows div.arrow2:after {
    border-left-color: cornflowerblue;
  }
  .arrows div.arrow3 {
    border-color: steelblue;
    right: -125px;
    top: 0;
  }
  .arrows div.arrow3:before {
    border-right-color: steelblue;
  }
  .arrows div.arrow3:after {
    border-left-color: steelblue;
  }
  .arrows div.arrow4 {
    border-color: midnightblue;
    top: 65px;
    right: -170px;
  }
  .arrows div.arrow4:before {
    border-right-color: midnightblue;
  }
  .arrows div.arrow4:after {
    border-left-color: midnightblue;
  }
}


/*Downloaded from https://www.codeseek.co/ourpathway/building-hexagons-NXmYeg */
jQuery(document).ready(function() {
    jQuery("#degree").appear();
  
    jQuery(document.body).on('appear', '#degree', animate);
  // 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(id).position().top;
//    var targetHeight = jQuery(id).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", "animation-delay":"2s"});
//     }else {
//       jQuery(id + "> div").css("opacity","1");
//     }
//   }
// }

function animate() {
  if (jQuery(window).width() >= 767){
      jQuery("#degree > div").addClass("showing");
      // css({"opacity":"1", "right":"0", "animation-delay":"1s"});
    }else {
      jQuery("#degree > div").css("opacity","1");
    }
}

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


/*
 * jQuery appear plugin
 *
 * Copyright (c) 2012 Andrey Sidorov
 * licensed under MIT license.
 *
 * https://github.com/morr/jquery.appear/
 *
 * Version: 0.3.6
 */
(function ($) {
    var selectors = [];

    var check_binded = false;
    var check_lock = false;
    var defaults = {
        interval: 250,
        force_process: false
    };
    var $window = $(window);

    var $prior_appeared = [];

    function appeared(selector) {
        return $(selector).filter(function () {
            return $(this).is(':appeared');
        });
    }

    function process() {
        check_lock = false;
        for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) {
            var $appeared = appeared(selectors[index]);

            $appeared.trigger('appear', [$appeared]);

            if ($prior_appeared[index]) {
                var $disappeared = $prior_appeared[index].not($appeared);
                $disappeared.trigger('disappear', [$disappeared]);
            }
            $prior_appeared[index] = $appeared;
        }
    }

    function add_selector(selector) {
        selectors.push(selector);
        $prior_appeared.push();
    }

    // "appeared" custom filter
    $.expr[':'].appeared = function (element) {
        var $element = $(element);
        if (!$element.is(':visible')) {
            return false;
        }

        var window_left = $window.scrollLeft();
        var window_top = $window.scrollTop();
        var offset = $element.offset();
        var left = offset.left;
        var top = offset.top;

        if (top + $element.height() >= window_top &&
                top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
                left + $element.width() >= window_left &&
                left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
            return true;
        } else {
            return false;
        }
    };

    $.fn.extend({
        // watching for element's appearance in browser viewport
        appear: function (options) {
            var opts = $.extend({}, defaults, options || {});
            var selector = this.selector || this;
            if (!check_binded) {
                var on_check = function () {
                    if (check_lock) {
                        return;
                    }
                    check_lock = true;

                    setTimeout(process, opts.interval);
                };

                $(window).scroll(on_check).resize(on_check);
                check_binded = true;
            }

            if (opts.force_process) {
                setTimeout(process, opts.interval);
            }
            add_selector(selector);
            return $(selector);
        }
    });

    $.extend({
        // force elements's appearance check
        force_appear: function () {
            if (check_binded) {
                process();
                return true;
            }
            return false;
        }
    });
})(function () {
    if (typeof module !== 'undefined') {
        // Node
        return require('jquery');
    } else {
        return jQuery;
    }
}());

Comments