@teamthunderfoot/translate-on-scroll
Version:
Translate on scroll package
217 lines (215 loc) • 11.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./dist/main.css" />
<title>Translate on scroll - By Thunderfoot</title>
</head>
<body>
<h1 class="title">Translate on scroll - By Thunderfoot</h1>
<section class="mb-5" id="example-1">
<div class="img-wrapper">
<img class="img-translated js--tos" data-tos="-200" data-tos-start="top" data-tos-bg="true" src="https://html.com/wp-content/uploads/flamingo-fallback.jpg" alt="flamingo" />
<div class="front-items">
<h2>Example 1 → HTML attributes</h2>
<ul>
<li>data-tos="-200"</li>
<li>data-tos-start="top"</li>
<li>data-tos-bg="true"</li>
</ul>
<h2>JS Class Configuration options:</h2>
<ul>
<li>elements: document.querySelectorAll("#example-1 .js--tos"),</li>
</ul>
</div>
</div>
<code>
document.querySelectorAll("#example-1 .js--tos").forEach((element) => {<br />
  new TranslateOnScroll({<br />
    element: element,<br />
  });<br />
});<br />
</code>
<div class="separator"></div>
</section>
<section class="mt-5 mb-5" id="example-2">
<div class="img-wrapper">
<img class="img-translated js--tos" data-tos="400" data-tos-start="center" data-tos-bg="true" src="https://html.com/wp-content/uploads/flamingo-fallback.jpg" alt="flamingo" />
<div class="front-items">
<h2>Example 2 → HTML attributes:</h2>
<ul>
<li>data-tos="400"</li>
<li>data-tos-start="center"</li>
<li>data-tos-bg="true"</li>
</ul>
<h2>JS Class Configuration options:</h2>
<ul>
<li>elements: document.querySelectorAll("#example-2 .js--tos"),</li>
<li>defaultStart: "70%"</li>
<li>breakpoint: 1024</li>
<li>breakpointMod: 0.1 → from 1024px, the displacement will be a 10% of the "data-tos" value</li>
</ul>
</div>
</div>
<code>
document.querySelectorAll("#example-2 .js--tos").forEach((element) => {<br />
  new TranslateOnScroll({<br />
    element: element,<br />
    defaultStart: "70%",<br />
    breakpoint: 1024,<br />
    breakpointMod: 0.1,<br />
  });<br />
});<br />
</code>
<div class="separator"></div>
</section>
<section class="mt-5 mb-5" id="example-2">
<div class="img-wrapper">
<div class="g--video-01" id="video-01">
<video class="g--video-01__media js--tos" data-tos="200" data-tos-start="top" data-tos-bg="true" poster="src/assets/video/video-01.jpg" autoplay muted loop playsinline>
<source src="src/assets/video/video-placeholder.mp4" type="video/mp4" />
</video>
</div>
<div class="front-items">
<h2>Example 2 with video → HTML attributes:</h2>
<ul>
<li>data-tos="200"</li>
<li>data-tos-start="top"</li>
<li>data-tos-bg="true"</li>
</ul>
<h2>JS Class Configuration options:</h2>
<ul>
<li>elements: document.querySelectorAll("#example-2 .js--tos"),</li>
<li>defaultStart: "70%"</li>
<li>breakpoint: 1024</li>
<li>breakpointMod: 0.1 → from 1024px, the displacement will be a 10% of the "data-tos" value</li>
</ul>
</div>
</div>
<code>
document.querySelectorAll("#example-2 .js--tos").forEach((element) => {<br />
  new TranslateOnScroll({<br />
    element: element,<br />
    defaultStart: "70%",<br />
    breakpoint: 1024,<br />
    breakpointMod: 0.1,<br />
  });<br />
});<br />
</code>
<div class="separator"></div>
</section>
<section class="mt-5 mb-5" id="example-3">
<div class="img-wrapper">
<img class="img-translated js--tos" data-tos="-200" data-tos-start="bottom" data-tos-bg="true" src="https://html.com/wp-content/uploads/flamingo-fallback.jpg" alt="flamingo" />
<div class="front-items">
<h2>Example 3 → HTML attributes:</h2>
<ul>
<li>data-tos="-200"</li>
<li>data-tos-start="bottom"</li>
<li>data-tos-bg="true"</li>
</ul>
<h2>JS Class Configuration options:</h2>
<ul>
<li>elements: document.querySelectorAll("#example-3 .js--tos"),</li>
</ul>
</div>
</div>
<code>
document.querySelectorAll("#example-3 .js--tos").forEach((element) => {<br />
  new TranslateOnScroll({<br />
    element: element,<br />
  });<br />
});<br />
</code>
<div class="separator"></div>
</section>
<section class="section-a" id="example-4">
<h2>Example 4 → HTML attributes:</h2>
<ul>
<li>data-tos="-100" / data-tos="50" / data-tos="-50"</li>
<li>data-tos-start="bottom"</li>
<li>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</li>
</ul>
<h2>JS Class Configuration options:</h2>
<ul>
<li>element: document.querySelectorAll("#example-4 .js--tos")</li>
<li>breakpoint: 680</li>
<li>breakpointMod: 0.5 → from 680px, the displacement will be a 50% of the "data-tos" value</li>
</ul>
<code>
document.querySelectorAll("#example-4 .js--tos").forEach((element) => {<br />
  new TranslateOnScroll({<br />
    element: element,<br />
    breakpoint: 680,<br />
    breakpointMod: 0.5,<br />
  });<br />
});<br />
</code>
<div class="svg-wrapper">
<svg class="js--tos" data-tos="-100" data-tos-start="bottom" data-tos-movement="from" width="100" height="100">
<circle cx="50" cy="50" r="40" id="eli" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg class="js--tos" data-tos="50" data-tos-start="bottom" data-tos-movement="from" width="100" height="100">
<circle cx="50" cy="50" r="40" id="eli" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg class="js--tos" data-tos="-50" data-tos-start="bottom" data-tos-movement="from" width="100" height="100">
<circle cx="50" cy="50" r="40" id="eli" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
</section>
<div class="separator"></div>
<section class="section-a" id="example-4">
<h2>Example 5 → HTML attributes:</h2>
<ul>
<li>data-tos="-100" / data-tos="50" / data-tos="-50"</li>
<li>data-tos-start="bottom"</li>
</ul>
<h2>JS Class Configuration options:</h2>
<ul>
<li>elements: document.querySelectorAll("#example-5 .js--tos")</li>
<li>breakpoint: 680</li>
<li>breakpointMod: 0.5 → from 680px, the displacement will be a 50% of the "data-tos" value</li>
</ul>
<code>
document.querySelectorAll("#example-4 .js--tos").forEach((element) => {<br />
  new TranslateOnScroll({<br />
    element: element,<br />
    breakpoint: 680,<br />
    breakpointMod: 0.5,<br />
  });<br />
});<br />
</code>
<div class="svg-wrapper">
<svg class="js--tos" data-tos="-200" data-tos-start="bottom" width="100" height="100">
<circle cx="50" cy="50" r="40" id="eli" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg class="js--tos" data-tos="50" data-tos-start="bottom" width="100" height="100">
<circle cx="50" cy="50" r="40" id="eli" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg class="js--tos" data-tos="-100" data-tos-start="bottom" width="100" height="100">
<circle cx="50" cy="50" r="40" id="eli" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
</section>
<script src="./dist/main.js"></script>
</body>
</html>