Parallax in Creator Studio

Multiple Creator Studio Experiences can be published onto a single page to create a parallax scrolling effect. Here is a quick video that shows parallax in action, as well as a few live examples that you can review:

Example One
Example Two
Example Three

In short, this all comes together by creating several Experiences in Creator Studio, and then combining them using a set of code that we have designed below. Feel free to try building a parallax page using this code yourself, but if you have any questions on how this comes together - or if you need to lean on our Design Services team to help create this content - please contact support@getfastr.com

This code can be adjusted to your liking to fit the parallax design that you are looking for. Be advised though, we suggest having some working knowledge of HTML/CSS in order to edit this properly.

Parallax Code for Enhanced Code Experiences:

<style>
  .sticky-wrapper-top {
      top: 0px !important;
      overflow:hidden !important;
      position:sticky !important;
      position: -webkit-sticky !important;
      position: -moz-sticky !important;
      position: -ms-sticky !important;
      position: -o-sticky !important;
      -webkit-overflow-scrolling: touch !important;
  }
  .sticky-wrapper {
    position:sticky !important;
    position: -webkit-sticky !important;
    position: -moz-sticky !important;
    position: -ms-sticky !important;
    position: -o-sticky !important;
    -webkit-overflow-scrolling: touch;
    overflow:hidden;
  }
  .page-container {
      overflow: inherit !important;
      transform: none;
  }
  .page {
     padding: 0 !important;
     margin: 0 auto !important;
  }
  .page-width {
     padding: 0 !important;
     margin: 0 auto !important;
  }
</style>
<div>
<div id="zmags-container-1">
<div class="sticky-wrapper-top">
INSERT ENHANCED CODE HERE
</div>
<div class="sticky-wrapper-top">
INSERT ENHANCED CODE HERE
</div>
<div class="sticky-wrapper-top">
INSERT ENHANCED CODE HERE
</div>
INSERT ENHANCED CODE HERE
</div>
</div>

Parallax Code for Legacy Code Experiences:

Note: Experience IDs can be found in the top right corner of Creator Studio's Editor under the "Experience Settings" tab. Company IDs can be found within the code that you copy from the Editor (by clicking on the "Copy Code" button) to publish an Experience.

<link rel="stylesheet" type="text/css" href="//c.zmags.com/static/styles.css" />
<style>
  .sticky-wrapper-top {
      top: 0px !important;
      overflow:hidden !important;
      position:sticky !important;
      position: -webkit-sticky !important;
      position: -moz-sticky !important;
      position: -ms-sticky !important;
      position: -o-sticky !important;
      -webkit-overflow-scrolling: touch !important;
  }
  .sticky-wrapper {
    position:sticky !important;
    position: -webkit-sticky !important;
    position: -moz-sticky !important;
    position: -ms-sticky !important;
    position: -o-sticky !important;
    -webkit-overflow-scrolling: touch;
    overflow:hidden;
  }
  .page-container {
      overflow: inherit !important;
      transform: none;
  }
  .page {
     padding: 0 !important;
     margin: 0 auto !important;
  }
  .page-width {
     padding: 0 !important;
     margin: 0 auto !important;
  }
</style>
<div>
<div id="zmags-container-1">
<div class="sticky-wrapper-top">
<div class="zmags-viewer-container" data-experience="INSERT_EXPERIENCE_ID_HERE" data-company="INSERT_COMPANY_ID_HERE" data-speed="1"></div>
</div>
<div class="sticky-wrapper-top">
<div class="zmags-viewer-container" data-experience="INSERT_EXPERIENCE_ID_HERE" data-company="INSERT_COMPANY_ID_HERE" data-speed="1"></div>
</div>
<div class="sticky-wrapper-top">
<div class="zmags-viewer-container" data-experience="INSERT_EXPERIENCE_ID_HERE" data-company="INSERT_COMPANY_ID_HERE" data-speed="1"></div>
</div>
<div class="zmags-viewer-container" data-experience="INSERT_EXPERIENCE_ID_HERE" data-company="INSERT_COMPANY_ID_HERE" data-speed="1"></div>
</div>
</div>
<script defer type="text/javascript" src="//c.zmags.com/static/wrapper.js"></script>
<script defer type="text/javascript" src="//c.zmags.com/static/manifest.js"></script>
<script defer type="text/javascript" src="//c.zmags.com/static/vendor.js"></script>
<script defer type="text/javascript" src="//c.zmags.com/static/client.js"></script>