Translate on scroll - By Thunderfoot

flamingo

Example 1 → HTML attributes

data-tos="-200"
data-tos-start="top"
data-tos-bg="true"

JS Class Configuration options:

elements: document.querySelectorAll("#example-1 .js--tos"),


                document.querySelectorAll("#example-1 .js--tos").forEach((element) => {

                  new TranslateOnScroll({

                    element: element,

                  });

                });

flamingo

Example 2 → HTML attributes:

data-tos="400"
data-tos-start="center"
data-tos-bg="true"

JS Class Configuration options:

elements: document.querySelectorAll("#example-2 .js--tos"),
defaultStart: "70%"
breakpoint: 1024
breakpointMod: 0.1 → from 1024px, the displacement will be a 10% of the "data-tos" value


                document.querySelectorAll("#example-2 .js--tos").forEach((element) => {

                  new TranslateOnScroll({

                    element: element,

                    defaultStart: "70%",

                    breakpoint: 1024,

                    breakpointMod: 0.1,

                  });

                });

Example 2 with video → HTML attributes:

data-tos="200"
data-tos-start="top"
data-tos-bg="true"

JS Class Configuration options:

elements: document.querySelectorAll("#example-2 .js--tos"),
defaultStart: "70%"
breakpoint: 1024
breakpointMod: 0.1 → from 1024px, the displacement will be a 10% of the "data-tos" value


                document.querySelectorAll("#example-2 .js--tos").forEach((element) => {

                  new TranslateOnScroll({

                    element: element,

                    defaultStart: "70%",

                    breakpoint: 1024,

                    breakpointMod: 0.1,

                  });

                });

flamingo

Example 3 → HTML attributes:

data-tos="-200"
data-tos-start="bottom"
data-tos-bg="true"

JS Class Configuration options:

elements: document.querySelectorAll("#example-3 .js--tos"),


                document.querySelectorAll("#example-3 .js--tos").forEach((element) => {

                  new TranslateOnScroll({

                    element: element,

                  });

                });

Example 4 → HTML attributes:

data-tos="-100" / data-tos="50" / data-tos="-50"
data-tos-start="bottom"
data-tos-movement="from" → the animation starts from the displacement pixels and moves to its original position when the user reaches the center of the screen

JS Class Configuration options:

element: document.querySelectorAll("#example-4 .js--tos")
breakpoint: 680
breakpointMod: 0.5 → from 680px, the displacement will be a 50% of the "data-tos" value


                document.querySelectorAll("#example-4 .js--tos").forEach((element) => {

                  new TranslateOnScroll({

                    element: element,

                    breakpoint: 680,

                    breakpointMod: 0.5,

                  });

                });

Example 5 → HTML attributes:

data-tos="-100" / data-tos="50" / data-tos="-50"
data-tos-start="bottom"

JS Class Configuration options:

elements: document.querySelectorAll("#example-5 .js--tos")
breakpoint: 680
breakpointMod: 0.5 → from 680px, the displacement will be a 50% of the "data-tos" value


                document.querySelectorAll("#example-4 .js--tos").forEach((element) => {

                  new TranslateOnScroll({

                    element: element,

                    breakpoint: 680,

                    breakpointMod: 0.5,

                  });

                });