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

              
                <div id="container">
  <img src="https://unsplash.it/1000/1000?random=" />
  <div class="slide one"></div>
</div>
              
            
!

CSS

              
                body{
  background: #ffffa1;
  margin: 0;
  overflow: hidden;
}

#container {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.slide {
  display: block;
  position: absolute;
  height: 200px !important;
  width: 200px !important;
  background: red;
}

              
            
!

JS

              
                // Retrieve container position relative to viewport
var rect = $('#container')[0].getBoundingClientRect();
// Create mouse object to keep track of mouse coordinates
var mouse = {x: 0, y: 0, moved: false};

$("#container").mousemove(function(e) {
  // set moved property to true
  mouse.moved = true;
  // calculate mouse coordinates
  mouse.x = e.clientX - rect.left;
  mouse.y = e.clientY - rect.top;
});
 
// Ticker event will be called on every frame
TweenLite.ticker.addEventListener('tick', function(){
  // if mouse is moved call parallax function
  if (mouse.moved){    
    // parallaxIt takes two parameters
    // first is the target element
    // Second is how much the element should move
    // Movement is relative to height and width of parent, in this case the container
    // insert all your parallax calls here
    // you can insert more parameters to change duration etc for each element
    parallaxIt(".slide", -100);
    parallaxIt("img", -30);
  }
  // set moved property to false on each frame so parallax function won't be called more than once
  mouse.moved = false;
});

// Simplest part, take mouse coordinates and container dimensions and animate elements
function parallaxIt(target, movement) {
  TweenMax.to(target, 0.3, {
    x: (mouse.x - rect.width / 2) / rect.width * movement,
    y: (mouse.y - rect.height / 2) / rect.height * movement
  });
}

// Recaclulate container dimensions on resize and scroll
$(window).on('resize scroll', function(){
  rect = $('#container')[0].getBoundingClientRect();
})
              
            
!
999px

Console