Code

Building a JQuery Retinal Scanner

/ Matt Ellison / Leave a comment

I have been having tons of fun working on the viral site for Erin Kellison’s Segue Institute. We’ve added lots of cool content to the site, and have plans to keep it going (and growing) for quite a while.

Maybe my favorite section of the site is the retinal scanner. It’s the second page you come to when you visit the site (the initial page is a login page). The Segue Institute is supposed to be a very high-tech facility, and the site experience is meant to be that of a Segue employee logging in to their secure website to poke around.

Probably one of the big reasons I like the scanner page so much is because it wasn’t planned. I was working on the main site navigation in the internal pages, and it was giving me fits. I was having a rough time trying to come up with something that was clean and clear to the user, but also fit with the high-tech theme. In a moment of frustration I decided to take a little break, and started brainstorming about various high-tech devices or designs that could work on the site. And immediately I knew we needed a retinal scanner. I started on it that very second, and after a few hours I had it. Gotta love inspiration.

So, on to the good stuff. The scanner is really quite simple. It consists of two images: (1) the scanner background with the sight lines and green radial gradient, and (2) the laser. I went with green because, well, it looked cool. The scanner background is nothing special, just some lines and a gradient on a transparent background. The laser is just a line of green to which I applied some filters for the blurs on the ends. I also added some noise to give it that fluttery sort of look that lasers get when they pass over objects.

The final pieces of the puzzle were two small text paragraphs: one static, with a simple message (“Please hold still”, heh heh) and one hidden, for display when the scanner is finished.

The HTML is again pretty simple. We have a “content” div wrapper, a div for the static message, a div for the hidden message (“auth”), and a div for the scanner (“scanPanel”).  NOTE: line breaks below are for display purposes only. AND ANOTHER THING: both “scanPanel” and “imgLaser” are positioned absolutely so that all the animations start and stop in the right place.

<div id="content">
  <div id="scanPanel" class="contentDiv">
    <img id="imgScanOverlay" src="img/scanbed.png" style="display: none;"/>
    <img id="imgLaser" src="img/scan.png" style="display: none; 
        position: absolute; top: 82px; left: 50px;"/>
  </div>
  <div>
    RETINAL SCAN IN PROGRESS...PLEASE HOLD STILL
  </div>
  <div id="auth" style="display: none;">
    AUTHORIZATION SUCCEEDED...LOADING DASHBOARD
  </div>
</div>

The javascript is where the magic happens. It all starts with a call to loadPanel(), which simply fades in the scanner div. Then the callback method, showScanner(), kicks off a series of animations:

  1. the scanner background is faded in
  2. the laser image is faded in
  3. the laser image’s “top” CSS property is animated to 390px, over a 2.5 second duration. Notice that here we are using the jquery easing plugin to get the effect that the scanner is speeding up through the center, and slowing down at the bottom. There are a bunch of options available here…basically I just tried them and picked the one that felt right.
  4. The laser is animated again, this time back up to the top. Again the easing plugin does its thing.
  5. The laser image is faded out
  6. The callback from the fadeout locates the hidden message and fades it in
  7. Finally, the callback from the fade in does a redirect to the main site. Whew!
NOTE: you could reduce all the nesting below by setting up individual functions for each of the callbacks, however I kind of prefer it this way, it’s easier to visualize what’s going on. Plus, once you minify it, who cares about nesting anyway?
$(document).ready(function () {
  loadPanel($("#scanPanel"))
});

loadPanel = function (panel) {
  panel.fadeIn(500, showScanner)
};

showScanner = function () {
  $("#imgScanOverlay").stop().fadeIn(1800, function () {
    $("#imgLaser").fadeIn(500, function () {
      $(this).animate({ top: "390px" }, 2500, "easeInOutQuint", function () {
        $(this).animate({ top: "82px" }, 2500, "easeInOutQuint", function () {
          $(this).fadeOut(1000, function () {
            $("#auth").fadeIn(1000, function () {
              redirect()
            })
          })
        })
      })
    })
  })
};

redirect = function () {
  setTimeout("window.location = 'dashboard.html';", 2000)
};

So that’s pretty much it. The one thing that I wish I could do with this is make the scanner appear more 3-D when it is animated. Perhaps by animating the width or thickness of the “laser” through its path. Sounds like a fun project for another day.

See the full effect at the SegueInstitute website.

Enjoy!

Advertisement