Build Single Character Transforms with CSS and JS

View: 314    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Javascript   Fields: Other

0 point/1 review File has been tested

To get this up and running we need jQuery. Once we’ve got jQuery sorted, we can add our JavaScript functions inside the document.ready() function.

Introduction

To get this up and running we need jQuery. Once we’ve got jQuery sorted, we can add our JavaScript functions inside the document.ready() function.

jQuery(document).ready(function() {
    // Further code to go in here
});

We only need basic markup to get this working. Inside our HTML file, we add any text we want and then add the .sentence class followed by a basic button.

<h1 class="sentence title">Fancy Slide In Text</h1>
<h3 class="sentence subtitle">Embrance the fanciness!</h3>
<div class="button">Click to Animate</div>

Preparing Your Sentences

Our example looks for all elements that have the class .sentence. Once we have these items, we loop through each character of their text value and create our substring, extracting one character at a time from our sentence. Each sentence is wrapped with a <span> so they can be individually animated later.

We also test to see if a character is blank (e.g. if it contains whitespace such as " "). We ignore these, as we are only interested in animating in actual characters.

Once we are done with all of the characters, we return our new content back to our sentence, replacing our standard plain text with characters wrapped in <span> tags.

// Go through a sentence, wrap its characters with spans
function setUpCharacters() {
  var $sentences = $('.sentence');

  // Run for each sentence
  $sentences.each(function() {
    var $sentence = $(this);
    var newContent = '';

    // Go through all characters of the sentence
    for (i = 0; i < $sentence.text().length; i++) {
      var substring = $sentence.text().substr(i, 1);

      // If we have a character, wrap it
      if (substring != " ") {
        newContent += '<span>' + substring + '</span>';
      } else {
        newContent += substring;
      } 
    }

    // Replace content
    $sentence.html(newContent); 
  });
}

setUpCharacters();

Triggering Your Animations

This is the fun part. This is where we loop through all of our .sentence elements and <span> children and activate them. This function doesn’t actually do any animation itself, all it does is add an .activeclass to the elements. Once we have this active state, we can apply a CSS animation to perform whatever fanciness we dream of!

// Go through a sentence and trigger activate state
function triggerCharacters() {
  var sentenceCounter = 0;
  var sentenceDelay = 600;

  $('.sentence').each(function() {
    var $sentence = $(this);

    // Trigger for each sentence
    setTimeout(function() {
      var $spans = $sentence.find('span');
      var spanCounter = 0;
      var spanDelay = 75;

      // Loop through all spans and activate
      $spans.each(function() {
        var $span = $(this);

        // Trigger a timeout so each span is offset
        setTimeout(function() {
          $span.toggleClass('active');
        }, (spanCounter * spanDelay));

        spanCounter++; 
      });
    }, (sentenceCounter * sentenceDelay));

    sentenceCounter++;
  });
}

// For our example, trigger character animations on button click
$('.button').on('click', function() {
  triggerCharacters();
});

Let’s break down what exactly is happening here:

In our effect, one sentence will be faded in after an initial delay to give a staggered look. We will be setting an initial delay for each sentence to be 600ms. This is used by our outer setTimeout()function.

We find and loop through all .sentence elements and grab their <span> children. We assign a new delay, this time for the individual span characters as they are triggered. This will allow each span to activate separately.

The inner setTimeout() function will trigger, executing each <span> as required.

For our example, we want to trigger this effect when we press a button. To do so, we look for our.button element and trigger our triggerCharacters() function accordingly. You could easily bound this to another element or when the page loads, it’s up to you.

The Animations Themselves

We apply basic styling to each span of the sentence and then apply the animation only when we have a span with the .active class.

.sentence span {
  opacity: 0;
  position: relative;
  display: inline-block;
}
.sentence span.active {
  animation: bounceUp 600ms ease 0ms 1 normal both;
}

Here we apply a fancy looking CSS animation to each of the <span> elements. What we’re doing is translating the position of the element up, down and then finally back to its original position.

