EffectHub.com: your best source for gaming

Recommendation

More Effects...

['floor', 'random'].forEach(function(p) { window[p] = Math[p]; })
function randint(n) { return floor(random() * n); }
function choose(arr) { return arr[randint(arr.length)]; }

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;

var grid = Grid(W, H, 5).init();
ctx.strokeStyle = 'hsla(60, 60%, 47%,.4)';

function draw() {
  ctx.clearRect(0, 0, W, H);
  grid.draw(ctx);
  grid.jiggle();
};

var interval = setInterval(draw, 50);
document.onclick = function() {
  clearInterval(interval);
  grid.init();
  interval = setInterval(draw, 30);
};
document.onkeypress = function(e) {
  if (e.which === 32) clearInterval(interval);
};

CSS

body {
  overflow: hidden;
  width: 110vw;
  margin-left: -10%;
  height: 130vh;
  margin-top: -17vh;
  background: #efebd7 url(http://www.lacor.info/gnrl/codepen/we/jouym.png);
  background-size: 20vmin;
  background-position: center;
  height: 100%;
  margin-top: 8%;
  display: block;
  z-index: 2;
}

#wall-reflect-from-kitchen {
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  top: -7vw;
  left: -20vh;
  height: 180vh;
  width: 130vw;
  z-index: 100;
  box-shadow: -11vh -33vh 7vh 80vh rgba(0, 0, 0, 0.5) inset;
  transform: rotate(8deg);
  background-blend-mode: normal;
  z-index: 2;
}

#wallphoto {
  width: 36vh;
  height: 24vh;
  display: block;
  position: absolute;
  right: 18%;
  top: 15%;
  background: url(http://www.lacor.info/film/sud_eau_nord_deplacer/img/galerie/large/sud_eau_nord_deplacer_02.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
  box-sizing: border-box;
  padding: 3%;
  border: 11px ridge rgba(255, 43, 0, 0.7);
  box-shadow: 0 0 0 1.7vw rgba(13, 242, 51, 0.3) inset, 0 50px 60px rgba(255, 64, 26, 0.59) inset, 0 -50px 60px rgba(83, 198, 198, 0.9) inset, 50px 0 60px #265959 inset, -50px 0 60px #602b20 inset, 2vh 2vh 1vh 0.02vh rgba(64, 64, 64, 0.4);
  opacity: .95;
}

#window {
  cursor: pointer;
  display: block;
  position: relative;
  z-index: 4;
  width: 43.2vh;
  height: 64.8vh;
  margin: -6% 0 0 13%;
  box-sizing: border-box;
  border-top: 4px solid #111;
  border-right: 15px solid #222;
  border-bottom: 20px solid #000;
  border-left: 15px solid #333;
  position: relative;
  overflow: hidden;
  box-shadow: 2px 3px 19px #111;
  text-shadow: 0px 0px 3px #ff0;
  box-shadow: 2vh 2vh 10vh rgba(0, 0, 0, 0.5), 0px 0px 4px 2vh rgba(0, 0, 0, 0.5) inset;
}

#window:hover, .fabric:hover {
  cursor: pointer;
}

#window:before {
  display: block;
  z-index: 2;
  position: absolute;
  content: "";
  left: 25%;
  top: 0;
  width: 0.3%;
  height: 100%;
  box-shadow: inset 1px 2px 2px gold;
}

#window:after {
  position: absolute;
  display: block;
  z-index: 2;
  content: "";
  left: 75%;
  top: 0;
  width: 0.3%;
  height: 100%;
  box-shadow: inset 1px 2px 2px gold;
}

svg {
  display: block;
  position: absolute;
  z-index: 4;
  -webkit-font-smoothing: antialiased;
  transform: rotate(-170deg) translateX(50px) translateY(1380px) scale(3);
}

.holder {
  width: 100%;
  height: 10%;
  background: linear-gradient(#000, #111 20%, #333 70%, #111 60%, #000);
  position: relative;
  z-index: 5;
}

.holder:before {
  display: block;
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 5;
}

.holder:after {
  display: block;
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 5;
}

.fabric {
  width: 100%;
  height: 4%;
  background: linear-gradient(#000, #333 20%, #666 40%, mistyrose 60%, DarkKhaki);
  position: relative;
  transition: transform 0.3s;
  display: block;
  z-index: 4;
}

#window:hover .fabric {
  transform: scale(1, 0.2);
}

iframe {
  display: block;
  position: absolute;
  width: 110%;
  height: 499px;
  overflow: hidden;
  top: 10%;
  z-index: -1;
}

.furniture {
  display: block;
  position: absolute;
  bottom: 25vh;
  right: 10%;
  width: 40%;
  height: 40%;
  transform: scale(1.9);
  z-index: 8;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
}

HTML

<html>

</div>
  <div class="furniture">
    <iframe src="http://s.codepen.io/cathbailh/debug/NPbXGN?" style="border:none;" sandbox="">
    </iframe>
  </div>
</body>

</html>

Recommendation

Join Effecthub.com