Tobias Ahlin has published a set of cool text effects called Moving Letters. He shares the HTML, CSS and JS needed to add these effects to a plain HTML page. But what about adding them into Divi? Here's (some initial thoughts) on how to do it.
If you hover over any of the effects you'll see a small "source" link appear at the bottom of the effect. Click this and you'll see the HTML, CSS and JS for that effect.
One way to add these bits of code into Divi is using the built-in Divi "Code" module. For each effect, I suggest using three code modules – one for each type of code.
Taking the first effect "Thursday" as an example, you'd put the following into each of three code modules. I've made some modifications to each block of code, which I'll discuss below.
HTML
<h1 class="ml1">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">THURSDAY</span>
<span class="line line2"></span>
</span>
</h1>One thing I have done is move the "script" tag into the JavaScript block (below). While technically it's a HTML tag, it's purpose is to load a JavaScript file, which we only want to do once, rather than everywhere we add the HTML code module.
CSS
<style>
.ml1 {
font-weight: 900 !important;
font-size: 3.5em !important;
}
.ml1 .letter {
display: inline-block !important;
line-height: 1em !important;
}
.ml1 .text-wrapper {
position: relative !important;
display: inline-block !important;
padding-top: 0.1em !important;
padding-right: 0.05em !important;
padding-bottom: 0.15em !important;
}
.ml1 .line {
opacity: 0 !important;
position: absolute !important;
left: 0 !important;
height: 3px !important;
width: 100% !important;
background-color: #fff !important;
transform-origin: 0 0 !important;
}
.ml1 .line1 { top: 0 !important; }
.ml1 .line2 { bottom: 0 !important; }
</style>JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
jQuery(function($){
// Wrap every letter in a span
$('.ml1 .letters').each(function(){
$(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});
anime.timeline({loop: true})
.add({
targets: '.ml1 .letter',
scale: [0.3,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 600,
delay: function(el, i) {
return 70 * (i+1)
}
}).add({
targets: '.ml1 .line',
scaleX: [0,1],
opacity: [0.5,1],
easing: "easeOutExpo",
duration: 700,
offset: '-=875',
delay: function(el, i, l) {
return 80 * (l - i);
}
}).add({
targets: '.ml1',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
});
</script>Dealing with Formatting Issues
The above is just a start and should help you get the Moving Letters effects working in Divi. However, it's quite likely that you'll still have some formatting issues to contend with.
For example, in the effect I gave as an example, the text "THURSDAY" is added as a H1 tag. Unfortunately, Divi applies additional styles to the H1 tag which are not set / overridden by the Moving Letters CSS.
If you're familiar with CSS, it should be a relatively simple task to fix up this formatting on whichever effect you choose to use (if you do, please share it in the comments!).
If you're not familiar with CSS please let me know which Moving Letters effect you're using, and share a link to your page if possible, and I'll try to help out with fixing up the formatting.
Wow, I've been reading articles for days to learn how to implement these cool codes we found on the Net on Divi.
This article was my salvation.
Thank you very very very much! <3
You're very welcome, Alessandra!