Rhye

# Split Text

# Markup: Text Block

<div
  class="js-split-text split-text"
  data-split-text-type="lines"
  data-split-text-set="lines"
>
  Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit,
  sed <em>do eiusmod tempor</em> incididunt ut <a href="#">labore</a> et dolore
  magna aliqua. Ut enim ad minim veniam.
</div>
# Attributes
  • js-split-text class – required to indicate the text for split.
  • data-split-text-type=[ lines | words | chars] – defines how the text should be split.
  • data-split-text-set=[ lines | words | chars] – defines which elements to prepare (opacity, offset) for the text reveal animation.

# Markup: Animated Content Section

<section class="section section-content" data-arts-os-animation="true">
  <div class="section-content__image">
    ...
    <!-- Animated Image -->
  </div>
  <div class="section-content__heading split-text js-split-text" data-split-text-type="lines,words" data-split-text-set="words">
    <h2>Animated heading words</h2>
  </div>
  <div class="section-content__text split-text js-split-text" data-split-text-type="lines" data-split-text-set="lines">
    <p>Animated text lines</p>
  </div>
  <div class="section-content__button">
    ...
    <!-- Animated Button -->
  </div>
</section>

# SEO Impact

When a browser requests a page from a remote server (e.g., your hosting), the server responds with HTML data containing normal text (like what you see in template source *.html files). The actual split is done later by JavaScript when the page and fonts are loaded.

Search crawlers parse web pages ignoring all the styles (CSS) and functionality (JS). They will get the pages without text split, so the split doesn't negatively affect the site's SEO.

# Odd Line Breaks

The text split is performed right after the page and fonts are loaded. The script takes into consideration the current width of every text line. If you resize the browser window after the split is completed, the line breaks won’t be recalculated, and you may see some incorrectly rendered lines.

Solution

Simply reload the page at the current screen width.

Please keep in mind that non-developers who visit your website are unlikely to play with browser width. However, if you are still concerned, you can embed a JavaScript plugin (or write a simple function yourself) that detects the viewport width change event and asks visitors to refresh the page to continue browsing the website.

← Lazy Loading →