Animated 3D Opening Type Effect For Gridbox Plugin Headline

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.


Notice!

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!


Animated 3D Opening Type Effect In Site Hero Section - Joomla Website Builder Gridbox


Coming Soon Page with Animated 3D Opening Type Effect - Joomla Website Builder Gridbox


Thank You Page with Animated 3D Opening Type Effect - Joomla Website Builder Gridbox


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 the CSS code and paste it into the Gridbox Code Editor.


Gridbox CSS Editor - Joomla Website Builder Gridbox


.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.


Javascript CSS Editor


document.addEventListener('DOMContentLoaded', 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.