CodePen Embed - Baby Panda - Hide and Reveal

<div id="hidden" class="hidden">
  <div id="hiddenScreen" class="hiddenScreen"></div>
  <iframe id="video" class="video" src="https://www.youtube.com/embed/UogqfvLiYbs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div id="scene" class="scene">
  <div id="backLegs" class="backLegs">
    <div id="backLeftLeg" class="backLeftLeg"></div>
    <div id="backRightLeg" class="backRightLeg"></div>
  </div>
 
  <div class="tree"></div>
  <div id="sign" class="sign">
    <div class="signBoard"></div>
    <div class="signText">
        Hi, 
        <br>
        I'm Fu Bao
    </div>
    <div id="arrow" class="arrow wavingUp">«</div>
    <div class="signRope"></div>
    <div class="nail"></div>
  </div>
  
  <div id="panda" class="panda">
    <div class="body">
        <div class="stripe"></div>
    </div>
    <div id="leftLeg" class="leftLeg"></div>
    <div  id="rightLeg" class="rightLeg"></div>
    <div class="head">
      <div class="ears">
        <div class="leftEar"></div>
        <div class="rightEar"></div>
      </div>
      <div class="face">
        <div class="leftEye"></div>
        <div class="rightEye"></div>
        <div class="leftEyeBall"></div>
        <div class="rightEyeBall"></div>
        <div class="muzzle">
          <div class="nose"></div>
          <div id="mouth" class="mouth"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="grass"></div>
<div class="grass" style="left:calc(50% - 280px);"></div>
<div class="grass" style="left:calc(50% - 272px);top:401px;"></div>
<div class="grass" style="left:calc(50% - 275px);top:400px;transform:scale(1.6);"></div>

/*

Inspired by watching the real Fu Bao attempt to climb a tree, this is a hidden video CSS-based interaction with help from a couple CSS tools and jQuery class toggling

Tools:

 Clip Path - https://bennettfeely.com/clippy/
 Textures - transparenttextures.com 

*/

