Portfolio test

Testing out Unity video portfolio idea

by falldeaf

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="page">

  <div class="videogallery">

    <div class="videohead">
      SHADERS
    </div>

    <div class="videobox">

      <div class="videomenu">
        <ul id="shader">
          <li class="selected">Campfire Scene <i class="fa fa-fire"></i></li>
          <li>Procedural Texture <i class="fa fa-tint"></i></li>
          <li>Magic Paint Spell <i class="fa fa-magic"></i></li>
          <li>Caustic & Ripple <i class="fa fa-leaf"></i></li>
        </ul>

        <div id="shaderdescrip" class="videodescription">
          <i class="fa fa-fire"></i> In this scene, I've written a shader for the firelies that approximates natural on/off times for their light by using clamped Perlin noise. The firelight and size of the flame are vertex shaders that use Perlin noise
          for their size.
        </div>
      </div>

      <video class="videoelement" id="shadervid" width="560" height="420" preload="metadata" controls="controls" autoplay loop><source type="video/mp4" src="https://falldeaf.com/falldeaf-content/uploads/2018/03/fireshadow.mp4?_=1"><a href="https://falldeaf.com/falldeaf-content/uploads/2018/03/fireshadow.mp4">https://falldeaf.com/falldeaf-content/uploads/2018/03/fireshadow.mp4</a></video>

      <div class="clear"></div>

    </div>

  </div>

</div>

CSS

body {
  font-family: arial;
}

#page {
  padding: 50px 0;
  width: 900px;
  height: 1200px;
  background-color: #2b2a2a;
}

.videogallery {}

.videohead {
  font-weight: bolder;
  color: #2b2a2a;
  padding: 0;
  padding-left: 335px;
  height: 59px;
  font-size: 82px;
  line-height: 62px;
  background-color: #d6d6d6;
}

.videotitle {
  padding: 0;
  margin: 0;
  vertical-align: top;
}

.videobox {
  margin: 10px 0;
}

.videomenu {
  margin: 0;
  float: left;
  width: 326px;
}

.videomenu ul {
  padding: 0px;
  margin: 0px;
}

.videomenu li {
  color: #161616;
  background-color: #3d3c42;
  list-style: none;
  font-size: 22px;
  margin: 0 0 11px 0px;
  padding: 10px;
  border-radius: 0 20px 20px 0;
  text-align: right;
  cursor: pointer;
}

.hovered {
  color: #d87373 !important;
  background-color: #2d0000 !important;
}

.selected {
  background-color: #d6d6d6 !important;
  color: #312525 !important;
  cursor: not-allowed !important;
}

.videodescription {
  font-size: 20px;
  padding-left: 9px;
  color: #cbbaba;
  float: left;
  /* width: 100%; */
  margin: 5px;
}

.videoelement {
  float: right;
  border-radius: 30px 0 0 30px;
}

.clear {
  clear: both;
}

.rainbow {
  -webkit-animation: rainbow 1s infinite;
  -ms-animation: rainbow 1s infinite;
  -o-animation: rainbow 1s infinite;
  animation: rainbow 1s infinite;
}

@-webkit-keyframes rainbow {
  0% {
    color: #ff0000;
  }
  10% {
    color: #ff8000;
  }
  20% {
    color: #ffff00;
  }
  30% {
    color: #80ff00;
  }
  40% {
    color: #00ff00;
  }
  50% {
    color: #00ff80;
  }
  60% {
    color: #00ffff;
  }
  70% {
    color: #0080ff;
  }
  80% {
    color: #0000ff;
  }
  90% {
    color: #8000ff;
  }
  100% {
    color: #ff0080;
  }
}

@-ms-keyframes rainbow {
  0% {
    color: #ff0000;
  }
  10% {
    color: #ff8000;
  }
  20% {
    color: #ffff00;
  }
  30% {
    color: #80ff00;
  }
  40% {
    color: #00ff00;
  }
  50% {
    color: #00ff80;
  }
  60% {
    color: #00ffff;
  }
  70% {
    color:...

JavaScript

var vidurlarray = [
  "https://falldeaf.com/falldeaf-content/uploads/2018/03/fireshadow.mp4",
  "https://falldeaf.com/falldeaf-content/uploads/2018/03/proceduraldrops.mp4",
  "https://falldeaf.com/falldeaf-content/uploads/2018/03/paintingshader.mp4",
  "https://falldeaf.com/falldeaf-content/uploads/2018/03/watershader.mp4"
];

var viddescrip = [
  "<i class=\"fa fa-fire\"></i> In this scene, I've written a shader for the firelies that approximates natural on/off times for their light by using clamped Perlin noise. The firelight and size of the flame are vertex shaders that use Perlin noise for their size.",
  "<i class=\"fa fa-tint\"></i> This is a completely procedural dripping effect that gets projected on all four sides of a model with parameters for speed, size and number of drops",
  "<i class=\"fa fa-magic\"></i></li> This shader takes three different buffers and blends two of them based on using the third as an alpha channel guide, creating an animated effect wherever the player draws on screen.",
  "<i class=\"fa fa-leaf\"></i> The bottom of the pond is a caustic effect, on the top a shader waves the surface vertices to simulate water and recieves an array of world-based coorddiantes, then plays a ripple effect on the texture."
];

$('.videomenu').on("click", "li:not(.selected)", function() {
  $(this).parent().find('li').removeClass("selected");
  $(this).parent().find('li').removeClass("hovered");
  $(this).parent().find('.fa').removeClass("rainbow");
  $(this).addClass("selected");
  $("#" + $(this).parent().attr('id') + "vid").attr('src', vidurlarray[$(this).index()]);
  $("#" + $(this).parent().attr('id') + "descrip").html(viddescrip[$(this).index()]);
});

$('.videomenu').on("mouseenter", "li:not(.selected)", function() {
    $(this).addClass('hovered');
    $(this).find(".fa").addClass('rainbow');
  })
  .on("mouseleave", "li:not(.selected)", function() {
    $(this).removeClass('hovered');
    $(this).find(".fa").removeClass('rainbow');
  });