cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
                 <div id="stage">
     <div id="sun">
       <img src="data:image/png;base64,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" />
     </div>
     <div class="cloud" id="cloud1">
       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wkGFgwbObxg1QAAAytJREFUeNrt3MFxwkAQRFGG0k35h8rZzsAWIGm3Z98LwAebT4+oMo8HAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwtfIr4KjX6/Vzxc/d993rUMAkxCpoAdMwWkELmEbRilnANApXyAKmQbhCFrBwm1oxZgELV8QCRrhCFjDiFbKAhcsqEQtYvCIWMOIVsoARrogFLF5WiVjA4hWxgBGviAWMeEUsYPGySsQCFi/BEQtYvARHLGDxEhzx058Lct84BexFRDAntHgJPqUFLF6CI3ZCQ/AbqoC9WAgmYAh+YxWwFwnBfIglPA6a8QOtzZ9FsFhg4WKFLbBowQILl0VW2AILFwssXqywBRYuWGDxssoKb8KFXE/xghNavDijLbB4QcDixQktXpj9jH6KF5zQgICtLywfsHhZRYkXvjfqgyzPwOCEtr4gYGDNgK0vAhYvCBgQMNA9YOczAgYEbH3hXpsgQcCChQFKuHCOEf/QUKKF3JhLuJAbcgkXciMu8UJuyCVcyA25xAu5EZdwITfiEi/khlzihdyIS7yQG3GJF3IjLvFCbsQlXsiNuMQLuRH7Sh0I9m/h1hfmXeESL+RG7ISGjie09YX5V7jEC7kRO6Gh0wltfSFnhS0wdFlg6wtZK2yBIZiAocMJ7XyGvDPaAkP6AltfyFxhCwzBBAwCBoY8A3v+BQsMCBgQMAgYEDAgYEDAIGBAwICAQcCAgAEBAwIGAQMCBgQMCBgEDAzme6EhlO+FBic0IGDgs2dgz8GQ9/xrgaHLAlthyFpfCwzhBAxdTmhnNOSczxYYui2wFYaM9bXA0HGBrTDMv75/BiximDteJzR0PaGtMMy9vocCFjHMGa8TGrqf0FYY5lzftwIWMcwV79sBixjmifejgEUMc8T7ccAihvHxfhWwiGFsvF8HLGIYF+8pAQsZ7g/39IBFDPfGe3rAQoZ7wr00YBHD9fFeGrCQ4bpwbwtYyAi3QcBiRrRNAhYywm0QsKARLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA0NovO86hp3LJWo8AAAAASUVORK5CYII=" />
     </div>
     <div class="cloud" id="cloud2">
       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABmJLR0QA1ADtAO36t7/QAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wkGFgAoKtlOzwAAAnZJREFUeNrt3cFR6zAUhlFLk07ogcoog8rogVpgxyYjx7JE4qt7zpoF4zeff+kxkG0DAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDVFI/gmI+v75+jX/v5/ua5CkQIZ4hHIIIQjEBEIRaBCEMoAhGGUEgZSNQwhCIQYQhFIMIQikDEIRKBCEMoAhGHSFglEHGIRCDiEIlAhCEUgYhDJAIRh0gEIg6RJFI9grV5wYy5+cdl5LmvvlBFHI5aM5/1asEUceSM5BnPeIVYijgQiks6XnrxF8R6WBOBiEMkgSJxxMLL8OoLYj0siQWBgC/G4iFhSS66IOLAEQsCvygFgkiuGIjjFY5YEPylWT0IsCBYEYHAbE//AY3jFUdc5YeHFgQEAgLBZT32HcT9g2j3FIEgFoEgFoHA9FAEglB2+F8sljfyYi4Rvkl41ZpYEKyJQOBcJAJBJK+6g7h3EP1OUsSASNqRFGFAO5KbMGDiEUsYZFqRIgxoR1LFAQNHLHGQeUWqOODEgogDK9JYEHFAxyUdHLGsB9wds6o4wBELxo5Y1gMsCPQviPUACwICgalHLMcrsCAgEBAICAQEAgIBgYBAQCCAQEAgMOTuV24BCwICgRn8RiE07h8WBByx4Nx6/AXy6JM+wYIA7U+YsiJgQeDwemybv+4OuycoC4I4dq4XteeLIRufUYj1cEmH/jh2F8SKkD2Oh4GIhMxxHApEJGQMoysQoZAxju5AREKWME4HIhQyhDEciFBYOYxpgYiF1aL4t0AEQ/QgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgfb+MDzJVReI41gAAAABJRU5ErkJggg==" />
     </div>
     <div class="cloud" id="cloud3">
       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVQAAAFUCAYAAAB7ksS1AAAABmJLR0QAWACsAMXKTK1OAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wkGFgUrzqfrMAAABPZJREFUeNrt3c1y4joUhVGLYqb3f1TGyYj8FCHY5sg+ktYad/WtJq6v94Gk77IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHSteAnmc7vdPqJ/z1qrZwlB9RKIZmtii6AioCILgiqgfRFXBBURFVgQVBEVVhBUIZ2WuCKoiKiwIqgIqbiCoAqpsIKgCinCiqAipKIKgiqmwgqCKqQIK4IqpIgqgoqYCisIqpAiqgiqmCKsCKqYIqoIKmIqqiCoQoqwIqhiiqgiqGKKqIKgiimiiqCKKaKKoIopooqgiqlXQVRBUMUUUUVQxRRRRVDFFFFFUBFTRBVBFVNEFUEVU0Q19hkUe0EVU6aL6pHPnMge5+olgLH/4v753xVXC9U6pduVmvn5EldBFVPSh6m350pYBVVMSRel3p8pYRVUMQVRFVRBBWEVVDEFUUVQxRSEtaWLlwAwRCxUDwVYqhYqYJRYqB4EsFQt1XmDKqYgqk5+wFCxUH3RwVK1UAGMFkH1hQYEFTBehlF8gYEI3k+1UAFDRlB9UQFBBaxUQQXgP0O9iezchxxm/YDKQgWwUK1TsFItVABBBXA1Dh5U5z4gqICVKqgADBdU5z4gqICzX1ABEFSAhrr+SQbvn0I/ZvjJKUEFBFZQBRUEV1AFFRgyst0GVUxBXAVVUIFB4yqogLAKqqACucIqqICwCqqgArnC6kdPgeEdNcCKFwewVi1UgFSDzEIFrFULFSDXOBNUQFQFFSBXVAUVICiqggoQFNUywx8SYIu9n/6nCqpwAj1H9dSgCigwUlRPCaqQAiNG9SqiADGaL1QhBWZZqc2CKqTAbFFt8n2oYgo4+YUUYPdKDQuqmAKzR/XtT/mFFCBgoYopYKV+2/2hlJgCBCxUMQWs1MeVunmhiilAwEIVU4DnK9U/MA0QZHVQrVOAgJNfTAFen/0vF6qYAgSf/AC8cfJbpwDrz/6LmAI4+QHyn/zWKcD2s99CBWh18lunAEFBBSAgqNYpwH5FUAGCgyqmAIEnPwCCCpDj5HfuA1ioAIIKIKgA/Kl4/xTAQgUQVABBBUBQAQQVQFABBBUAQQUQVABBBUBQAQQVIJtaaxFUAAsVQFABBBUAQQVoptZaBBUgcqHeywqAkx/g9HNfUAEsVIB8vqaq/500wP5z30IFcPID5Fqnv4Lq26cALFSA09epoAIEeqisT/sBtq9TCxWg5UK1UgG2r1MLFSAopk+D6luoALazUAEC1umyPHkP9c57qYCYrr/YX/5CUQXE1MkPcKhV9bVSAes0KKiiCoipkx/gkJhuWqhWKiCmgUEVVUBMA4MqqoCYBgZVVAExDQyqqAJCGhhUUQXENDCoogqIaWBQhRWYOaRNgiqqwIwhbRZUYQVmjGnToIoqMEtIDwmqsAIzhPTQoIorMGpETw2qsAIjRTRFUAUWGCGiKYMqskBP8QQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGNAnC8Mp2tKAo/sAAAAASUVORK5CYII=" />
     </div>
     <div class="cloud" id="cloud4">
       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOQAAADkCAYAAACIV4iNAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wkGFwg2Gc2TkwAAAzVJREFUeNrt3btuIkEURVGqBQEJ//+dTggI7MiSJT9oqOr2Ke5a2SQz0qA955YteQ4HAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACSNH8F2d6ut/fRv+flfPK5C5K9wxOqIJkoQIEKUoSTEqcgRShOQSJEcQpSiMJEkCIUpiCFKEwEKUZhClKICFOQQhSlIMWIMAUpRFEKUoyIUpBiFKYgxYgoBSlEUQpSjIhSkGJElOWDFKMw0yxiBAspRqykIMUoSkGKEVEKUoyiFKQYEWWHxUeMf1wtpA8QS1ltIcWIhRQjVtJC4j1pIX1QWEoLKUZelZMV/wgHOfpQwBtSeHhLzhikAKkU5VGEYCFFiJVMXEghQsBCChErGbCQQoSAhRQiVvK+RYxQ5GQVIoScrGLE2RpysooRAhZSiFjJkIUUI4QspBixnCFBihFxhgQpRsQZEqQYEWdIkGJEmCFBihFRChJKhNnECDlhNjFCTpRNjJATpp9cDgOMGq221x8ElrIzSDHCvlE6WSHofG3WEXKW0kJC0FI26wg5S2khIWgpF+sIOSwkBK1ks46Q8560kBC0lIKEIM25Cjmnq4WEIIKEoLekICHtDen9CBlvSQsJ3pDAT9epICHpDen9CDlvSQsJ3pCAICHU59NRkGAhAUGCIIG1fB8SLCQgSBAkIEgQJCBIECQgSBAkIEgQJCBIwA9KBgsJCBIECQgSZuR/UAYLCQgSgl3Op7Z8/YW/ErCQgCAhz7cz1Vdb4X/ejxYS0k9WX9wBb0gof67+GqSVBAsJpdfxzyCtJFhIKO3uCvq+JOxzrq5aSKcrOFmh3DquOlmdrrBPjA8tpNMVnKxQZh0fOlmdrrBtjE8tpNMVtvN0XJYSxg9Z19qJEsZeld3npyhh3BNvyHtQlNAf47AgRQn9MQ4NUpTQF+PwIEWJGPu+LbjJ9xRFiRiDghQmYgwMUpSIMSxIYSLEwCBFiRjDghQmQgwMUpgIMTBIYSLEwCDFSfUQY4MUJtUinCJIgVIlwimDFCmvGCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANk+AGllnz+SDkmjAAAAAElFTkSuQmCC" />
     </div>
     <div id="clock">
       <div id="time">
       </div>
     </div>
     <div id="grass"></div>
     <div id="ground"></div>
   </div>
            
          
