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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <!-- DOLLY BASIC STRUCTURE -->

<!-- 01 - Navigation (optional) - needs class "dolly-navigation" -->
<header class="header dolly-navigation">
    <h1 data-anchor="layer1" class="logo dolly-font dolly-anchor">dolly</h1>
    <nav class="nav">
      <ul>
        <!-- 01b - Anchors  - needs class "dolly-anchor" and data-anchor with value of the anchor layer's id -->
        <li><button data-anchor="layer1" class="dolly-anchor">Layer 1</button></li>
        <li><button data-anchor="layer2" class="dolly-anchor">Layer 2</button></li>
        <li><button data-anchor="examples" class="dolly-anchor">More examples</button></li>
        <li><a href="https://www.dinoballiana.com/dolly/download/dolly_alpha_v01.zip" class="btn download-btn bold">download</a></li>
      </ul>
    </nav>
  </header>

<!-- 02 - Container - needs class "dolly-container" -->
<div id="dolly-container" class="dolly-container">
  <!-- 03 - Wrapper - needs class "dolly-wrap" -->
  <div class="dolly-wrap">
    <!-- 04 - Layers - needs class "dolly-layer" -->
    <section id="layer1" class="dolly-layer">
      <div class="logo-wrap">
        <h1 class="dolly-font">dolly</h1>
        <h2 class="bold claim">3D scroll easy!</h2>
      </div>
      
      <p class="bold">Full-page scroll</p>
      <span>&darr;</span>
    </section>
    <section id="layer2" class="dolly-layer"><h3 class="bold">Layer 2</h3></section>
    <section id="examples" class="dolly-layer examples">
        <h3 class="text-big bold">Examples</h3>
        <div class="examples-wrap">
          <article class="example">
            <h4><a class="text-medium bold" target="_blank" href="https://codepen.io/dinoBalliana/full/wvGVVOr">Website</a></h4>
          </article>
          <article class="example">
            <h4><a class="text-medium bold" target="_blank" href="https://codepen.io/dinoBalliana/full/jOrOGOY">Basic usage</a></h4>
          </article>
          <article class="example">
            <h4><a class="text-medium bold" target="_blank" href="https://codepen.io/dinoBalliana/full/e8680626640cc0c6e9ae81bb0a90d57f">Complete usage</a></h4>
          </article>
          <article class="example more">
            <h4><a class="text-medium bold" href="javascript:void(0);">More to come!</a></h4>
          </article>
        </div>
    </section>
  </div>
</div>
<p class="link bold">Visit <a target="_blank" href="https://www.dinoballiana.com/dolly">dinoballiana.com/dolly</a></p>

<script src="https://www.dinoballiana.com/dolly/src/js/dolly.min.js"></script>
              
            
!

CSS

              
                /* !! IMPORT dolly.min.css !! */

/* the code below it's only for the demo */

/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}
ul[class],
ol[class] {
  padding: 0;
}
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img {
  max-width: 100%;
  display: block;
}

