A Pen by J. James Rockhill.

index.html

<package>
<display>
</display>
</package>

scjiw.markdown

scjiw

A Pen by J. James Rockhill on CodePen.

License.

script.js

$('display').ready(function(){
  
  var mountainrow = document.createElement('mountainrow');
  var displayback = document.createElement('displayback');

  $('display').append(displayback);
 
  for ( var k = 1; k <= 30; k++ ){
      
      var cloud = document.createElement('cloud');
      
      $('display').append(cloud);
      
      $(cloud).each(function(){
        
        for ( var l = 1; l <= 5; l++ ){
          
        var puff = document.createElement('puff');  
        
        $(cloud).append(puff);
          
        var skywidth = $('display').width();
          
        var cloudzin = Math.floor(Math.random() * 10) + 24;
          
        var cloudx = Math.floor(Math.random() * (skywidth * 3) ) - 500;
          
        var cloudy = Math.floor(Math.random() * 200) - 100;
          
        var cloudz = Math.floor(Math.random() * 1000)-500;
        
        var cloudtran = 'translateZ('+cloudz+'px)';
        
        $(cloud).css('z-index', cloudzin);
        $(cloud).css('left', cloudx);
        $(cloud).css('top', cloudy);
        $(cloud).css('-webkit-transform', cloudtran);
        $(cloud).css('transform', cloudtran);
          
        $(puff).each(function(){
              
          var dim = Math.floor(Math.random() * 10) + 40;
          
          $(puff).css('height',dim);
          $(puff).css('width',dim);
          
        });
          
        }
        
      });
     
   } //end cloud
  
  $(displayback).css('-webkit-transform', 'rotatex(60deg) translatex(-50%) translateZ(-275px)');
  $(displayback).css('transform', 'rotatex(60deg) translatex(-50%) translateZ(-275px)');
  
  for ( var j = 1; j <= 10; j++ ){
      
      var mountain = document.createElement('mountain');
      var snowleft = document.createElement('snowleft');
      var snowright = document.createElement('snowright');
      
      $('display').append(mountain);
      
      $(mountain).each(function(){
      
      var mountainzin = Math.floor(Math.random() * 10) + 24;
      var mwidth = $('display').width();
      var randx = Math.floor(Math.random() * ((mwidth * 2 ) + 300)) - 800;
        
      var randz = Math.floor(Math.random() * 400) + 600;
      var posz = "translateZ(-"+randz+"px) rotate(45deg)";
        
      var mcolor = Math.floor(Math.random() * 10) + 35;
      var mcolor2 = Math.floor(Math.random() * 10) + 40; 
      var cstring = 'hsla(20, '+mcolor2+'%, '+mcolor+'%, 1)';
        
        $(mountain).css('z-index',mountainzin)
        $(mountain).css('left',randx);
        $(mountain).css("-webkit-transform", posz);
        $(mountain).css("transform", posz);
        $(mountain).css('background', cstring);
        $(mountain).append(snowright,snowleft);
      });
      
 } //end mountain

for ( var h = 1; h <= 12; h++ ){

  var treerow = document.createElement('treerow');
  
  $('display').append(treerow);
  
  $(treerow).each(function(){
    
    for ( var i = 1; i <= 60; i++ ){
      
    var tree = document.createElement('tree');
    var stump = document.createElement('stump');
    var treetop = document.createElement('treetop');
    
    $(treerow).append(tree);
    $(tree).append(stump,treetop);
    
    $(tree).each(function(){
      
      var rowwidth = $( treerow ).width();
      var randomx = Math.floor(Math.random() * (rowwidth + 100)) -100;
      
      var ttcolor = Math.floor(Math.random() * 15) + 60; 
      var ttcstring = 'transparent transparent hsla(20, 100%, '+ttcolor+'%, 1) transparent';
      
      var trunkcolor = Math.floor(Math.random() * 20) + 40;
      var tcstring = 'hsla(20, '+trunkcolor+'%, '+trunkcolor+'%, 1)';
      
      $(tree).css('left', randomx);
      $(treetop).css('border-color', ttcstring);
      $(stump).css('background', tcstring);
      
    });
    
    }
    
    var rowtranz = 'translateZ('+(-300+[h]*50)+'px) translateX(-50%)';
 
    $(treerow).css('top', (23*[h])+200);
    $(treerow).css('-webkit-transform',rowtranz);
    $(treerow).css('transform',rowtranz);
    
  });
  
 }
  
  for ( var l = 1; l <= 1; l++ ){
    
    var rockbox = document.createElement('rockbox');
    var rockhill = document.createElement('rockhill');
    var rockhilltitle = document.createElement('rockhilltitle');
    
    var fcolor = "hsla(20, 100%, "+ (100 + ([l]*2)) +"%, 1)";
    var zin = 55 + parseInt([l]);
    var rocktran = "translateZ("+zin+"px)";
    var rockin = 55 + parseInt([l]);
    
    $(rockbox).each(function(){
       
      $(rockbox).css('-webkit-transform',rocktran);
       $(rockbox).css('transform',rocktran);
       $('display').append(rockbox);
    });
   
    $(rockhill).each(function(){  
      $(rockhill).css('color',fcolor);
      $(rockhill).text('ROCKHILL');
      $(rockbox).append(rockhill); 
    });
    
    $(rockhilltitle).each(function(){  
      $(rockhilltitle).css('color',fcolor);
      $(rockhilltitle).text('DESIGNER♥DEVELOPER');
      $(rockbox).append(rockhilltitle); 
    });
    
  }

});

