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
The #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
. 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 channelSplit
function:
- Takes one argument, the text holder element
- Clones the innerHTML of the text holder and appends 3
.channel-split
elements, one for each primary color (red, green, blue) - Places one
.channel-split-static
span with zero opacity
We are now done with Javascript 😁!
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 absolute
.
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!
Top comments (4)
Great work, a small inconsistency I noticed in the effect on the hero image at the top and your code. The hero image uses
mix-blend-mode: screen
which means that red, green and blue add up to white, while you usedifference
which gets a tint based on the background color.Very interesting. Thanks for sharing.
You can skip Javascript if you want to do it with CSS only, you can use before & after pseudo-classes. Check it out here jsfiddle.net/kinduff/r70ve5bd/1/
Thanks Alejandro! Very interesting approach!
Hate to break the 21st like but this is awesome, thanks