CodePen Embed - Codevember #6


<div id="container" class="no-fall">
   <div id="control-wrap">
    <div id="weather-state">
      <h2>Welcome Home!</h2>
      <h2>How was the weather today?</h2>
    </div>
     <i class="ion-ios-sunny" id="sunny"></i>
    <input id="slide" type="range" min="1" max="4" step="1" value="1">
     <i class="ion-umbrella" id="stormy"></i>
    </div>
  
    <div class="sky-box">
      <div class="sky-wheel">
        <div id="stormycloud" class="phase left">
          <div class="puff one"></div>
          <div class="puff two"></div>
          <div class="puff three"></div>
          <div class="puff four"></div>
        </div>
        
         <div id="stormycloud" class="phase right">
          <div class="puff one"></div>
          <div class="puff two"></div>
          <div class="puff three"></div>
          <div class="puff four"></div>
        </div>
        
          <div class="lightning-wrap">
            <div class="lightning-branch"></div>
            <div class="lightning-branch two"></div>
            

            
          </div>

        
        <div class="rainbow-wrap">
          <div id="rainbow-stripes">
           <div class="rainbowdot dot01"></div>
           <div class="rainbowdot dot02"></div>
           <div class="rainbowdot dot03"></div>
           <div class="rainbowdot dot04"></div>
        </div>
       </div>
    </div>
  </div>

<div class="cloud-wrap">
  <div id="cloud">
    <div class="face-wrap">
      <div class="eyes">
        <div class="eye eyelid left"></div>
        <div class="eye left"></div>
        <div class="eye eyelid right"></div>
        <div class="eye right">
        </div>
      </div>
    <div class="mouth"></div>
    </div>
    <div id="cloud-puffs" class="phase">
      <div class="puff one"></div>
      <div class="puff two"></div>
      <div class="puff three"></div>
      <div class="puff four"></div>
    </div>
  </div>
  
    <div class="ground-wrap">
      <div class="flower">
        <div class="blossom"></div>
        <div class="stem"></div>
      </div>
      <div class="flower">
        <div class="blossom"></div>
        <div class="stem"></div>
      </div>
      <div class="flower">
        <div class="blossom"></div>
        <div class="stem"></div>
      </div>
      <div class="flower">
        <div class="blossom"></div>
        <div class="stem"></div>
      </div>
      <div class="ground top"></div>
      <div class="ground middle"></div>
      <div class="ground side"></div>
     </div>
  
  <div class="rain">
    <div id="pentagon"></div>
    <div class="rainbase"></div>
    <div id="rain-drops">
      <div class="drop one"></div>
      <div class="drop two"></div>
      <div class="drop three"></div>
      <div class="drop four"></div>
      <div class="drop five"></div>
      <div class="drop six"></div>
    </div>
  </div>
  
    
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="liquid">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="liquid" />
    </filter>
  </defs>
</svg>
</div> 
  

</div>

@mixin center{
   left: 0;
  right: 0;
  margin: auto;
}

$delay: .5s, 1s, 1.2s, .1s, 2s, 1.5s;
$drop-speed: 1s, .45s, .25s;
$sky: #9DD1F1, #7096AD, #52768C, #3D5868;
$cloud: #fff, #ccc, #999, #666;
$raindrop: #9DD1F1, #508AA8;
$background: #1C3041;

html, body{
  background: $background;
  height: 100%;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content:center;
  color: #fff;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
}

#container{
  height: 80%;
  width: 50%;
  top:0px;
  min-width: 400px;
  max-width: 450px;
  position:absolute;
}
//Controls
#control-wrap{
  padding: 10px 0px;
  top: 0px;
  width: 100%;
  
  #weather-state{
    height: 50px;
    overflow: hidden;
    h2:nth-child(1){
      margin-top:10px;
      animation: slideUp 1s ease forwards;
      animation-delay: 1.5s;
    }
    @keyframes slideUp{
      0%{margin-top: 10px; opacity: 1;}
      100%{margin-top: -25px; opacity: .25;}
    }
  }
  
  i{
    font-size: 3.5em;
    position: relative;
    top: 8px;
    opacity: .5;
    transition: all .5s;
  }
  #sunny{
    #container.no-fall &{
      opacity: 1;
    }
    #container.mild-fall &{
      opacity: .75;
    }
    #container.stormy-fall &{
      opacity: .5;
    }
    #container.severe-fall &{
      opacity: .25;
    }
  }
  
   #stormy{
    #container.no-fall &{
      opacity: .25;
    }
    #container.mild-fall &{
      opacity: .5;
    }
    #container.stormy-fall &{
      opacity: .75;
    }
    #container.severe-fall &{
      opacity: 1;
    }
  }
}