$( "display" ).mousemove(function( event ) {
  
  var pageCoords = event.pageX;
  var pagewidth = $( document ).width();
  var orange = pagewidth;
  var newrange = 5 - -5;
  var newvalue = ( ( (pageCoords) * newrange /orange) + -5);
  var rotatedegrees = (newvalue+50)+"%";
  
  var pageCoordsX = event.pageY;
  var boxheight = $( 'display' ).height();
  var orange2 = boxheight;
  var newrange2 = 5 - -5;
  var newvalue2 = ( ( (pageCoordsX) * newrange2 /orange2) + -5);
  var rotatedegreesX = (newvalue2+50)+"%";
  
  var rotatemod = rotatedegrees + ' ' + rotatedegreesX;
  
  $('display').css("perspective-origin",rotatemod);
  $('display').css("-webskit-perspective-origin",rotatemod);
  
});

style.less

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  backface-visibility: hidden;
}

package{
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  transform: translate3d(0,0,0);
}

body, html{
    transform: translate3d(0,0,0);
}

display{
  display: flex;
  height: 640px;
  width: 100%;
  position: relative;
  background: lightgrey;
  overflow: hidden;
  perspective: 700px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  z-index: 2;
  transform: translate3d(0, 0, 0);
  background: linear-gradient(to bottom, hsla(20, 80%, 45%, 1) 0%, hsla(20, 100%, 100%, 1) 100%);
}

treerow{
  position: absolute;
  width: 250%;
  left: 50%;
  z-index: 50;
}

tree{
  position: absolute;
  width: 30px;
  height: 120px;
  display: block;
  z-index: 51;
  transform: translate3d(0, 0, 0);
}

treetop{
  width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 100px 15px;
  position: absolute;
  transform: translate3d(0, 0, 0);
  z-index: 53;
}

stump{
  width: 6px;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translate3d(0, 0, 0);
  z-index: 52;
}

displayback{
  position: absolute;
  display: flex;
  width: 500%;
  height: 300%;
  left: 50%;
  bottom: -50%; 
  background: linear-gradient(to bottom, hsla(20, 100%, 83%, 1) 0%, hsla(20, 100%, 90%, 1) 100%);
  transform-origin: 50% 100%;
  z-index: 35;
}

mountain{
  display: flex;
  width: 600px;
  height: 600px;
  position: absolute;
}

snowleft{
  width: 100px;
  height: 150px;
  background: white;
  display: block;
  position: absolute;
  border-bottom-right-radius: 100%;
  z-index: 31;
  transform: translate3d(0,0,0);
}

snowright{
  width: 150px;
  height: 100px;
  background: white;
  display: block;
  position: absolute;
  border-bottom-right-radius: 100%;
  z-index: 31;
  transform: translate3d(0,0,0);
}

sky{
}

cloud{
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  transform-style: preserve-3d;
}

puff{
  margin: 0px 0px 0px -10px;
  background: linear-gradient(to bottom, hsla(20, 80%, 85%, 1) 0%, hsla(20, 100%, 100%, 1) 100%);
  border-radius: 50% 50% 0% 0%;
  z-index: inherit;
  transform: translate3d(0,0,0);
}

puff:first-child{
  border-radius: 50% 50% 0% 50%;
}

puff:last-child{
  border-radius: 50% 50% 50% 0%;
}

rockbox{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  transform-style: preserve-3d;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

rockhill{
  display: flex;
  font-family: Oswald;
  font-size: 220px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
  transform: translate3d(0, 0, 0);
  text-shadow: 3px 3px 0px hsla(20, 50%, 50%, 1),
    5px 5px 0px hsla(20, 50%, 50%, 1);

}

rockhilltitle{
  display: flex;
  font-family: Oswald;
  font-size: 50px;
  letter-spacing: 13px;
  line-height: 1.1;
  font-weight: 700;
  text-transform: uppercase;
  transform: translate3d(0, 0, 0);
  text-shadow: 3px 3px 0px hsla(20, 50%, 50%, 1),
    5px 5px 0px hsla(20, 50%, 50%, 1);
}