@import url('https://fonts.googleapis.com/css2?family=Freckle+Face&display=swap');
:root {
	--white: #fff;
	--black: #000;
}
* {
	padding: 0;
	margin: 0;
}
body {
	background-color: #9ae031;
  background-image: url("https://www.transparenttextures.com/patterns/zig-zag.png");
  transition:transform .5s;
  transition-delay:.5s;
}
.hidden{
  position:absolute;
  width:300px;
  height:169px;
  top:250px;
  right:calc( 50% - 180px );
  background-color: black;
  border: solid black 5px;
  border-bottom-width:10px;
  border-radius:5px;
  opacity:.15;
  transition:opacity .5s;
  transition-delay:opacity .5s;
}
.hiddenScreen{
  position:absolute;
  width:100%;
  height:100%;
  background-color: white;
  opacity:0;
  transition: opacity .5s;
  transition-delay:opacity .1s;
}
.hidden:before, .hidden:after{
  position:absolute;
  z-index:-1;
  content:"";
  background-color:black;
}
.hidden:before{
  right:calc( 50% - 40px );
  width:80px;
  height:15px;
  border-radius:50%;
  bottom:-30px;
}
.hidden:after{
  right:calc( 50% - 20px );
  width:40px;
  height:20px;
  bottom:-20px;
}
.video{
  width:100%;
  height:100%;
  position:absolute;
  opacity:0;
  transition:opacity .5s;
  transition-delay:.5s;
}
.scene{
  width:500px;
  height:500px;
  left:calc( 50% - 250px );
  position:absolute;
  transform-origin:bottom left;
  transform:rotate(0deg);
  transition:transform .5s;
  transition-delay:.25s;
}
.backLegs{
  position:absolute;
  left:calc(50% - 120px);
  top:242px;
  width: 140px;
  height: 70px;
  transform:rotate(-20deg);
}
.backLeftLeg,.backRightLeg{
  position:absolute;
  top:10px;
  width: 40px;
  box-sizing:border-box;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  background-color: black;
  background-image: url("https://www.transparenttextures.com/patterns/arches.png");
  transform:rotate(-5deg);
  transform-origin:top center;
  animation-delay:.125s;
  transition:transform .5s;
}
.backLeftLeg{
 left:10px;
 height: 87px;
}
.backRightLeg{
  right:10px;
  height:78px;
}
.tree{
  position:absolute;
  width:500px;
  height:500px;
  left:calc( 50% - 250px );
  background-color: #f5bd5d;
  background-image: url("https://www.transparenttextures.com/patterns/wood-pattern.png");
  clip-path: polygon(82% 100%, 75% 96%, 69% 89%, 50% 24%, 41% 21%, 30% 22%, 39% 19%, 49% 20%, 44% 9%, 40% 2%, 44% 2%, 48% 7%, 52% 18%, 54% 20%, 63% 55%, 66% 57%, 66% 59%, 64.5% 60%, 72% 85%, 78% 91%, 86% 95%);
   transform:rotate(80deg);
}
.sign{
  position:absolute;
  width:160px;
  height:60px;
  top:220px;
  right:calc( 50% - 250px );
  transform-origin:top center;
  transform:rotate(0deg);
  transition:transform .5s;
  transition-delay:.25s;
}
.signBoard{
  position:absolute;
  z-index:2;
  background-color: #b87b00;
  background-image: url("https://www.transparenttextures.com/patterns/wood-pattern.png");
  width:90px;
  height:190px;
  left:calc(50% - 45px);
  top:-10px;
  border:solid #a86e02 5px;
  border-radius:10px;
  transform-origin:center;
  transform:rotate(90deg);
}
.signText{
  position:absolute;
  z-index:3;
  left:calc(50% - 95px);
  top:50px;
  font-family: 'Freckle Face', cursive;
  font-size:30px;
  text-shadow:none!important;
  text-align:center;
  width:160px;
  height:80px;
}
.signRope{
  position:absolute;
  z-index:1;
  top:-65px;
  left:10%;
  width:80%;
  height:110px;
  background-color:brown;
  background-image: linear-gradient(90deg, #b87b00 25%, #a86e02 25%, #a86e02 50%, #b87b00 50%, #b87b00 75%, #a86e02 75%, #a86e02 100%);
  background-size:10.00px 10.00px;
  clip-path: polygon(0% 99%, 49% 50%, 100% 100%, 92% 100%, 49% 56%, 8% 99%);
}
.nail{
  position:absolute;
  z-index:5;
  top:-10px;
  left:calc(50% - 8px);
  content:"";
  width:12px;
  height:12px;
  border-radius:50%;
  background-color:grey;
}
.arrow{
  position:absolute;
  z-index:6;
  width:40px;
  height:40px;
  right:-62px;
  top:68px;
  color:inherit;
  font-size:100px;
  font-weight:bold;
  cursor:pointer;
  transform: rotate(90deg);
}
.sign:hover > div{
  cursor:pointer;
  text-shadow:0px 0px 2px white, 0px 0px 5px white;
}
.panda{
  position:fixed;
  left:calc(50% - 120px);
  top:242px;
  width: 140px;
  height: 70px;
  transform:rotate(-20deg);
}
.body{
  position:absolute;
  background: white;
  width: 140px;
  height: 70px;
  top:-5px;
  border:solid white 5px;
  border-radius: 40%;
  background-color: #f5f5f5;
  background-image:   url("https://www.transparenttextures.com/patterns/arches.png");
}
.leftLeg,.rightLeg{
  position:absolute;
  top:30px;
  height: 60px;
  width: 40px;
  box-sizing:border-box;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  background-color: black;
  background-image: url("https://www.transparenttextures.com/patterns/arches.png");
  transform:rotate(-5deg);
  transform-origin:top center;
}
.leftLeg{
  left:5px;
}
.rightLeg{
  height: 50px;
  right:15px;
}
.head{
  position:absolute;
  width:90px;
  height:70px;
  top:0px;
  left:85px;
  transform:rotate(15deg);
}
.ears{
  position:absolute;
  width: 100%;
  height: 100%;
  top:5px;
}
.leftEar, .rightEar{
  position:absolute;
  top:-7px;
  width: 25px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
}
.leftEar{
  left: 0px;
  transform:rotate(-40deg);
}
.rightEar{
  right: 0px;
  transform:rotate(40deg);
}
.face{
  position:absolute;
  width: 100%;
  height: 100%;
  z-index:1;
  box-sizing:border-box;
  border:solid white 5px;
  border-radius: 50%;
  background-color: #f5f5f5;
  background-image:   url("https://www.transparenttextures.com/patterns/arches.png");
}
.leftEye,.rightEye{
  position:absolute;
  top:22px;
  width: 15px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
}
.leftEye{
  left:20px;
  transform:rotate(20deg);
}
.rightEye{
  right:20px;
  transform:rotate(-20deg);
  border-top-right:solid white 20px;
}
.leftEyeBall,.rightEyeBall{
  position:absolute;
  top:25px;
  color:white;
  background-color:#4f4f4f;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  animation-name:blink;
  animation-duration:5s;
  animation-iteration-count:infinite;
}
.rightEyeBall{left:25px;}
.leftEyeBall{right:25px;}
.leftEyeBall:after,.rightEyeBall:after{
  content:'';
  position:absolute;
  background-color:white;
  opacity:.6;
  width: 4px;
  height: 4px;
  top:1px;
  left:1px;
  border-radius: 50%;
}
.muzzle{
  position:absolute;
  top:35px;
  left:calc( 50% - 15px);
  width: 30px;
  height: 25px;
  border-radius: 50%;
  background-color: white;
}
.nose{
  position: absolute;
  top:5px;
  left:calc( 50% - 7px);
  width: 0;
  height: 0;
  border-style: solid;
  border-radius:100%;
  border-width: 7px 7px 0 7px;
  border-color: black transparent transparent transparent;
}
.mouth{
  position: absolute;
  top:-3px;
  left:calc( 50% - 10px);
  width: 20px;
  height: 20px;
  background-color:black;
  clip-path: polygon(49% 100%, 64% 99%, 79% 96%, 90% 91%, 98% 82%, 88% 88%, 78% 92%, 64% 94%, 51% 95%, 51% 68%, 48% 67%, 48% 95%, 33% 94%, 21% 92%, 12% 89%, 1% 84%, 10% 93%, 21% 97%, 34% 99%);
}
.grass{
  position:absolute;
  width:90px;
  height:60px;
  left:calc(50% - 270px);
  top:410px;
  background: rgb(11,36,0);
  background: linear-gradient(90deg, rgba(105,153,36,1) 0%, rgba(129,205,15,1) 35%, rgba(71,112,8,1) 100%);
  clip-path: polygon(32% 100%, 26% 90%, 19% 82%, 9% 77%, 3% 72%, 0 66%, 7% 70%, 16% 73%, 24% 78%, 31% 86%, 36% 93%, 36% 89%, 34% 81%, 32% 73%, 26% 65%, 21% 57%, 17% 51%, 14% 46%, 10% 40%, 5% 30%, 18% 42%, 25% 51%, 32% 61%, 37% 70%, 41% 78%, 44% 84%, 42% 75%, 40% 65%, 39% 54%, 39% 46%, 39% 36%, 40% 29%, 44% 15%, 46% 21%, 46% 28%, 46% 36%, 46% 44%, 47% 54%, 48% 65%, 50% 73%, 50% 79%, 51% 76%, 54% 70%, 55% 61%, 57% 51%, 58% 40%, 60% 30%, 62% 21%, 64% 12%, 68% 4%, 68% 13%, 67% 26%, 66% 36%, 64% 47%, 63% 58%, 62% 66%, 61% 76%, 60% 80%, 63% 71%, 65% 63%, 70% 48%, 75% 39%, 79% 34%, 84% 28%, 90% 23%, 100% 19%, 95% 24%, 90% 29%, 85% 34%, 82% 40%, 79% 44%, 75% 55%, 73% 63%, 70% 78%, 69% 82%, 69% 88%, 75% 85%, 78% 77%, 82% 70%, 87% 62%, 94% 57%, 100% 56%, 94% 62%, 91% 67%, 87% 75%, 85% 82%, 81% 94%, 83% 100%);
}

@keyframes blink{
  0%{transform:scaleY(1)}
  45%{transform:scaleY(1)}
  50%{transform:scaleY(.1)}
  55%{transform:scaleY(1)}
  100%{transform:scaleY(1)}
}
@keyframes climb{
  0%{transform:rotate(-5deg)}
  50%{transform:rotate(5deg)}
  100%{transform:rotate(-5deg)}
}
.climbing{
  animation-name:climb;
  animation-duration:.25s;
  animation-iteration-count:infinite;
}
.climbingSlow{
  animation-name:climb;
  animation-duration:1s;
  animation-delay:0s;
  animation-iteration-count:infinite;
}
@keyframes moveBack{
  0%{transform: rotate(-20deg) translateX(0px) translateY(0px);}
  20%{transform: rotate(-20deg) translateX(0px) translateY(0px);}
  100%{transform: rotate(-25deg) translateX(-110px) translateY(7px);}
}
.movingBack{
  animation-name:moveBack;
  animation-duration:.75s;
  animation-timing-function:ease-in;
  transform: rotate(-25deg) translateX(-110px) translateY(7px);
}
@keyframes moveForward{
  0%{transform: rotate(-25deg) translateX(-110px) translateY(7px);}
  10%{transform: rotate(-22deg) translateX(-100px) translateY(5px);}
  20%{transform: rotate(-20deg) translateX(-100px) translateY(3px);}
  30%{transform: rotate(-22deg) translateX(-80px) translateY(1px);}
  40%{transform: rotate(-20deg) translateX(-80px) translateY(0px);}
  50%{transform: rotate(-22deg) translateX(-60px) translateY(0px);}
  60%{transform: rotate(-20deg) translateX(-60px) translateY(0px);}
  70%{transform: rotate(-22deg) translateX(-30px) translateY(0px);}
  80%{transform: rotate(-20deg) translateX(-30px) translateY(0px);}
  90%{transform: rotate(-22deg) translateX(0px) translateY(0px);}
  100%{transform: rotate(-20deg) translateX(0px) translateY(0px)}
}
.movingForward{
  animation-name:moveForward;
  animation-duration:5s;
  animation-delay:.0s;
  transform: rotate(-20deg) translateX(0px) translateY(0px);
}

@keyframes waveUp{
  0%{transform:rotate(90deg) translateX(-20px);}
  50%{transform:rotate(90deg) translateX(0px);}
  100%{transform:rotate(90deg) translateX(-20px);}
}
@keyframes waveDown{
  0%{transform:rotate(270deg) translateY(-92px) translateX(-25px);}
  50%{transform:rotate(270deg) translateY(-92px) translateX(-5px);}
  100%{transform:rotate(270deg) translateY(-92px) translateX(-25px);}
}
.wavingUp{
  animation-name:waveUp;
  animation-duration:1s;
  animation-iteration-count:infinite;
}
.wavingDown{animation-name:waveDown;}

@keyframes swingingUp{
  0%{transform:rotate(0deg) ;}
  50%{transform:rotate(40deg) ;}
  85%{transform:rotate(29deg) ;}
  100%{transform:rotate(30deg) ;}
}
.swingingUp{
  animation-name:swingingUp;
  animation-duration:.75s;
  transform:rotate(30deg);
}

.tiltingBack{transform:rotate(-30deg);}

.fillingOpacity{opacity:1;}

.leftAngryEye{ transform:rotate(-30deg) scaleY(.2);}
.rightAngryEye{transform:rotate(30deg) scaleY(.2) ;}
.angryMouth{
  top:0px;
  clip-path: polygon(46% 70%, 37% 74%, 33% 85%, 37% 94%, 47% 97%, 57% 95%, 62% 85%, 59% 75%, 50% 70%, 48% 55%);
}


/*Scaling for visibility under 600px screen width*/
@media screen and (max-width: 600px) { body{transform:scale(.5);} }
@media screen and (max-width: 400px) { body{transform:scale(.4);} }

var goUp = true;
setListener(true);

$("#sign").hover(function(){
  if($("#backRightLeg").hasClass('climbing')==false &&                                                 
  $("#backRightLeg").hasClass('climbingSlow')==false && 
  $("#sign").is(":hover")==true){
    $("#hiddenScreen").toggleClass("fillingOpacity")
  }else{
    $("#hiddenScreen").removeClass("fillingOpacity")
  }
})

function setListener(goUp){
  if(goUp == true){$("#sign").on("click",function(){tiltUp()});}
  else{$("#sign").on("click",function(){tiltDown()});}
}


function tiltUp(){
  $("#sign").off("click")
  $("#scene").addClass("tiltingBack");
  $("#arrow").addClass("wavingDown");
  $("#mouth").addClass("angryMouth")
  setTimeout(function(){
    $("#backLeftLeg, #backRightLeg, #leftLeg, #rightLeg").addClass("climbing")
    setTimeout(function(){
      $("#panda, #backLegs").removeClass("movingForward").addClass("movingBack")
      setTimeout(function(){
        $('#video, #hidden').toggleClass("fillingOpacity");
        $("#sign").addClass("swingingUp")
        setListener(false);
      },1000)
    },750)
  },500)
}


function tiltDown(){
  $("#sign").off("click");
  $("#scene").removeClass("tiltingBack");
  $("#arrow").removeClass("wavingDown");
  $("#sign").removeClass("swingingUp")
  $('#video, #hidden').toggleClass("fillingOpacity");
  
  setTimeout(function(){
    $("#backRightLeg").on('animationiteration webkitAnimationIteration', function () {      
      
      $(this).removeClass('climbing').addClass("climbingSlow").off();
      $("#panda, #backLegs").removeClass("movingBack").addClass("movingForward")
      
      setTimeout(function(){
        $("#backRightLeg").on('animationiteration webkitAnimationIteration',
        function () {
          $(this).removeClass('climbingSlow').off();
          $("#mouth").removeClass("angryMouth")
          setListener(true);
        })
  
        $("#backLeftLeg, #leftLeg, #rightLeg").on('animationiteration webkitAnimationIteration',
        function(){$(this).removeClass('climbingSlow').off();});
      },4250)   
    })

    $("#backLeftLeg, #leftLeg, #rightLeg").on('animationiteration webkitAnimationIteration',
    function(){$(this).removeClass('climbing').addClass("climbingSlow").off();});
  },1000)
}

This Pen is owned by Cody Daniels on CodePen.

See more by @codydaniels on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript