Animate Characters In Text Blocks While Scrolling - serialeffect

serialeffect is a high-performance text animation jQuery plugin that allows you to animate characters within the text blocks while they are being scrolled.

The plugin uses various CSS3 techniques (CSS3 transitions and transforms) combined to build on this effect. Not only text, the plugin allows you to apply the subtle scroll animation to any block elements like images.

How to use it:

1. Include jQuery library and the serialeffect plugin's files on the page.

<link rel="stylesheet" href="dist/jquery.serialeffect.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="dist/jquery.serialeffect.min.js"></script>

2. Initialize the plugin on document ready.

$(document).ready(function(){
  $.serialeffect();
});

3. By default, this plugin will apply the scroll-triggered animation to all specified elements contained within the section container. You can override the default wrapper and element selectors as follows:

$.serialeffect({
  sectionsSelector: 'section',
  elementsSelector: 'div, p, li, h1, img, span, a, g',
});

4. You can also ignore specified elements using the js-serialeffect-ignore class.

<section>
  <p>Text To Animation</p>
  <img src="image-to-ignore.jpg" class="js-serialeffect-ignore" />
</section>

$.serialeffect({
  ignoreClass: 'js-serialeffect-ignore',
});

5. Change the default CSS class applied to the target element while being animated.

$.serialeffect({
  elementsClass: 'js-serialeffect',
});

6. Set the max gap in pixels. Default: 200.

$.serialeffect({
  maxGap: 500,
});

7. Feel free to override & modify the default CSS to create your own animations.

.js-serialeffect {
  display: inline-block;
  transition: transform 300ms;
  transition-timing-function: cubic-bezier(0, 0.6, 0.6, 1);
  will-change: transform;
}

Changelog:

2022-04-06

• Add aria-label tags

---

This awesome jQuery plugin is developed by kevinmeunier. For more Advanced Usages, please check the demo page or visit the official website.