Animated 3D opening type effect for Gridbox plugin Headline

It's time to keep pumping your CSS skills. Today, we're going to share with you one of our tips & tricks and show you how to create an animated 3D opening type effect. We were inspired by the idea from the Codrops tutorial and adapted it for the Joomla website builder Gridbox. So, without any more stalling, here we go!

Only practical tips & tricks! Otherwise, what's the point? So where can you apply the new animated opening type effect!? You're free to use the animated opening type effect anywhere. Apply this effect where customers most often interact with the headline and hover over it. For example, you can add an animated 3D opening type effect when designing the Gridbox System Pages. This could be a Custom 404 page and a Coming soon page or the "Thank you page" in the upcoming Gridbox Store App. Or you can use this 3D effect in the site hero section.

• The animated 3D opening type effect can be applied to the Gridbox plugin Headline

And of course, as always, we have prepared some amazing examples for you. These are not just beautiful pictures for inspiration, these are really practical examples that can be easily applied to any of your Gridbox sites. So get inspired and apply!

Step 1: Copy class suffix

Copy class suffix and paste it in the field "Class Suffix" of the Headline plugin.

animated-heading

Step 2: Copy CSS code

Copy CSS code and paste to the Gridbox Code Editor.

.animated-heading .headline-wrapper > * > span > span:after {
 text-shadow: 16px 0px 16px rgba(0, 0, 0, 0.15);
 color: #ffffff;
}
 
.animated-heading .headline-wrapper > * > span > span {
 display: inline-block;
 position: relative;
 transform-style: preserve-3d;
 perspective: 550px;
 z-index: 1;
 opacity: 1;
 white-space: pre-wrap;
}
 
.animated-heading .headline-wrapper > * > span {
 white-space: normal;
}
 
.animated-heading .headline-wrapper > * > span > span:before,
.animated-heading .headline-wrapper > * > span > span:after {
 position: absolute;
 content: attr(data-letter);
 line-height: inherit;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 2;
 transition: all 0.3s;
}
 
.animated-heading .headline-wrapper > * > span > span:before {
 color: rgba(0, 0, 0, 0.12);
}
 
.animated-heading .headline-wrapper > * > span > span:before,
.animated-heading .headline-wrapper > * > span > span:after {
 transform-origin: var(--origin);
}
 
.animated-heading .headline-wrapper > * > span > span:hover:before {
 transform: var(--hover-before);
}
 
.animated-heading .headline-wrapper > * > span > span:hover:after {
 transform: var(--hover-after);
}

• Background font color can be changed in typography settings of the plugin "Headline".
• Font color can be changed in the third line of CSS code: "color: #ffffff".

Step 3: Copy JavaScript code

Copy JavaScript code and paste to the Gridbox Code Editor.

jQuery(document).on('ready', function(){
 jQuery('.animated-heading .headline-wrapper > *').each(function(){
 if (!this.querySelector('span')) {
 let span = document.createElement('span');
 for (let char of this.textContent.trim()) {
 let el = document.createElement('span'); el.textContent = char;
 span.append(el);
 }
 this.innerHTML = ''; this.append(span);
 }
 });
 jQuery(".animated-heading .headline-wrapper > * > span > span").each(function(){
 this.dataset.letter = this.textContent;
 let value = Math.round(1 - 0.5 + Math.random() * 100), prop = {};
 if (value <= 25 || (value > 50 && value <= 75)) {
 prop.origin = value <= 25 ? '0 50%' : '100% 50%';
 prop['hover-before'] = value <= 25 ? 'scale(0.85, 1) skew(0deg, 20deg)' : 'scale(0.85, 1) skew(0deg, -20deg)';
 prop['hover-after'] = value <= 25 ? 'rotateY(-40deg)' : 'rotateY(40deg)';
 } else {
 prop.origin = value <= 50 ? '50% 100%' : '50% 0';
 prop['hover-before'] = value <= 50 ? 'translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg)' : 'translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg)';
 prop['hover-after'] = value <= 50 ? 'translateY(-0.035em) rotateX(-40deg)' : 'translateY(0.045em) rotateX(40deg)';
 }
 for (let key in prop) {
 this.style.setProperty('--'+key, prop[key]);
 }
 });
});

Do you have interesting tips & tricks? Share with us. If you know cool effects, leave links in the comments below, and maybe next time we will adapt this effect for the Gridbox.