Skip to content

Tips (v2.x)

Jump to bottom
Julian Lloyd edited this page Aug 6, 2018 · 3 revisions

Don’t Forget The Doctype

Since we’re using data- attributes, we want to specify an HTML5 doctype before our opening html tag. Without this, you may experience odd behavior (#169).

<!DOCTYPE html>
<html>
  <body></body>
</html>

Making Sure Your Elements Load Hidden

The nature of JavaScript, is that it runs after the request payload has returned… and often, after the browser has already begun rendering content. This means, your elements may be visible momentarily before scrollReveal can run and apply the initial styles.

The Solution

<!DOCTYPE html>
<html>
  <head>
    <style>
      [data-sr] {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div data-sr> I will load hidden! </div>
  </body>
</html>

Note: It’s important to emphasize that [data-sr] { visibility: hidden; } should be at the top of your document, NOT inside a CSS file. Otherwise, your elements may still be visible momentarily while your site loads.

Add Perspective to 3D Rotations

ScrollReveal supports 3d rotations; they work out of the box, but you may want to emphasize the 3d effect by applying a perspective property on a containing element.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        perspective: 1000px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div data-sr="spin 60deg, roll 10deg"> Weeeee! </div>
      <div data-sr="spin 45deg, roll 10deg"> Waahoo! </div>
      <div data-sr="spin 30deg, roll 10deg"> Yippie! </div>
    </div>
  </body>
</html>

📚 Docs

v3.x (2016)

v2.x (2015)

Clone this wiki locally