Animated headlines with interchangeable words that replace one another through CSS transitions.
see https://vianetz.github.io/animated-headlines-vanilla/
npm install https://github.com/vianetz/animated-headlines-vanilla/bower install https://github.com/vianetz/animated-headlines-vanilla/Include the css in your head.
<link rel="stylesheet" src="dist/css/animated-headline.css">Use the following markup.
<section class="animated-headline">
<h1>
My favorite food is
<span class="ah-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section>Finally, initialize the plugin.
<script src="dist/js/animated-headline.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => AnimatedHeadline('.ah-words-wrapper'));
</script>The plugin provides multiple options to customize the animation type and delay.
<script>
document.addEventListener('DOMContentLoaded', () =>
AnimatedHeadline('.ah-words-wrapper', {
animationType: 'type',
animationDelay: 1500,
})
);
</script>It is recommended to use the default delay options. Because of this, I won't list them below. See src/js/animated-headline.js for a complete list of options.
| Name | Type | Default | Description |
|---|---|---|---|
| animation-type | string | rotate-1 | Type of animation used. Options:
|
Animated Headlines is open-sourced software licensed under the MIT license.
