Animated steam text effect

by Konstantin Rouda

HTML

<p id="text">The animation applied to the ‘blur’ elements in Step 5 are defined in this step. The reference to ‘animationBlur’ is made as a keyframes &nbsp;animation. The first frame ‘from’ sets the elements as visible with a &nbsp;text shadow – but with&nbsp;a transparent text colour. This is what produces the&nbsp;blurred text effect.&nbsp;</p>



<button id="toggle-btn" class="btn btn--toggle">Toggle Effect</button>

CSS

P {
    max-width: 75ch;
    font-size: 18px;
    line-height: 1.5;
    margin: 7em auto 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    color: #000;
    transition: color 5s, text-shadow 5s;
}

.steam-effect {
   text-shadow: 0 0 1rem rgba(0, 0, 0, .5);
   color: rgba(0, 0, 0, 0);
}



.btn {
  display: block;
  margin: 5rem auto 0;
  padding: .5rem 1rem;
  border: 1px solid cornflowerblue;
  font-size: 1.5rem;
  background: transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}


.btn:active {
  box-shadow: none;
}


.btn[disabled] {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3) inset;
  border-color: transparent;
}

JavaScript

;(function () {
	"use strict";
  
  const btn = document.getElementById("toggle-btn");
  const txtEl = document.getElementById("text");
  
  
  btn.addEventListener("click", btnToggleOnClick);
  
  
  function btnToggleOnClick (e) {
  	txtEl.classList.toggle("steam-effect");
    btn.disabled = true;
    setTimeout(function () {
       btn.disabled = false;
    }, 5 * 1000);
  };
  
  
})();