Hand-picked HTML and CSS code examples, tutorials and articles
CSS Gallery, jQuery plugins

Show Animated sentence line by line using JS and CSS

Show Animated sentence line by line using JS and CSS

Show Animated sentence line by line using JS and CSS. This text effect is developed using CSS, JavaScript and HTML. Demo and Download available.

Demo Download

Author ycw
Hits
Created SEPTEMBER 19, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<base target="_blank"/>
<h1>CSS JS 2018+ </h1>
<h2>isolation</h2>
<article>
  <p class="tokenize">This paragraph is clipped by CSS <code>clip-path:polygon(..) </code>which is being updated with <a href="//css-tricks.com/updating-a-css-variable-with-javascript/">CSS Variables</a> controlled by JS.
    You'll find that in the JS source, neither DOM nodes creation, 
    nor string manipulation; It only updates CSS Variables 
    of existing elements.<br/><br/>The styling *logic* is scoped in one place, the stylesheet. 
    Coders will not and should not know how it is implemented.(E.g. Tokenize fx is done by clip-path) 
    What they need to do is to populate CSS Variables. <a href="//developers.google.com/web/updates/2018/03/cssom">CSSTOM</a> will help a lot. <br/><br/>There are few limitations of CSS Variables<br/>1) Not every rule can be parametrized (keyframes state)<br/>2) No real guard (el.style.setProperty)<br/>3) Typeless (or by js CSS.registerProperty but WHY JS)
  </p>
</article>

CSS Code

@import url('https://fonts.googleapis.com/css?family=Wire+One');
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
body {
  display:grid;
  place-content:center;
  perspective:500px;
  min-height:100vh;
}

p.tokenize {
  /*const, public(to js, ie readonly)*/
  --COL:55;
  --ROW:20;  
  
  /* var, doc may look like 
      @param --line <integer> cursor y
      @param --ch <integer> cursor x
      etc
  */
  --line:1;
  --ch:1;
  --lh:2.3ex;
  
  /*private members maybe solved by --private_ */
  
  font:1em Inconsolata;
  line-height:var(--lh);
  width:calc(var(--COL) * 1ch);
  max-height:calc(var(--lh) * var(--ROW));
  hyphens:auto; 
  overflow:hidden; 
  clip-path:polygon(0 0, 100% 0, 
    100% calc((var(--line) - 1) * var(--lh)),
    calc(var(--ch)*1ch) calc((var(--line) - 1) * var(--lh)),
    calc(var(--ch)*1ch) calc(var(--line) * var(--lh)),
    0 calc(var(--line) * var(--lh))
  );
}



article {
  margin-top:0.5em;
  color:hsl(0,0%,50%);
}

b {
  border:1px solid black;
  box-decoration-break:clone;
}

h1 {
  font:2em "wire one";
}

h2 {
  font:1.4em "wire one";
}

JavaScript Snippet

for (const elm of document.querySelectorAll("p.tokenize")) {
  // parse "css input"
  // type casting is not needed if using CSS TYPED OM
  const sty = getComputedStyle(elm);
  const ROW = +sty.getPropertyValue("--ROW");
  const COL = +sty.getPropertyValue("--COL");
  let row = 1;
  let col = 1;
  
  (function f() {
    elm.style.setProperty("--ch", col);
    elm.style.setProperty("--line", row);
    if (++col > COL) {
      col = 1;
      if(++row > ROW)
        return
    }
    setTimeout(f, 16);
  }());
}

Preview

Show Animated sentence line by line using JS and CSS Preview

Advertisement