Sliding Horizontal Parallax

Sliding Horizontal Parallax Theme

Sliding Horizontal Parallax moves multiple elements at the same time but at different speeds to create a parallax effect — the appearance of 3D movement.

  • Touch Support

    Touch Support

    Touch swiping and tapping supported to allow for navigation between frames.

  • Cross Browser

    Cross Browser

    Works across all modern browsers, with a fallback theme in Internet Explorer 7, 8 and 9.

  • Easily Modified

    Easily Modified

    All Sequence themes can be easily modified using just HTML and CSS. This theme also includes a SASS file.

Quick Installation

  1. Download the Sliding Horizontal Parallax theme which includes sequence.js
  2. Unzip and move the sliding-horizontal-parallax folder to the same directory as the page you'd like the theme to appear on
  3. Add this themes stylesheet within the <head></head> tags on your page, below existing stylesheets: 
    <link rel="stylesheet" href="sliding-horizontal-parallax/css/sequencejs-theme.sliding-horizontal-parallax.css" />
  4. Add a reference to jQuery 1.9.1, sequence.js and this themes custom options within the <head></head> tags on your page: 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="sliding-horizontal-parallax/scripts/jquery.sequence-min.js"></script>
<script src="sliding-horizontal-parallax/sequencejs-options.sliding-horizontal-parallax.js"></script>
  5. From index.html in the downloaded theme, copy everything inside the <body></body> tags, then paste into the page you'd like the theme to appear on
  6. Save your file and upload newly added/modified files to your web server. You're done!