jQuery serialeffect is shared for inspirational and development purpose, it has to be considered as a prototype due to several remaining bugs. Also, many optimizations have been implemented to improve performance (debounce event, requestAnimationFrame, check FPS, etc.), however, a lag effect can appears depending on the CPU/GPU performance. When the FPS are too low, jQuery serialeffect will automatically switch to words animation instead of letters.
See the project page for a demonstration. The plugin can be also seen on meunierkevin.com.
jQuery serialeffect is highly performance-consuming if used on the whole page. In order to maintain performance to an acceptable level, either limit the content on your page, or specify only a few elements. Note that the animation effect is disabled on all mobile devices due to poor rendering management with the touch event.
Tested in: IE, Edge, Chrome, Firefox, and Safari.
Download and save one of two available files to include serialeffect to your page, either the development or the minified version. Also, you can visit the project page to copy what you need.
<script src="jquery-serialeffect.min.js"></script>
<link href="jquery.serialeffect.css" rel="stylesheet">Due to the lightweight CSS code, it's recommended to copy/paste the CSS code into your general stylesheet.
Make sure jQuery is properly loaded before using jQuery serialeffect.
The basic usage of serialeffect is pretty easy, just start using jQuery serialeffect by calling it after page load. You don't have to specify your elements exactly, jQuery serialeffect will find them autonomously based on 'elementsTags' settings ('div, p, li, h1, img, span, a, g' by default).
$(document).ready(function(){
// jquery.serialeffect initialisation
$.serialeffect();
});Make sure that your page is splitted by section (or any other selectors defined from 'sectionsSelector'). Dividing by sections is needed to improve performance.
<section>
// Your content here
</section>In case you want to bind additional elements, you can do it by adding the element class and the element type. In the example below, the IMG will be identified autonomously by serialeffect, and the parent DIV will also be animated on scroll to create an parallax effect.
<div class="js-serialeffect is-visual"><img src="" alt=""></div>Additionally, the 'maxGap' (see the parameters below can be set per element to increase or decrease the gap effect.
<div class="js-serialeffect is-visual" data-serialeffect-max="50"><img src="" alt=""></div>The following configurations is available by default:
| Name | Type | Default | Description |
|---|---|---|---|
| autoDetection | boolean | true | Find all elligible elements based on elementsTags |
| sectionsSelector | string | 'section' | Store elligible elements by sections (in viewport detection) |
| elementsClass | string | js-serialeffect | Add extra elements in the HTML |
| ignoreClass | string | js-serialeffect-ignore | Ignore manully any elements from the elementsTags |
| elementsTags | string | 'div, p, li, h1, img, span, a, g' | Elligble elements when autoDetection is set to true |
| maxGap | integer | 200 | Max distance between the original position and the animated position |
| callback | boolean | false | Function called on scroll (after event deboucing) |
Please report bugs and feel free to ask for new features directly on GitHub.
jQuery serialeffect is licensed under MIT license.