htmlparallaxskrollr

what is the meaning of data-300-center-center in data attribute html

I have the following html

<p data-300-center-top="transform: scale(0.8); opacity: 0" 
   data-300-center-center="transform: scale(1); opacity: 1">

Which I use with skrollr.js

I don't understand what or why I use the number 300 for in the attribute data-*-center-center and data-*-center-top.

Solution

  • You can read the docs:

    The syntax is data-[offset]-[anchor], where offset can be any integer (0 is default) and anchor can be either start (default) or end. Either offset or anchor can be omitted in some situations. Here are some examples of key frames and their meaning.

    For example:

    data-bottom-center = data-0-bottom-center: When the element's center is at the bottom of the viewport, thus the upper.

    So in your case:

    data-300-center-top means that element's center is 300px below the top of the viewport.