Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

<script type="text/javascript" src="http://shavesociety.dk/scroll/janpaepke-ScrollMagic-097964c/js/jquery.scrollmagic.min.js"></script>


<div id="container">  
  <div id="slidesleft">
    <div id="butik"><p style="display: block;  vertical-align: middle; line-height: 45px; text-align: left; padding-left: 15px;">Butiks Omkostninger</p></div>
  <div id="patenter"><p style="display: block;  vertical-align: middle; line-height: 45px; text-align: left; padding-left: 15px;">Dyre Patenter</p></div>
  <div id="funktioner"><p style="display: block;  vertical-align: middle; line-height: 45px; text-align: left; padding-left: 15px;">Uendelige Funktioner</p></div>
    <div id="sponsor"><p style="display: block;  vertical-align: middle; line-height: 45px; text-align: left; padding-left: 15px;">Sponsorater Og Reklamer</p></div>
</div>
  
  <div id="slidesmiddle">
    
    <div id="coinleft">
      
      <div id="brick20">
    </div>
    <div id="brick19">
    </div>
    <div id="brick18">
    </div>
    <div id="brick17">
    </div>
    <div id="brick16">
    </div>
    <div id="brick15">
    </div>
    <div id="brick14">
    </div>
    
    <div id="brick13">
    </div>
    
    <div id="brick12">
    </div>
    <div id="brick11">
    </div>
    
    <div id="brick10">
    </div>
    <div id="brick9">
    </div>
    <div id="brick8">
    </div>
    <div id="brick7">
    </div>
    <div id="brick6">
    </div>
    <div id="brick5">
    </div>
    <div id="brick4">
    </div>
    
    <div id="brick3">
    </div>
    
    <div id="brick2">
    </div>
    <div id="brick1"></div>
      <div class="coinshadow"></div>      
      </div>
    
    <div id="coinright">
    
       <div id="rbrick8">
    </div>
    <div id="rbrick7">
    </div>
    <div id="rbrick6">
    </div>
    <div id="rbrick5">
    </div>
    <div id="rbrick4">
    </div>
    
    <div id="rbrick3">
    </div>
    
    <div id="rbrick2">
    </div>
    <div id="rbrick1">
      </div>
      
      <div class="coinshadow"></div>
      
    </div>
    
  </div>
  
<div id="slidesright">
  <div id="direktesalg"><p style="display: block;  vertical-align: middle; line-height: 45px; text-align: right; padding-right: 15px; ">Sendt Direkte Til Dig</p></div>
  <div id="godtdesign"><p style="display: block;  vertical-align: middle; line-height: 45px; text-align: right; padding-right: 15px; ">Effektivt Design</p></div>
</div>
<br style="clear: left;" />
  </div>

              
            
!

CSS

              
                
  
  
  #container{
    
    width: 1024px;
    
  }
  
  #slidesleft{
    float: left;
    width:33%;
    height: 100%;
  }
  
    #slidesmiddle {
    
    width:33%;
    float: left;
   
    height: 400px;
    
    
  }
  
   #slidesright{
    float: left;
    width:33%;
    height: 100%;
  }
  
  #coinright{
    width: 106px;
    height: 400px;
    
    float: right;
  }
  #coinleft{
    width: 106px;
    height: 400px;
    
    float: left;
  }
  
#butik {
    position: relative;
    width: 230px;
    height: 45px;
    background-color: #d1d7e0;
    opacity: 0.0;
    margin-top: 182px;
    border-radius: 5px;
    margin-left: 30px;
    
    
    
}
  
#patenter {
    position: relative;
    width: 230px;
    height: 45px;
    background-color: #d1d7e0;
    opacity: 0.0;
    margin-top: 30px;
    border-radius: 5px;
    margin-left: 30px;
    
    
}
  
#funktioner {
    position: relative;
    width: 230px;
    height: 45px;
    background-color: #d1d7e0;
    opacity: 0.0;
    margin-top: 30px;
    border-radius: 5px;
    margin-left: 30px;
    
    
}
  