//lets make the slider pretty
 input[type=range]{
   -webkit-appearance: none;
    width: 70%;
    margin: 0px 5px;
    z-index: 99;
   
   &::-webkit-slider-thumb{
  -webkit-appearance: none;
}
   &:focus {
  outline: none;
}
   &::-ms-track{
  width: 100%;
  cursor: pointer;  
  background: transparent;
  border-color: transparent;
  color:transparent;
}
   
  @mixin custom-thumb(){
    width: 25px;
    height: 25px;
    border: 2px solid #fff;
    background: $background;
    border-radius: 50%;
    margin-top: -4%;
   }
   &::-webkit-slider-thumb{
     @include custom-thumb();
   }
   &::-moz-range-thumb{
     @include custom-thumb();
   }
   &::-ms-thumb{
     @include custom-thumb;
   }
   
   @mixin custom-range{
     height: 2px;
     
   }
   &::-webkit-slider-runnable-track{
     @include custom-range;
   }
   &::-moz-range-track{
     @include custom-range;
   }
   &::-ms-track {
     @include custom-range;
   }
  }

//Sky
.sky-box{
  @include center;
  width: 100%;
  height: 100%;
  z-index: -99;
  position: absolute;
  overflow:hidden;
  
  .sky-wheel{
    @include center;
    position: absolute;
    width: 100%;
    height: 60%;
    min-height: 400px;
    border-radius: 50%;
    position: absolute;
    z-index: -99;
    overflow: hidden;
    transition: all 1s;
    
    .no-fall &{
     background: nth($sky,1);
    }
    
    .mild-fall &{
     background: nth($sky,2);
    }
     .stormy-fall &{
     background: nth($sky,3);
    }
     .severe-fall &{
       animation: thunderclap 2s infinite;
     background: nth($sky,4);
    }
  }
}

@keyframes thunderclap{
  0%{background: rgba(257, 257, 257, .5);}
}

.lightning-wrap{
  width: 50px;
  height: 100px;
  position:absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 25%;
  transform: rotate(-20deg);
  overflow: hidden;
  opacity: 0;

  #container.severe-fall & {
      animation: bolt 2s infinite;

  }
  
  @keyframes bolt{
    0%{
      opacity: 0;
    }
    95%{
      opacity:0;
    }
    100%{
      opacity: .5;
    }
  }
  
  .lightning-branch{
    height: 0px;
    width: 0px;
    top:130%;
    left: -200%;
    position:absolute;
    border-left: 100px solid #fff;
    border-right: 170px solid transparent;
    border-bottom: 10px solid transparent;
    transform: rotate(90deg);
    
    &.two{
      left: -45%;
      top: 70%;
      border-left: 40px solid #fff;
    border-right: 40px solid transparent;
    border-bottom: 5px solid transparent;
      transform: rotate(120deg);
    }
  }
  
}

//Rainbow
.rainbow-wrap{
  @include center;
  width: 420px;
  height: 50%;
  top: 20%;
  position:absolute;
  z-index: -2;
  overflow:hidden;
  transform: scale(1.45);
  
  .rainbowdot{
      border-style: solid; 
      border-width: 10px;
      border-radius: 50%;
      position:absolute;
      z-index: -1;
      transform: rotate(-45deg);
      transition: all 2s !important;

    &.dot01{
      width: 400px;
      height: 400px;
      left:0px;
      border-color: transparent transparent green green;
    }
    &.dot02{
      width: 380px;
      height: 380px;
      top: 10px;
      left:10px;
      border-color: transparent transparent orange orange;
    }
    &.dot03{
      width: 360px;
      height: 360px;
      top: 20px;
      left: 20px;
      border-color: transparent transparent red red;
    }
    &.dot04{
      width: 340px;
      height: 340px;
      top: 30px;
      left: 30px;
      border-color: transparent transparent purple purple;
    }  
  }
}

#container #rainbow-stripes > *{
  -webkit-animation-name: hideRainbow;
  -webkit-animation-duration: 2.4s;
  -webkit-animation-iteration-count: 1;
  animation-fill-mode: forwards;  
}

#container.no-fall #rainbow-stripes > *{
  -webkit-animation-name: showRainbow;
  -webkit-animation-duration: 2.4s;
  -webkit-animation-iteration-count: 1;
  animation-fill-mode: forwards;
    }

@-webkit-keyframes hideRainbow{
  0% {-webkit-transform: rotate(135deg);}
  100%{-webkit-transform: rotate(-45deg);}
}

@-webkit-keyframes showRainbow {
      0%  {-webkit-transform: rotate(-45deg);}
      100%  {-webkit-transform: rotate(135deg);}
    }

