<script src="TweenLite.min.js"></script>
<script src="CSSPlugin.min.js"></script>
<script src="jquery.min.js"></script>
<script src="parallax_content.js"></script>

Set HTML

<div class="parallax-title">
    Parallax title
</div>

Call the plugin

<script type="text/javascript">
    $(document).ready(function() {
      $('.parallax-title').parallaxContent();
    });
</script>

In result

<html>
  <head>
  <title>My website</title>
  </head>
  <body>

  <div class="parallax-title">
    Parallax title
  </div>

  <script src="TweenLite.min.js"></script>
  <script src="CSSPlugin.min.js"></script>
  <script src="jquery.min.js"></script>
  <script src="parallax_content.js"></script>

  <script type="text/javascript">
     $(document).ready(function() {
         $('.parallax-title').parallaxContent();
     });
  </script>

  </body>
</html>

Data Attribute Settings

In parallaxContent you can add settings using the data-parallax-content attribute. You still need to call $(element).parallaxContent() to initialize parallaxContent on the element.

Example:

<div data-parallax-content='{"shift": 10, "duration": 4}'></div>

Settings

Option	Type	Default
shift	int	10
duration	int	1.5
events	array	['scroll', 'gyro']
gyroSensitivity	int	30

Browser support

Chrome
Firefox
Opera
IE10/11

Dependencies

jQuery 1.7
Gsap

Keywords

FAQs

What is parallax_content?

Is parallax_content popular?

Is parallax_content well maintained?

Last updated on 24 Jul 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

parallax_content

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}[1.0.7] - 2018-7-24

Added