While developing my personal website, I came accross this amazing library, Blotter.js, which exposes several methods (materials) that apply various effect on texts.
ChannelSplitMaterial is one of those effects that piqued my interest.
The idea behind this effect is simple, just split up the red, green and blue pixels and place them in different location from the original one. And that's just what we are going to do!
But first, lets see what the final result looks like
Lets start with the HTML
#wrapper element just holds the affected element, the
#text div. The
#text div holds the text that we are going to apply the RGB effect to.
Now, we need to create a function that takes one argument, the HTML element to be affected. Lets call this function
channelSplit will take the innerHTML of the element passed as the first argument and clone it 3 times, one for each primary color (red, green and blue).
As you can see, we are placing a
.channel-split-static span inside the initial element.
.channel-split-static has zero opacity and its use is to preserve the initial dimentions of the text holder element.
Summarizing the functionality of the
- Takes one argument, the text holder element
- Clones the innerHTML of the text holder and appends 3
.channel-splitelements, one for each primary color (red, green, blue)
- Places one
.channel-split-staticspan with zero opacity
Now, all we have to do is to apply some css in order to achieve the desired effect.
In order to stack each of the three
.channel-split elements one above the other, we set their
position property value to
Another important change we need to make, is to set
mix-blend-mode: difference to the
.channel-split elements in order to blend their colors. If we don't apply this rule, the final result will display the font color of the elemnt stacked on top of all.
Here are the main css rules that help us achieve the rgb split effect
Finally, we are going to apply some animation in order to separately move each of the
.channel-split elements away from each other in order to illustrate the effect.
And that's it!
Thanks for reading this post and I hope you liked it!