//Cloud
.cloud-wrap{
  @include center;
  width: 60%;
  height: 90%;
  max-height: 400px;
  position: relative;
  z-index: 1;
  
  .face-wrap > div{
        transition: all 0.5s ease-out;
  }

  #cloud{
  width:100%;
  height: 40%;
  position:absolute;  
  animation: float 2.5s ease-out infinite;
          transition: all 1s;

    
    #container.severe-fall &{
     transition: all 1s;
     animation: strike 2s ease-out infinite;
    }
  @keyframes float{
    0%{margin-top: 5%;}
    50%{margin-top: 10%;}
    100%{margin-top: 5%;}
  }
      @keyframes strike{
      0%{margin-top: 5%;}
      25%{margin-top: 20%;}
    }
      
    .face-wrap{
    @include center;
    left: 0;
    right: 0;
    margin: auto;
    width: 40%;
    height: 60%;
    z-index: 5;
    top:35%;
    overflow: hidden;
    position: relative;
      
      .eyes{
        width: 100%;
        display: relative;
        min-width: 110px;
        
        .eye{
          width:15px;
          height: 15px;
          background: black;
          display: inline-block;
          margin: 5px 10px;
          border-radius: 20%;
          transition: all 1s;
          transition-property: border-radius, size;
          
          .no-fall &{
            border-radius: 50%; 
            width: 20px;
            height: 20px;
          }
          .severe-fall &{
            border-radius: 50%;
            transition: border-radius 1s;
          }
           &.eyelid{
          position: absolute;
          top: -15px;
          border-radius: 0%;
          animation: blink 3.5s ease-out infinite;
          transition: all 1s;
          transition-property: translate, border-radius;
             .no-fall &{
               background: #fff;
               animation: none;
               top: 0px;
               height: 10px;
               width: 10px;
               border-radius: 50%;
             }
             .mild-fall &{
               background: nth($cloud, 2);
             }
             .stormy-fall &{
               background: nth($cloud, 3);
             }
             .severe-fall &{
               background: nth($cloud, 4);
              border-bottom: 5px solid nth($cloud, 4);
               &.left{
                 transform: rotate(5deg);
               }
               &.right{
                 transform: rotate(-5deg);
               }
             }
        }
@keyframes blink{
            40%{top: -15px;}
            50%{top: 0px;}
            100%{top: -15px;}
          }
        } 
       }
     }
    
      .mouth{
        @include center;
        height: 10%;
        border-radius: 50%;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent black;
        transition: all 0.5s ease-out;
        z-index:9999;
        
        .no-fall &{   
    transition: all 0.5s ease-out;
          width:50%;
          top: 5%;
        }
        .mild-fall &{
          width: 20%;
        }
        .stormy-fall &{  
          width: 25%;
          border-radius: 20%;
          transform: rotate(18deg);
        }
        
        .severe-fall &{
           width: 35%;
           margin-top: 10px;
           border-radius: 100%;
           transform: rotate(180deg);
        }
      }
    } //end facewrap
  } //end cloudwrap


  
  #cloud-puffs{
    background: nth($cloud, 1);    
     .no-fall &{ background: nth($cloud,1);}
    .mild-fall &{
    color: nth($cloud, 2);
    background: nth($cloud, 2);
    }
    .stormy-fall &{
    color: nth($cloud, 3);
    background: nth($cloud, 3);
    }
    .severe-fall &{
    color: nth($cloud, 4);
    background: nth($cloud, 4);
    }
    
   div { animation: phaseShift 1.5s ease-out infinite;}
      @keyframes phaseShift{
    0%{
      border-width: 5px;
      border-color: inherit;
    }
    50%{
      border-width: 10px;
      border-color: inherit;
    }
  } 
 }
  .puff{
  @include center;
  position:absolute;
  background: inherit;
  height: 20%;
  bottom: 0px;
  border-color: inherit;
  border: 5px solid ; 
 -moz-border-radius: 50px 50px 0px 0px;
 -webkit-border-radius: 50px 50px 0px 0px;
  border-radius: 50px 50px 0px 0px;
    
    &.one{
   width: 90%;
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
   z-index: 4;
   animation-delay: .25s;
    }
    &.two{
      width: 70%;
      height: 20%;
      bottom: 20%;
      z-index: 3;
      animation-delay: .50s;
    }  
    &.three{
      width: 50%;
      bottom: 40%;
      z-index: 2;
      animation-delay: .75s;
    }
    &.four{
      width: 20%;
      bottom: 60%;
      animation-delay: 1s;
    }
  }
  
  .rain{
    @include center;
    -webkit-filter: url('#liquid');
    filter: url('#liquid');
    width: 90%;
    height: 50%;
    bottom: 20%;
    position:absolute;
    
    .rainbase{
      width: 100%;
      height: 10%;
      background: #fff;
      animation: float 2.5s ease-out infinite;
      
      .mild-fall &{
        background: nth($cloud, 2);
      }
      .stormy-fall &{
        background: nth($cloud,3);
      }
      .severe-fall &{
        animation: strike 2s ease-out infinite;
        background: nth($cloud,4);
      }
    }
    
    #rain-drops{
      z-index: 2;
      position: relative;
      width: 100%;
      height: 100%;
     
       
    .drop{
      position:absolute;
      width: 20px;
      height: 20px;
      top: -10px;
      z-index: 10;
      background: nth($raindrop, 1);
      
      
      .mild-fall &{
        animation: drop nth($drop-speed, 1) ease-in infinite;
        background: nth($raindrop,1);
      }
      .stormy-fall &{
        animation: drop nth($drop-speed, 2) ease-in infinite;
        background: nth($raindrop,1);
      }
      .severe-fall &{
        animation: drop nth($drop-speed, 3) ease-in infinite;
        background: nth($raindrop,2);
      }
      
      &.one{
        left: 0%;
        animation-delay: nth($delay,1);
      }
      &.two{
        left: 20%;
        animation-delay: nth($delay,2);
      }
      &.three{
        left: 40%;
        animation-delay: nth($delay,3);
      }
      &.four{
        left: 60%;
        animation-delay: nth($delay,4);
      }
      &.five{
        left: 80%;
        animation-delay: nth($delay,5);
      }
      
      &.six{
        left: 95%;
        animation-delay: nth($delay,6);

        }
      }
    }//end drops    