#sponsor {
    position: relative;
    width: 230px;
    height: 45px;
    background-color: #d1d7e0;
    opacity: 0.0;
    margin-top: 30px;
    border-radius: 5px;
    margin-left: 30px;
    
    
}

  
#godtdesign {
    position: relative;
    width: 230px;
    height: 45px;
    background-color: #d1d7e0;
    opacity: 0.0;
    margin-top: 30px;
    border-radius: 5px;
    margin-right: 30px;
    float: right;
    
  }
    
    #direktesalg {
     position: relative;
    width: 230px;
    height: 45px;
    background-color: #d1d7e0;
    opacity: 0.0;
    margin-top: 330px;
    border-radius: 5px;
    margin-right: 30px;
    float: right;
    }
  
  .coinshadow{
    width: 110px;
    height: 70px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/shadow.svg');
    display: block; 
    
    margin-top: 400px;
    z-index: 0.1;
    
    
  }
  
  
  
  #brick1 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    position: absolute;
    margin-top: 400px;
    margin-left: 8px;
    opacity: 1.0;
    z-index: 0.5;
 
    
    
    
  }
  
   #brick2 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    margin-top: 385px;
    opacity: 1.0;
    z-index:1;
    position: absolute;
    
    
  }
  
  #brick3 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    margin-top: 374px;
    margin-left: 4px;
    opacity: 1.0;
    z-index:2;
    position: absolute;
    
    
  }
  
  #brick4 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
 margin-top: 365px;
    opacity: 1.0;
    z-index:3;
    position: absolute;
    
    
  }
  #brick5 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
  margin-top: 350px;
    opacity: 1.0;
    z-index:4;
    margin-right: 5px;
    position: absolute;
    
    
  }
  #brick6 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
   margin-top: 335px;
    opacity: 1.0;
    z-index:5;
    position: absolute;
    margin-left: 6px;
    
    
  }
  #brick7 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    margin-top: 320px;
    opacity: 1.0;
    z-index:6;
    margin-left: 8px;
    position: absolute;
    
    
  }
  #brick8 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
   margin-top: 305px;
    opacity: 1.0;
    z-index:7;
    position: absolute;
    margin-right: 10px;
    
    
  }
  #brick9 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
  margin-top: 290px;
    opacity: 1.0;
    z-index:8;
    position: absolute;
    margin-right: 5px;
    
    
  }
  #brick10 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
     margin-top: 275px;
    opacity: 1.0;
    z-index:9;
    position: absolute;
    margin-right: 10px;
    
    
  }
  
   #brick11 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    margin-top: 260px;
    opacity: 1.0;
    z-index:10;
    position: absolute;
    
    
  }
  
   #brick12 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    margin-top: 245px;
    opacity: 1.0;
    z-index:11;
    position: absolute;
    margin-right: 7px;
    
    
  }
  
  #brick13 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
   margin-top: 230px;
    margin-left: 4px;
    opacity: 1.0;
    z-index:12;
    position: absolute;
    
    
  }
  
  #brick14 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
  margin-top: 215px;
    opacity: 1.0;
    z-index:13;
    position: absolute;
    
    
  }
  #brick15 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
   margin-top: 200px;
    opacity: 1.0;
    z-index:14;
    margin-right: 5px;
    position: absolute;
    
    
  }
  #brick16 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
   margin-top: 185px;
    opacity: 1.0;
    z-index:15;
    position: absolute;
    
    
  }
  #brick17 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    margin-top: 170px;
    opacity: 1.0;
    z-index:16;
    margin-left: 8px;
    position: absolute;
    
    
  }
  #brick18 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
  margin-top: 155px;
    opacity: 1.0;
    z-index:17;
    position: absolute;
    
    
  }
  #brick19 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    margin-top: 140px;
    opacity: 1.0;
    z-index:18;
    position: absolute;
    
    
  }
  #brick20 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    opacity: 1.0;
    z-index:19;
    position: absolute;
    margin-top: 125px;
    
  }
  
  #rbrick1 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    position: absolute;
    margin-top: 400px;
    margin-left: 4px;
    opacity: 1.0;
    z-index: 0.5;
    
    
    
  }
  
   #rbrick2 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    margin-top: 385px;
    opacity: 1.0;
    z-index:1;
    position: absolute;
    
    
  }
  
  #rbrick3 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    margin-top: 374px;
    margin-left: 4px;
    opacity: 1.0;
    z-index:2;
    position: absolute;
    
    
  }
  
  #rbrick4 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
 margin-top: 365px;
    opacity: 1.0;
    z-index:3;
    position: absolute;
    
    
  }
  #rbrick5 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
  margin-top: 350px;
    opacity: 1.0;
    z-index:4;
    margin-right: 5px;
    position: absolute;
    
    
  }
  #rbrick6 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
   margin-top: 335px;
    opacity: 1.0;
    z-index:5;
    position: absolute;
    margin-left: 6px;
    
    
  }
  #rbrick7 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
    margin-top: 320px;
    opacity: 1.0;
    z-index:6;
    margin-left: 8px;
    position: absolute;
    
    
  }
  #rbrick8 {
    
    width: 97px;
    height: 61px;
    background-image: url('http://shavesociety.dk/wp-content/uploads/2014/09/coin.svg');
    display: block;  
    vertical-align: middle; 
    line-height: 400px; 
    text-align: center;
   margin-top: 305px;
    opacity: 1.0;
    z-index:7;
    position: absolute;
    margin-right: 10px;
    
    
  }
 

              
            
!

JS

              
                
  
var   sponsor = document.getElementById("sponsor"),
      funktioner = document.getElementById("funktioner"),
      patenter = document.getElementById("patenter"),
      butik = document.getElementById("butik"),
      godtdesign = document.getElementById("godtdesign"),
      direktesalg = document.getElementById("direktesalg"); 


      TweenMax.to(godtdesign, 1, {opacity:1.0, delay:1.0});
      TweenMax.to(direktesalg, 1, {opacity:1.0, delay:2.0});
      TweenMax.to(butik, 1, {opacity:1.0, delay: 4.0});
      TweenMax.to(patenter, 1, {opacity:1.0, delay:3.0});
      TweenMax.to(funktioner, 1, {opacity:1.0, delay:2.0});
      TweenMax.to(sponsor, 1, {opacity:1.0, delay:1.0});

      TweenMax.staggerFrom(["#brick1", "#brick2", "#brick3", "#brick4", "#brick5", "#brick6", "#brick7", "#brick8", "#brick9", "#brick10", "#brick11", "#brick12",          "#brick13", "#brick14", "#brick15", "#brick16", "#brick17", "#brick18", "#brick19", "#brick20"], 0.2, { y: -400, opacity: 0},0.2);
  
  TweenMax.staggerFrom(["#rbrick1", "#rbrick2", "#rbrick3", "#rbrick4", "#rbrick5", "#rbrick6", "#rbrick7", "#rbrick8"], 0.2, { y: -400, opacity: 0},0.2);

              
            
!
999px

Console