article > * + * {
  margin-top: 1em;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
button {
  border: none;
  box-shadow: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}

// mixin

@mixin bp-max($point) {
	@media (max-width: $point) {
		@content;
	}
}

@mixin bp-maxh($point) {
	@media (max-height: $point) {
		@content;
	}
}

/* BREAKPOINTS */

$tabletW: 1200px;
$mobileW: 991px;
$minMobileW: 778px;

/* COLORS */

$selection: #ff7474;
$primaryColor: white;
$secondaryColor: black;
$tertiaryColor: #ff7474;

::-moz-selection { background: $selection; }
::selection { background: $selection; }


/* TEXTS */

$mainFont: 'Palanquin';
$bolderFont: 'Palanquin Dark';
$dollyFont: 'Righteous';

.bold{
  font-family: $bolderFont,sans-serif;
}

.dolly-font{
  font-family: $dollyFont,sans-serif;
}

body,html{
  font-family: $mainFont,sans-serif;
  background-color: $primaryColor;
}

$text-small: 18px;
$text-medium: 30px;
$text-big: 8vw;



/* BUTTONS */

.btn{
  padding:5px 25px;
  border-radius: 30px;
  text-decoration: none;
  margin:10px;
  display: block;
  color:$primaryColor;
  background-color: $tertiaryColor;
  &:hover{
    background-color: $primaryColor;
    color:$tertiaryColor;
  }
}

/* HEADER */

.header{
  padding:10px 30px;
  position:fixed;
  width:100%;
  left:0;
  top:0;
  height: auto;
  z-index:99999;
  display:flex;
  justify-content: space-between;
  align-items: center;
  @include bp-max($minMobileW){
    padding:0px 20px;
  }
  .nav{
    button,a{
      text-decoration: none;
      margin-left:20px;
      color:$primaryColor;
    }
    .btn{
      color:$primaryColor;
      &:hover{
        background-color: $primaryColor;
        color:$tertiaryColor;
      }
    }
    .dolly-anchor{
      &.active-anchor{
        color:$tertiaryColor;
      }
    }
  }
  .logo{
    font-size:50px;
    color:$tertiaryColor;
    cursor: pointer;
    z-index: 99999;
    position: relative;
    @include bp-max($minMobileW){
      font-size:40px;
    }
  }

}

.link{
  font-size:18px;
  position:fixed;
  bottom:15px;
  right:15px;
  color:$primaryColor;
  a{
    text-decoration:none;
    color:$tertiaryColor;
  }
}


  /* LAYERS */

.dolly-layer{
  display:flex;
  align-items:center;
  justify-content:center;
  h1,h3{
    font-size:8vw;
    line-height: 8vw;
  }
  .logo-wrap{
    position:relative;
    text-align:center;
    h1{
      font-size: 10vw;
      line-height: 11vw;
    }
    .claim{
      position: absolute;
      font-size: 1.8vw;
      color: white;
      bottom: -13px;
      width:100%;
    }
    margin-bottom:20px;
  }
  p{
    font-size:40px;
    background-color:$tertiaryColor;
    padding:10px;
    line-height: 50px;
  }
  span{
    color:$primaryColor;
    font-size:30px;
  }
  color:$primaryColor;
  &:nth-child(1){
    background-color:#FFAB00;
    
  }
  &:nth-child(2){
    background-color:#00BFA5;
  }
  &:nth-child(3){
    background-color:#304FFE;
  }
}

.text-medium{
  font-size: $text-medium;
  @include bp-max($mobileW){
    font-size: 25px;
    line-height: 25px;
  }
}

.examples{
  .text-medium{
    color:$primaryColor;
  }
  .examples-wrap{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    width:90%;
    height:65vh;
    margin-top:30px;
    @include bp-max($mobileW){
      flex-direction: column;
    }
    .example{
      width:30%;
      height:30vh;
      margin:0 2% 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border:8px dashed $tertiaryColor;
      a{
        text-decoration: none;
        &:hover{
          color:$tertiaryColor;
        }
      }
      @include bp-max($mobileW){
        width:100%;
        padding:15px 10px;
        height: auto;
        margin:0 0% 2% 0%;
      }
      &.more{
        width:94%;
      }
    }
  }
}



              
            
!

JS

              
                /* You can download the plugin here: dinoballiana.com/dolly

 !!! dolly.js is in alpha version so for any issue or question please drop me a line: dinoballiana.com !!! */

(function(){
  'use strict';

  function init(){
    
    /* INIT DOLLY */

    let dolly = new Dolly(document.getElementById('dolly-container'),{
      ease:0.1,     // animation ease
      perspective: 3000,  // container perspective
      distance: 5000,   // distance between layers
      fullpage: true,  // enable one scroll to move throgh layers
      delay:1500, // if lockScroll its true - set delay betwen each scroll (deafult 1500 ms)
      duration: 800, // animation duration - for anchors and full page transitions (default 800 ms)
      bodyClass: true, // when layer is active add to body a class with the layer's id - ex. 'on-layer1'
      activeMenu: true, // add class "active-anchor" to anchor
      onReady: function(){
       /* CALLED WHEN PLUGIN IS READY */

     },
     onScroll: function(index, scroll,direction,limit){
       /* CALLED DURING SCROLL */
     },
     onChange: function(prev,index,scroll){
       /* CALLED WHEN INDEX CHANGE */

     },
     onResize: function(prev,index,scroll){
       /* CALLED WHEN WINDOW IT'S RESIZED */

     }
   });
    
    /* DOLLY EXTERNAL METHODS

  stopDolly() - disable listener for scroll & anchors
  startDolly() - enable listener for scroll & anchors

  blockScroll(boolean) - enable or disable scroll

  getIndex() - return active INDEX
  getScroll() - return scroll position
  moveToIndex(index,duration) - move app to target index - duration in ms is optional (default 1000) 
  
  */
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    init();
  });

})();

              
            
!
999px

Console