/* Bounce top in */
@keyframes bounceUp {
  0% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 0;
  }
  50% {
    transform: translate3d(0px, -50px, 0px);
    opacity: 0.7;
  }
  80% {
    transform: translate3d(0px, 20px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}

When the button is pressed, the first sentence will activate and all of its successive <span> elements will animate in. After a short delay, the subsequent.sentence elements will activate too and their<span> children will follow.

Our Animation In Action

Here’s a CodePen that showcases how you can get this to work. Feel free to have a look an fork it to create your own cool effects and animations!

See the Pen Animating single characters in a string by SitePoint (@SitePoint) on CodePen.

Accessibility Considerations

Since we’re effectively splitting sentences into characters, there’s a chance that screen readers will have difficulty reading the full words. To stop this, we can tell screen readers what our original sentence was using the aria-label attribute on our element. We then use aria-hidden="true" on each of our<span> tags to hide those individual elements from screen readers. This way, screen readers should still be able to read out our animated sentence and should ignore our individual <span> elements.

Our final markup after being affected by JavaScript would look like so:

<h1 class="sentence title" aria-label="Fancy Slide In Text">
  <span class="active" aria-hidden="true">F</span>
  <span class="active" aria-hidden="true">a</span>
  <span class="active" aria-hidden="true">n</span>
  <span class="active" aria-hidden="true">c</span>
  <span class="active" aria-hidden="true">y</span> 
  <span class="active" aria-hidden="true">S</span>
  <span class="active" aria-hidden="true">l</span>
  <span class="active" aria-hidden="true">i</span>
  <span class="active" aria-hidden="true">d</span>
  <span class="active" aria-hidden="true">e</span> 
  <span class="active" aria-hidden="true">I</span>
  <span class="active" aria-hidden="true">n</span> 
  <span class="active" aria-hidden="true">T</span>
  <span class="active" aria-hidden="true">e</span>
  <span class="active" aria-hidden="true">x</span>
  <span class="active" aria-hidden="true">t</span>
</h1>

 

Build Single Character Transforms with CSS and JS

Build Single Character Transforms with CSS and JS Posted on 09-06-2016  To get this up and running we need jQuery. Once we’ve got jQuery sorted, we can add our JavaScript functions inside the document.ready() function. 5/10 314

Comment:

To comment you must be logged in members.

Files with category

  • JUnit 5 State Of The Union using java

    View: 633    Download: 0   Comment: 0   Author: none  

    JUnit 5 State Of The Union using java

    Category: Javascript
    Fields: Other

    1.5/3 review
    JUnit 5 has been under development for about 14 months now and the prototype is almost a year old. Time to summarize what happened so far, where the project stands, and where it’s going.

  • Getting Started with Dropwizard using java

    View: 736    Download: 0   Comment: 0   Author: none  

    Getting Started with Dropwizard using java

    Category: Javascript
    Fields: Other

    1.5/3 review
    Dropwizard is a framework for building RESTful web services in Java. In this tutorial we’re going to have a look at how to get started with developing a Dropwizard application by building a new service from scratch.

  • Build Query NULL Value in MySql

    View: 340    Download: 0   Comment: 0   Author: none  

    Build Query NULL Value in MySql

    Category: Javascript
    Fields: Other

    2.5/2 review
    Misunderstanding NULL is common mistake beginners do while writing MySql query. While quering in MySql they compare column name with NULL. In MySql NULL is nothing or in simple word it isUnknown Value so if you use comparison operator for NULL values...

  • Manage Your JavaScript Application State with MobX

    View: 406    Download: 0   Comment: 0   Author: none  

    Manage Your JavaScript Application State with MobX

    Category: Javascript
    Fields: Other

    2.25/2 review
    This article was peer reviewed by Michel Weststrate and Aaron Boyer. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

  • Build Bringing Pages to Life with the Web Animations API

    View: 364    Download: 0   Comment: 0   Author: none  

    Build Bringing Pages to Life with the Web Animations API

    Category: Javascript
    Fields: Other

    3/3 review
    This article is by guest author Dudley Storey. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • How to Style Google Custom Search Manually

    View: 346    Download: 0   Comment: 0   Author: none  

    How to Style Google Custom Search Manually

    Category: Javascript
    Fields: Other

    0/0 review
    Website owners very often decide on using Google’s Custom Search Engine (GCSE) for searching through their content instead of using built-in and/or custom search functionality. The reason is simple – it’s much less work, and most often it does the...

  • Test React Components Using Jest

    View: 5116    Download: 0   Comment: 0   Author: none  

    Test React Components Using Jest

    Category: Javascript
    Fields: Other

    4.5/1 review
    This article is by guest author Jack Franklin. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • Programming Question Reverse String without using String function

    View: 821    Download: 0   Comment: 0   Author: none  

    Programming Question Reverse String without using String function

    Category: Javascript
    Fields: Other

    4.5/1 review
    Write a program to reverse string without using string function. You don’t have to use any in-built string library function. This problem can be solved by multiple approaches. Let’s check it.

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd