Animations

Standard Example

Set the data-cue attribute in the target element and specify the animation type.

<img src="1.webp" data-cue="fadeIn" alt="" />
<img src="2.webp" data-cue="fadeIn" alt="" />
<img src="3.webp" data-cue="fadeIn" alt="" />

Parent Wrap

You can wrap it in a parent element by setting the data-cues attribute.

<div data-cues="fadeIn">
  <img src="1.webp" alt="" />
  ...
  <img src="3.webp" alt="" />
</div>

Group Wrap

You can group target elements by setting the data-group attribute. With grouping, when the first element is triggered, the remaining elements are also triggered sequentially, regardless of the scroll amount.

<div data-cues="fadeIn" data-group="images">
  <img src="1.webp" alt="" />
  ...
  <img src="3.webp" alt="" />
</div>

[data-duration]

You can set the showing time of the element. (ms)

<div data-cues="fadeIn" data-duration="2000">
  <img src="1.webp" alt="" />
  <img src="2.webp" data-duration="500" alt="" />
  <img src="3.webp" data-duration="500" alt="" />
</div>

[data-interval]

You can set the showing interval time of the element. (ms)

<div data-cues="fadeIn" data-interval="-200">
  <img src="1.webp" alt="" />
  <img src="2.webp" data-interval="1000" alt="" />
  <img src="3.webp" data-interval="-0.2" alt="" />   <!-- 200ms -->
</div>

[data-delay]

You can set the showing delay time of the element. (ms)

<div data-cues="fadeIn" data-delay="1000">
  <img src="1.webp" alt="" />
  <img src="2.webp" data-delay="2000" alt="" />
  <img src="3.webp" alt="" />
</div>

let name = document.querySelectorAll(‘.anim .hljs-string’); let elm = document.querySelectorAll(‘[data-cue]:not(span)’); let select = document.querySelector(‘select’); let button = document.querySelector(‘input’); function ac(val) { for (let i = 0; i < name.length; i++) { name[i].innerHTML = val; } button.click(); } function reload() { for (let i = 0; i < elm.length; i++) { elm[i].style.animationName = null; elm[i].setAttribute(‘data-cue’, select.value); elm[i].removeAttribute(‘data-show’); } scrollCue.update(); }