!
            
              body{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
#stage {
  width: 100%;
  height: 100%;
  background-color:#ccece4;
  position: fixed;
  top:0;
  display: none;
}

#grass {
  height: 50px;
  background-color: #96c249;
  width: 100%;
  display: block;
  position: absolute;
}

#ground {
  position:fixed;
  bottom: 0;
  width: 100%;
  display: block;
  height:20px;
  background-color: #b8a669;
}

#sun {
  top:10px;
  position: absolute;
  display: block;
  left:10px;
  z-index: 50;
}

.cloud {
  position: absolute;
  display: block;
}

#cloud1 {
  top:50px;
  z-index: 100;
  left:-250px;
}

#cloud2 {
  top:80px;
  z-index: 200;
  left:-340px;
}

#cloud3 {
  top:30px;
  z-index: 300;
  right:-350px;
}

#cloud4 {
  top:120px;
  z-index: 350;
  left:-350px;
}

#clock {
  background-color:#fafafa;
  width: 700px;
  position: absolute;
  z-index: 50;
  display: block;
  left:0;
  right:0;
  margin: 50px auto;
  border: 4px solid #ababab;
}

#time {
  font-size: 64px;
  color:#ababab;
  text-align: center;
}
            
          
!
            
               function animationPipeline() {

   var self = this,
   w = window.innerWidth,
   h = window.innerHeight,
   stage = document.getElementById('stage'),
   grass = document.getElementById('grass'),
   cloud = document.getElementsByClassName('cloud'),
   sunElem = document.getElementById('sun'),
   sunElemWidth = sunElem.innerWidth,
   clock = document.getElementById("clock"),
   time = document.getElementById("time"),
   sunTL = new TimelineMax({repeat:-1, repeatDelay:3.0}),
   moonData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wkHAAkny7NQsAAABANJREFUeNrt201uGzsQhVFR0F68/+V4NfZA0MSQaKl/yCrW+aZB8h66fXTJ2GkXvdXP9+Wn9+vt69I8pfXyUneggAQQKD59oJAs1c0j2I9CFgQMK2JBoJCKAgFDjlgBYDheWRAwZEHAsB5aCMjsxYADEDjgAAQMOJQcSJQLOByAwAEHIHDAoefdwJASL0g0HNYDEDjgUGQgEY9UcNTsCoeUZEGi4rAegMABh6IesRyrZEES4rAeuoEhBVuQDDish6YAgUMu6Y5VAmTRSbUemgHEesgdJDkO66HhC2I5BAgccsRaG4fjlYYtiOUQICvNqPXQKCDWQ4DAIZf0Gjgcr+QOIs0E4mglR6wFcTheyRFLmgXE0UqAwCFACl6+3D90FhDrIUAkfQ7EeggQSfe7asX1cEHX4QviaCVAJH0OxHoIEEmASIcCcbwSIJKe1qqth++ByIJIZwNx95AsiASIdCgQxyvJgkiASHtqFY9XvhciCyIBIg0E4m+vJAsiASIBIo0C4v4hWRAJkP+ylgJEOgqIT1TJgkiASIC4qAsQCRApNhBHDcmCuIcIEAkQCRDHLAEiAWJFBIgEiASIY5YEiASIFREgEiBWRIBIgFgRASIBYkUEiASIrIgAgUSASIBYEQECiQCRALEiAgQSASJIABEketS87J0P8Ov+DGVBJEDkqOU9OmI5aqn7df94nxbEknhfnV+3IJYEjt779AkICRyAgKJNX+PuIO4l3gUgkHgHG08BXqTjFhhvAIEEEjgAAQUOQCAB46h31FwqQYHj9bvxt1gLvthqz+/MZ2hBrIkPls67aD7VQIHj9Tu4edxxvwBAmf/BbUEsChid591cHkGB4vVzdsRK+kWzKpZoH8wWxKpA0XmeLZNmrQMm6tfW3+fniOUYVhrE5iOWFbEw5TA8eTYWpPDCbEFU7QPTgkidD4Xr1t8oVchP88p6dEbguvcPkCyIVHA9PgJiRWRBJOuxHYgVkQWRrMd2IFZEpSBt/Y2+w67V18MRS3CcBcRRSy7pUuH12A3Eisgl3YVdRdfDEUtwjADiqCVHLEctFVuPw4FAopVwuIMIjtFA3EfkDuKopQLrcSoQSJQdx+lAIFFmHC7pgmP2glgRZcUxDAgkyohj6BHLX/8qJcDR/0FLokwfulM+1SFRlhPJtGMPJMpwXJ96L4BE0e+y0y/OkCgqjhBAIFFUHGGAQKJoMMIBAUXRcIQEAomi4AgLBBI4wvy/RH5QkIABCCi6xP1ZvTQ/QAgJHIBAAgYgoCjPP39I+280IAEDEFDgAAQUMACBBAxAQNFKOJYFAgoYgIACBiCgQAEILGAAAgoYgMACBSCwQAGIimGBAhBggAAEGCAAAQeCQf0CVbnx2DzGKuQAAAAASUVORK5CYII=',
   sunData = 'data:image/png;base64,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';

   /**
    * Setup styles and events
    **/
   self._initilize = function() {
    self.setupStage();
    clock.style.top = (h / 4) + 'px';
    window.setInterval(self.updateClock, 1000);
   };

   /**
    * Setup the stage and fire off the stage animations
    **/
   self.setupStage = function() {
    grass.style.top = (h - 70) + 'px';
    stage.style.height = h + 'px';
    self.runAnimation(cloud[0], 33.0, {left:(w + 100)});
    self.runAnimation(cloud[1], 27.0, {left:(w + 100)});
    self.runAnimation(cloud[2], 39.0, {right:(w + 100)});
    self.runAnimation(cloud[3], 42.0, {left:(w + 100)});
    self.animateSun();
   };

   /**
    * Create the pulsating animation with GSAP
    **/
   self.animateSun = function() {
    sunTL.append( new TweenLite(sunElem, 1.0, {scale: 1.1}) );
    sunTL.append( new TweenLite(sunElem, 1.0, {scale: 1.0}) );
   };
   /**
    * Generalized animation method
    **/
   self.runAnimation = function(elem, time, css) {
    TweenLite.to(elem, time, {css, onComplete:self.resetAnimation, onCompleteParams:[elem, css]});
   };
   /** 
    * Callback method fired after the cloud animation completes
    **/
   self.resetAnimation = function(elem, css) {
    if (elem.id === 'cloud3') {
      elem.style.right = -400 + 'px';
    } else {
      elem.style.left = -400 + 'px';
    }
    // random time variable to run cloud animation length
    var t = Math.floor(Math.random() * 40) + 15;
    self.runAnimation(elem, t, css);
   };
   /**
    * Method that is fired every second to update the clock
    **/
   self.updateClock = function(){
    var timeNow = new Date();

    var currentHours = timeNow.getHours();
    var currentMinutes = timeNow.getMinutes();
    var currentSeconds = timeNow.getSeconds();

    currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
    currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

    var timeOfDay = ( currentHours < 12 ) ? 'AM' : 'PM';

    currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

    currentHours = ( currentHours == 0 ) ? 12 : currentHours;
    
    self.l(timeOfDay + ' ' + currentHours);

    if ((timeOfDay == 'PM' && currentHours >= 9 && currentHours != 12) || (timeOfDay == 'AM' && currentHours <= 8)) {
      stage.style.backgroundColor = '#333';
      stage.style.display = 'block';
      sunElem.firstElementChild.src = moonData;
    } else {
      stage.style.backgroundColor = '#ccece4';
      stage.style.display = 'block';
      sunElem.firstElementChild.src = sunData;
    }

    // Create the display
    var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

    // Update the time display
    time.innerHTML = currentTimeString;
   };
   /**
    * Logging Function
    **/
   self.l = function(message) {
    console.log(message);
   };

   // Initialize the functionality of the controller
   self._initilize();

 } // End animationPipeline


 var interval = setInterval(function() {
  if(document.readyState === 'complete') {
    clearInterval(interval);
    var pipe = animationPipeline();
  }
 }, 100);

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console