Zooming Text just like JessFraz.com

Nov 30, 2015

Ok, I just loved the zooming text Jessie Frazelle had added to her main site

First let’s look at how her javascript is working, notice she creates a function that adds and removes classes “slideInDown” and “slideOutUp” on elements with the class “favthing”

      var sleep = function(ms, callback) {
              setTimeout(function() {
                  callback()
              }, ms)
          },
          favthings = ["golang", "bash scripting", 'creating <a href="http://en.wikipedia.org/wiki/Text-based_user_interface" target="_blank">TUI\'s</a>', "python", "javascript", "tomfollery in R", "docker"],
          removeClass = function(el, className) {
              el.classList ? el.classList.remove(className) : el.className = el.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " ")
          },
          addClass = function(el, className) {
              el.classList ? el.classList.add(className) : el.className += " " + className
          },
          i = 0,
          nextThing = function(thing) {
              i < favthings.length - 1 ? i++ : i = 0, removeClass(thing, "slideInDown"), addClass(thing, "slideOutUp"), sleep(700, function() {
                  thing.innerHTML = favthings[i], removeClass(thing, "slideOutUp"), addClass(thing, "slideInDown")
              })
          };
      document.addEventListener("DOMContentLoaded", function() {
          var thing = document.querySelectorAll(".favthing")[0];
          setTimeout(function() {
              nextThing(thing)
          }, 1e3), setInterval(function() {
              nextThing(thing)
          }, 4e3)
      });

Ok, so let’s hijack all of this and make it do our own thing first I am going to duplicate her favthings block and replace favthing with titlething, then in the titlethings array I’m going to add in a few of my own little phrases

          titlethings = ["Console Cowboy", "Serial Samurai", "Parallel Prognosticator", "Diabolical Diagnostician", "Embedded Systems Engineer", "Wetware Whisperer", "Meta Mercenary", "Neural-Network Ninja", "SysAdmin", "Linux Geek", "Techromancer"],
          removeTitleClass = function(el, className) {
              el.classList ? el.classList.remove(className) : el.className = el.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " ")
          },
          addTitleClass = function(el, className) {
              el.classList ? el.classList.add(className) : el.className += " " + className
          },
          j = 0,
          nextTitleThing = function(titlething) {
              j < titlethings.length - 1 ? i++ : j = 0, removeClass(titlething, "fadeInLeftBig"), addClass(titlething, "fadeOutRightBig"), sleep(700, function() {
                  titlething.innerHTML = titlethings[j], removeClass(titlething, "fadeOutRightBig"), addClass(titlething, "fadeInLeftBig")
              })
          };

Now add another EventListener that will start the animations once the page loads

      document.addEventListener("DOMContentLoaded", function() {
          var titlething = document.querySelectorAll(".titlething")[0];
          setTimeout(function() {
              nextTitleThing(titlething)
          }, 1e3), setInterval(function() {
              nextTitleThing(titlething)
          }, 4e3)
      });

Now add a span where ever you like and the javascript will start animating it, e.g.

<h3><span class="animated titlething">Techromancer </span></h3>

I also had to add in animate.css

  <link rel="stylesheet" href="/assets/css/animate.min.css">

My complete changes to the javascript:

      /*
      portfolio - v - 2014-06-28
      Jess Frazelle's Portfolio
      Lovingly coded by Jess Frazelle  - http://frazelledazzell.com
      */
      var sleep = function(ms, callback) {
              setTimeout(function() {
                  callback()
              }, ms)
          },
          favthings = ["Debian Linux", "Gentoo Linux","Arch Linux", "Ubuntu Linux", "Linux Mint", "golang", "bash scripting", 'creating <a href="http://en.wikipedia.org/wiki/Text-based_user_interface" target="_blank">TUI\'s</a>', "python", "javascript", "tomfollery in R", "docker"],
          removeClass = function(el, className) {
              el.classList ? el.classList.remove(className) : el.className = el.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " ")
          },
          addClass = function(el, className) {
              el.classList ? el.classList.add(className) : el.className += " " + className
          },
          i = 0,
          nextThing = function(thing) {
              i < favthings.length - 1 ? i++ : i = 0, removeClass(thing, "fadeInLeftBig"), addClass(thing, "fadeOutRightBig"), sleep(700, function() {
                  thing.innerHTML = favthings[i], removeClass(thing, "fadeOutRightBig"), addClass(thing, "fadeInLeftBig")
              })
          };
          titlethings = ["Console Cowboy", "Serial Samurai", "Parallel Prognosticator", "Diabolical Diagnostician", "Embedded Systems Engineer", "Wetware Whisperer", "Meta Mercenary", "Neural-Network Ninja", "SysAdmin", "Linux Geek", "Techromancer"],
          removeTitleClass = function(el, className) {
              el.classList ? el.classList.remove(className) : el.className = el.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " ")
          },
          addTitleClass = function(el, className) {
              el.classList ? el.classList.add(className) : el.className += " " + className
          },
          j = 0,
          nextTitleThing = function(titlething) {
              j < titlethings.length - 1 ? j++ : j = 0, removeClass(titlething, "fadeInLeftBig"), addClass(titlething, "fadeOutRightBig"), sleep(700, function() {
                  titlething.innerHTML = titlethings[j], removeClass(titlething, "fadeOutRightBig"), addClass(titlething, "fadeInLeftBig")
              })
          };
      document.addEventListener("DOMContentLoaded", function() {
          var titlething = document.querySelectorAll(".titlething")[0];
          setTimeout(function() {
              nextTitleThing(titlething)
          }, 1e3), setInterval(function() {
              nextTitleThing(titlething)
          }, 4e3)
      });
      document.addEventListener("DOMContentLoaded", function() {
          var thing = document.querySelectorAll(".favthing")[0];
          setTimeout(function() {
              nextThing(thing)
          }, 1e3), setInterval(function() {
              nextThing(thing)
          }, 4e3)
      });

enjoy!

Joshua Cox

Zooming Text just like JessFraz.com