@keyframes drop{
      0%{
        top: -15px;
        height: 0px;
      }
      5%{
        height: 20px;
      }
      100%{
        top: 60%;
      }
    }
  }
    
    
.ground-wrap{
  width: 100%;
  height: 10%;
  bottom: 22%;
  position: absolute;
  z-index: -99;
 
  .ground{
    position:relative;
    background: lightgreen;
    width: 100%;
    height: 50%;
    transform: skewX(60deg) scale(1.1);
    &.top{
      z-index: 3;
      border-top: 6px solid lightgreen;
    }
    &.middle{
      transform: skewX(0deg);
      margin-left: 8%;
      z-index: 1;
      background: lightgreen;
    }
    &.side{
      transform: skew(0deg, 30deg) rotate(0deg) translate(0%, 40%);
      width:15%;
      left: -7%;
       top: 15%;
       position: absolute;
      background: green;
    }
  }
}

.flower{
  width: 20px;
  position:absolute;
  bottom: 60%;
  z-index: 999;
  overflow: hidden;
  height: 0px;
  transition: all 1s;

  #container.mild-fall &{
    height: 35px;
    transition: all 1s;

  } 
 
  .blossom{
    width:20px;
    height: 20px;
    background: #E39EC1;
    border-radius: 50%;
    z-index: 3;
  }
  .stem{
    width: 10px;
    height: 25px;
    border-style: solid;
    border-width: 3px;
    border-color: transparent green transparent;
    border-radius: 0%;
    margin: 0 auto;
    left:6.5px;
    margin-top: -10px;
    position:relative;
    display: block;
    z-index: -4;
  }
  &:nth-child(2){
  left: 50px;
  .blossom{
    background:#9E4770;
  }
}
  &:nth-child(3){
    left: 180px;
    .blossom{
      background: #FE938C;
    }
  }
  &:nth-child(4){
    left: 200px;
    .blossom{
      background: #DEBAC0;
    }
  } 
}
#stormycloud{
  position:absolute;
  top: -90px;
  width: 40%;
  height: 80px;
  z-index: -5;
  transition: top 2s;

  #container.stormy-fall &{
    top: 20%;
    transition: all 2s !important;
  }
  &.left{
    left: 8%;
  }
  &.right{
    right: 8%;
  } 
  .puff{
    border-color: nth($cloud, 4);
    background: nth($cloud, 4);
  }
}

View Compiled

var slide = document.getElementById('slide');

slide.oninput = function(){
  clearAnimation();
  switch (this.value){
    case "1": happyWeather();
    break;
    case "2": mildWeather();
    break;
    case "3": stormyWeather();
    break;
    case "4": severeWeather();
    break;        
  }
}

function applyAnimation(id, animation){
  var el = document.getElementById(id);  $(el).addClass(animation);
}

function clearAnimation(){ 
  el = document.getElementById("container");
  $(el).removeAttr( "class" );
}

function happyWeather(){
  applyAnimation("container", "no-fall");
}

function mildWeather(){
  applyAnimation("container", "mild-fall");
}

function stormyWeather(){
  applyAnimation("container", "stormy-fall");
}

function severeWeather(){
  applyAnimation("container", "severe-fall");
}

This Pen is owned by Nolan on CodePen.

See more by @nolakat on CodePen

External CSS

https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js