Skepta Scene 1

by Marius Jopen

HTML

<div class="wrapper scene-1">

<div id="box_1" class="box box-image">
<img src="http://www.ruine.biz/wp-content/uploads/2017/08/Berlin_Showroom_12-1024x1536.jpg" >
</div>

<div id="box_2" class="box box-image">
<img src="http://www.ruine.biz/wp-content/uploads/2017/08/Berlin_Showroom_1-1-1024x1536.jpg" >
</div>

<div id="box_3" class="box box-image">
<img src="http://www.ruine.biz/wp-content/uploads/2017/08/Berlin_Showroom_11-1920x1279.jpg" >
</div>

<div id="box_4" class="box box-video">
<video>
  <source src="http://arminunruh.com/vid/meireundmeire.mp4
" type="video/mp4">
</video>
</div>

<div id="box_5" class="box box-image">
<img src="http://www.ruine.biz/wp-content/uploads/2017/08/Berlin_Showroom_15-1024x1536.jpg" >
</div>

<div id="box_6" class="box box-image">
<img src="http://www.ruine.biz/wp-content/uploads/2017/08/Berlin_Showroom_11-1920x1279.jpg" >
</div>

<div id="box_7" class="box box-video">
<video>
  <source src="http://arminunruh.com/vid/sucukundbratwurst.mp4
" type="video/mp4">
</video>
</div>


<div class="function"></div>


</div>

SCSS

* {
  margin: 0px;
  padding: 0px;
}

.box {
  position: fixed;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  opacity: 0;
}

.function {
  position: fixed;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  opacity: 0;
}

.active {
  opacity: 1 !important;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

JavaScript

// SCENE 1
var box_number = $(".box").length;
var window_height = $(window).height();
var section_height = window_height / box_number;

$(".box").each(function(i) {
  $('<div id=' + (i+1) +' class="hover">' + (i+1) + '</div>').appendTo('.function');
});

$(".hover").height(section_height);

$("#box_1" ).addClass("active");

$(".hover").mouseover(function() {
  var id = $(this).attr('id');

  $("video").each(function(i) {
    $(this).get(0).pause();
  });
  
  $(".box").removeClass("active");
  $("#box_" + id ).addClass("active");
  $("#box_" + id).find("video").get(0).play();
});