- Read Tutorial
- Watch Guide Video
It looks like the Typed Gem is deprecated, however this is such a small library we really don't need a gem for it. The steps for implementing the Typed.js library are as follows:
You can access the Github page and grab the raw JavaScript code here.
Once you have that, you can create a new file in the application, such as:
touch app/assets/javascripts/lib/typed.js
If you haven't already created a lib directory, you can do that by running:
mkdir app/assets/javascripts/lib
Copy the raw JavaScript code from the Typed.js repo into the new typed.js file. And then call it from the application.js file, like this:
//= require lib/typed
Now let's create some some coffeescript code file, we'll call it typed-implementation.coffee that will perform the 'typing':
ready = -> Typed.new '.element', strings: [ 'Software development is the closest concept we have to magic.' 'It\'s my goal to ensure that anyone with a passion for coding can become a true programming artisan.' ] typeSpeed: 0 return $(document).ready ready $(document).on 'turbolinks:load', ready
And then call it right below the call to the typed.js library in the application.js file:
//= require lib/typed //= require lib/typed-implementation
Now, all we have to do it add a new span tag that contains the element class that our Coffeescript code is looking for:
<div class="inner cover"> <h1 class="cover-heading">Welcome to my online home.</h1> <p class="lead"> <span class='element'></span> </p> <p class="lead"> <%= link_to "About Me", about_me_path, class: "btn btn-lg btn-secondary" %> </p> </div>
And you should now have a great looking 'typed' element on your site!