steag banner

by mrjordy

HTML

<div class="bannerContainer">
  <div class="blockgroupcontainer">
  <div class="FixIeBottomBorderStupidness abs"></div>
    <div class="abs SteagDarkTextSection inactiveSeaDark">
      <div class="RedSeaTextBlock">
        <div class="RedSeaTitle"><span class="over1400px">Security/Technical Enterprise Action Group</span><span class="under1400px">S/TEAG</span></div>
        <span class="under1400px">The Security/Technical Enterprise Action Group is</span><span class="over1400px">A</span> joint forum consisting of NEN Technical Staff, Ech II commands, Operations Communities, and HP ES. The purpose of S/TEAG is to review the NEN Technical Roadmap, current and future Technology Refresh Plans (TRP), identify new business requirements as well as discuss existing security and technical challenges.
      </div>
    </div>
    <div class="abs hexImageBlueOut BehindS"></div>
    <div class="abs hexImageBlueOut BehindT"></div>
    <div class="abs hexImageBlueOut BehindE"></div>
    <div class="abs hexImageBlueOut BehindA"></div>
    <div class="abs hexImageBlueOut BehindG"></div>
    <div class="blockgroup">
      <div class="blockRow blockRow1">
        <div class="hexBlockContainer neg10margin"><div class="abs hexImage"><img class="hexIMG" id="img1" src="#" /></div><div class="abs hexImageWhiteout pos1 posA"></div></div>
        <div class="hexBlockContainer neg10margin"><div class="abs hexImage"><img class="hexIMG" id="img2" src="#" /></div><div class="abs hexImageWhiteout pos2 posA"></div></div>
        <div class="hexBlockContainer neg10margin"><div class="abs hexImage"><img class="hexIMG" id="img3" src="#" /></div><div class="abs hexImageWhiteout pos3 posA"></div></div>
        <div class="hexBlockContainer neg10margin"><div class="abs hexImage"><img class="hexIMG" id="img4" src="#" /></div><div class="abs hexImageWhiteout pos4 posA"></div></div>
        <div class="hexBlockContainer neg10margin"><div class="abs hexImage"><img class="hexIMG" id="img5" src="#"...

CSS

.neg10margin {
  margin: -12px;
  margin-right: -13px;
}
.abs {
  position: absolute;
  top: 0;
  left: 0;
} 
.displaynone {
  display: none;
}
.bannerContainer {
    width: 97vw;
}
.blockgroupcontainer {
    overflow: hidden;
    position: relative;
    border: 8px solid white;
    background-size: 100vh;
    max-width: 2000px;
    background: linear-gradient(to left, #16212e 40%, #7f7569 60%, #262b31 70%);
}

.FixIeBottomBorderStupidness {
    height: 10px;
    width: 100%;
    background: white;
    margin-top: 269px;
    z-index: 4;
}

.blockgroup {
    margin: -40px -10px;
    background-image: url(http://techstatic.org/falconwood-pitch/steag/STEAG_Banner_BackShip.png);
    background-size: 1030px 270px;
    background-repeat: no-repeat;
    background-position-y: 40px;
    background-position-x: 50%;
}
.hexBlockContainer {
  display: block;
  width: 124px;
  height: 124px;
  display: inline-block;
  border-radius: 60px;
  position: relative;
  background-image: url('http://techstatic.org/falconwood-pitch/steag/Steag_hex2.svg');
//  background-position: -3px -2px;
  z-index: 3;
  transition-delay: .1s;
}
.letterS {
  background-image: url('http://techstatic.org/falconwood-pitch/steag/Steag_hex-s.svg');
}
.letterT {
  background-image: url('http://techstatic.org/falconwood-pitch/steag/Steag_hex-t.svg');
}
.letterE {
  background-image: url('http://techstatic.org/falconwood-pitch/steag/Steag_hex-e.svg');
}
.letterA {
  background-image: url('http://techstatic.org/falconwood-pitch/steag/Steag_hex-a.svg');
}
.letterG {
  background-image: url('http://techstatic.org/falconwood-pitch/steag/Steag_hex-g.svg');
}
.BehindS {
  margin-left: 41px;
  background: rgba(67, 121, 173, .6);
  }
.BehindT {
  margin-left: 144px;
  background: rgba(67, 121, 173, .7);
  }
.BehindE {
  margin-left: 250px;
  background: rgba(67, 121, 173, .8);
  }
.BehindA {
  margin-left: 354px;
  background: rgba(67, 121, 173, .9);
}
.BehindG {
  margin-left: 458px;
  background: rgba(67, 121,...

JavaScript

$(document).ready(function() {

var urlPre = "http://techstatic.org/falconwood-pitch/steag/"
var p = ".png"
var imageList = [
    urlPre+"SteagHexPic1"+p,
    urlPre+"SteagHexPic2"+p,
    urlPre+"SteagHexPic3"+p,
    urlPre+"SteagHexPic4"+p,
    urlPre+"SteagHexPic5"+p,
    urlPre+"SteagHexPic6"+p,
    urlPre+"SteagHexPic7"+p,
    urlPre+"SteagHexPic8"+p,
    urlPre+"SteagHexPic9"+p,
    urlPre+"SteagHexPic10"+p,
    urlPre+"SteagHexPic11"+p,
    urlPre+"SteagHexPic12"+p,
    urlPre+"SteagHexPic13"+p,
    urlPre+"SteagHexPic14"+p,
    urlPre+"SteagHexPic15"+p,
    urlPre+"SteagHexPic16"+p,
    urlPre+"SteagHexPic17"+p,
    urlPre+"blue"+p,
    urlPre+"blue2"+p,
    urlPre+"blue"+p,
    urlPre+"blue"+p,
    urlPre+"blue2"+p,
    urlPre+"turqouise"+p,
    urlPre+"turqouise"+p,
    urlPre+"blue"+p,
    urlPre+"blue"+p,
    urlPre+"blue2"+p,
    urlPre+"blue"+p,
    urlPre+"blue"+p,
    urlPre+"blue2"+p,
    urlPre+"turqouise"+p,
    urlPre+"turqouise"+p,
    urlPre+"blue"+p
];

  function updateRandomImages() {
    var imageElements = $('img.hexIMG');
    $.each(imageElements, function(index, element) {
      displayRandomImage(element);
    });
  }

  function displayRandomImage(element) {
    var index = getRandomNumber();
    $(element).attr('src', imageList[index]);
  }

  function getRandomNumber() {
    return Math.floor(Math.random() * 32);
  }

  /*$('.bannerMenuItem').hover(function () {
      updateRandomImages();
  });*/

  //start off with some random images
  updateRandomImages();

  //-------------------------------- red sea

  $('#moses, .HamburgerContainer, #img68').click(function() {
    $(".redSeaEasterEgg").toggleClass("redSeaClosed"); // parts the sea
    $(".redSeaEasterEgg").toggleClass("slowToClose"); // timing tweak
    $("#differentHex").toggleClass("eagerBeaver"); // moves the straggler
    $(".HamburgerContainer").toggleClass("HamburgerIsX"); // changes hamburger/X  
    $(".SteagDarkTextSection").toggleClass("activeSeaDark"); // darkens...