Kinsey

# Split Text

The template includes a plugin wrapper for SplitText (opens new window), allowing you to create fancy text animations directly from HTML markup without needing additional JavaScript calls.

# Markup: Text Block

The following text will be split and prepared for animation (but won't be animated automatically):

<div
  class="js-arts-split-text arts-split-text"
  data-arts-split-text="lines"
  data-arts-split-text-set="lines"
  data-arts-split-text-set-direction="y"
  data-arts-split-text-set-distance="100%"
  data-arts-split-text-set-opacity="0"
  data-arts-split-text-overflow-wrap="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>
# Classes
  • js-arts-split-text – required to indicate the text for splitting.
# Attributes
  • data-arts-split-text = [ lines | words | chars ] – defines how the text should be split.
  • data-arts-split-text-set = [ lines | words | chars ] – defines which elements to prepare (opacity, offset) for the text reveal animation.
  • data-arts-split-text-set-direction = [ y | x ] – axis for the offset.
  • data-arts-split-text-set-distance = [ percent | pixels ] – offset distance. Example: "200px" or "-100%".
  • data-arts-split-text-set-opacity = [ 0.00 – 1.00 ] – initial opacity.
  • data-arts-split-text-overflow-wrap = [ lines | words | chars ] – creates an additional wrapper <div class="overflow">...</div> for each split element.

# Markup: Animated Content Section

To create an animated text effect, use the following markup:

<section class="section section-content">
  <div
    class="section-content__content content js-arts-split-text arts-split-text"
    data-arts-os-animation="true"
    data-arts-os-animation-name="animateText"
    data-arts-split-text="lines"
    data-arts-split-text-set="lines"
    data-arts-split-text-overflow-wrap="lines"
  >
    <h3>Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </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 (as seen in template source *.html files). The actual split is performed later by JavaScript when the page and fonts are loaded.

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

# Odd Line Breaks

The text split is performed right after the page and fonts are loaded. The script considers 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 note that non-developers visiting your website are unlikely to adjust the browser width. However, if you are concerned about this, you can embed a JavaScript plugin (or write a simple function yourself) that detects viewport width changes and prompts visitors to refresh the page to continue browsing the website.

← Lazy Loading →