Improved animations

Author: mortcodesweb

index.html

@@ -63,7 +63,12 @@ <h1></h1>
               <div class="col primary">
                 <div class="neck">
                   <div id="head" class="head">
-                    <div class="visor">
+                    <div class="ear left"></div>
+                    <div class="ear right"></div>
+                    <div class="visor"></div>
+                    <div class="hair"></div>
+                    <div class="visor-mask">
+                      <div class="visor-shine"></div>
                       <img src="/style/images/protogen/eyes_open.png" id="eyes" class="visor-sprite">
                       <img src="/style/images/protogen/mouth_closed.png" id="mouth" class="visor-sprite">
                       <img src="/style/images/protogen/nose.png" id="nose" class="visor-sprite">
@@ -73,12 +78,16 @@ <h1></h1>
               </div>
               <div class="col secondary">
                 <h1>MortCodesWeb</h1>
+                <p>Protogen Furry Wolf</p>
+                <p>Owner &amp; Lead Design and Development of Orchid Org.</p>
                 <p>Age: 18</p>
                 <p>Gender: Male</p>
                 <p>Web Developer</p>
                 <p>Software Developer</p>
                 <p>UI Designer</p>
                 <p>UI Animator</p>
+                <br>
+                <p>I bet you like this 2D proto animation i made</p>
               </div>
             </div>
           </div>

style/images/protogen/ear_left.png

@@ -5,8 +5,10 @@
   width: 150px;
   height: 150px;
   transform: scaleX(-1);
-  translate: -50% 0;
+  translate: -50% 10%;
   background: url(images/protogen/neck.png) no-repeat center top / contain;
+  pointer-events: none;
+  user-select: none;
 }
 
 .head {
@@ -21,14 +23,61 @@
   transition: transform 0.3s cubic-bezier(0.5, 0.8, 0, 1.3);
 }
 
+.ear {
+  position: absolute;
+  top: 11px;
+  right: 33px;
+  width: 124px;
+  height: 113px;
+  transition: transform 0.3s cubic-bezier(0.5, 0.8, 0, 2);
+}
+
+.ear.left {
+  transform: rotate(calc(-25deg * var(--mouse-progress-y))) scaleX(calc(0.975 - (0.025 * var(--mouse-progress-x))));
+  transform-origin: 25% 75%;
+  background: url(images/protogen/ear_left.png) no-repeat center top / contain;
+}
+
+.ear.right {
+  z-index: 2;
+  transform: rotate(calc(-5deg * var(--mouse-progress-y))) scaleX(calc(0.975 - (0.025 * var(--mouse-progress-x))));
+  transform-origin: 75% 75%;
+  background: url(images/protogen/ear_right.png) no-repeat center top / contain;
+}
+
+.hair {
+  z-index: 1;
+  position: absolute;
+  top: 61px;
+  right: 83px;
+  width: 93px;
+  height: 80px;
+  transform: translateX(calc(-2px * var(--mouse-progress-x))) scaleX(calc(0.975 - (0.025 * var(--mouse-progress-x))));
+  background: url(images/protogen/hair.png) no-repeat center top / contain;
+  transition: transform 0.3s cubic-bezier(0.5, 0.8, 0, 2);
+}
+
 .visor {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 206px;
+  height: 206px;
+  transform: translateX(calc(-5px * var(--mouse-progress-x))) scaleX(calc(0.975 + (0.025 * var(--mouse-progress-x))));
+  background: url(images/protogen/visor.png) no-repeat center top / contain;
+  transition: transform 0.3s cubic-bezier(0.5, 0.8, 0, 2);
+}
+
+.visor-mask {
   -webkit-mask: url(images/protogen/head_mask.svg) no-repeat center top / contain;
   position: absolute;
   bottom: 3px;
   left: 3px;
   width: 136px;
   height: 94px;
+  transform: translateX(calc(-5px * var(--mouse-progress-x))) scaleX(calc(0.975 + (0.025 * var(--mouse-progress-x))));
   mask: url(images/protogen/head_mask.svg) no-repeat center top / contain;
+  transition: transform 0.3s cubic-bezier(0.5, 0.8, 0, 2);
 }
 
 #eyes {
@@ -62,3 +111,14 @@
   transform-origin: top center;
   transition: transform 0.3s cubic-bezier(0.5, 0.8, 0, 2);
 }
+
+.visor-shine {
+  position: absolute;
+  top: -35%;
+  right: 0;
+  width: 282px;
+  height: 117px;
+  transform: translateX(calc(-30px * var(--mouse-progress-x))) scaleX(calc(0.975 + (0.025 * var(--mouse-progress-x))));
+  background: url(images/protogen/visor_shine.png) no-repeat center top / contain;
+  transition: transform 0.3s cubic-bezier(0.5, 0.8, 0, 2);
+}