STA Ver 1.5.1

Default

Just add the data-sta attribute to the element
and you're done with the bottom to top!
In addition, you can easily make the interactive web
with additional dataset settings.

<div data-sta></div>

<ul>
	<li data-sta></li>
	<li data-sta></li>
</ul>

Delay

You can delay animation trigger activation
by adding the data-sta-delay attribute.
The unit is ms.

<div
	data-sta
	data-sta-delay="100">

<div
	data-sta
	data-sta-delay="300">

<div
	data-sta
	data-sta-delay="500">

Duration

You can set the animation time
by adding the data-sta-duration attribute.
The default is 1000 ms.

<div
	data-sta
	data-sta-duration="500">

<div
	data-sta
	data-sta-duration="1500">

<div
	data-sta
	data-sta-duration="5000">

Offset

You can set the trigger point
by adding the data-sta-offset attribute.
1 means 100%.
In other words, the trigger is activated
when the entire element height is exposed.
The default is 0.5 (50%).

<div
	data-sta
	data-sta-offset="0.1">

<div
	data-sta
	data-sta-offset="0.5">

<div
	data-sta
	data-sta-offset="1.5">

Direction

You can set the direction of the animation
by adding the data-sta-direction attribute.
The settings are ttb (top to bottom), ltr (left to right),
and rtl (right to left)
The default is btt (bottom to top).

<div
	data-sta
	data-sta-direction="ttb">

<div data-sta></div>

<div
	data-sta
	data-sta-direction="ltr">

<div
	data-sta
	data-sta-direction="rtl">

Options

These are not required, just optional.

document.querySelectorAll('[data-sta]').STA({
	//Optional
	repeatEffect: true,	//decide whether to repeat the animation (The default is false. This option is not recommended)
	defaultOffset: 0.3	//the trigger is activated when the element height is exposed. It has a lower priority than the individual setting (data-sta-offset).
});

Get Started

Add Markup
```
<div data-sta></div>
```

Add CSS

<!-- Don't add my CDN in your project. I recommend adding it to your CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fe-jw/STA/Ver1.5/sta.min.css">

Add JS

<!-- Don't add my CDN in your project. I recommend adding it to your CDN -->
<script src="https://cdn.jsdelivr.net/gh/fe-jw/STA/Ver1.5/sta.min.js"></script>

Initialize

//You have to initialize after the window load
window.addEventListener('load', function(){
	document.querySelectorAll('[data-sta]').STA();
});

View on GitHub