Interacting with Text


Topics

  1. Creating Images of Text
  2. Animating Images on a Web
  3. References
  4. Exercise

Please get the code examples and images used in this lab, by clicking here


1. Creating Images of Text

Some of you might be wondering why we have to create images of text. Well, sometimes you want to create labels on a webpage with a font type that is not standard for web browsers. The goal would be that someone half the world away would see the same font as you. The only way to guarantee the same font (with non-standard types) is to use an image of the text. Normally, you can do that using a fancy application like Photoshop or Illustrator. Both of these packages are quite large. Instead, we are going to cheat by using something easy, and then capturing the font as an image using a "screen capture".

1.1 Using TextEdit

1.2 Capturing and Cropping

1.3 A Note on Installing Font

You might really like the "i" with the flower dot (from the text above) and be asking, "where do you find that?". The answer is: you won't find it in the default fonts that come installed on the Mac. You can, however, install fonts from the web. The following website has some cool ones that are free or on a donation basis:

To not rehash what has already been done, the following page has instructions on how to install the fonts: http://www.dafont.com/faq.php

By the way, the font with the flower dot is called "Floralies". You can find it at dafont.com!


2. Animating Images on a Web

You guessed it! We are going to animate our images of text on the web. The code sample that is provided with this lab animates some round spheres based on mouse movement over a web page. You can take the ideas from the code samples and modify them to work with some text images.

In the following subsections we are going to answer the questions of "what is this code?" and "what do we have to change?". Before we get into those details, you might want to check out these animation examples that make use of the code that we are going to discuss:

2.1 What is JQuery and Plax?

You might already be familiar with JavaScript, but if you were told that the code we will be looking at is written in JQuery with a plug-in called Plax, your eyes might start glazing over. The next couple of subsections will define JQuery and Plax and where you can get more information about them.

2.1.1 JQuery

JQuery is a free, open source JavaScript library that has been designed to simplify client side scripting. In particular, it makes it easier to navigate a document, create animations, handle events, and perform Ajax operations. JQuery is extensible in that people have written plug-ins (specialized functions) that are freely available. These plug-ins make adding animation or, for instance, sorting table information as easy as calling a function.

If you would like to "install" JQuery, all you have to do is download the file available at: http://jquery.com/ and make it accessible to your target webpages. You will have to add the following code between the opening and closing head tags of your webpage:

<script src="./jquery.min.js" type="text/javascript">

This assumes that the jquery file is available in your current directory. If you are storing your work on Hercules and do not want to upload an extra file, you can use the version of JQuery that has been made available in the CS325 directory:
src="http://www.cs.uregina.ca/Links/class-info/325/InteractiveText/Examples/scripts/jquery.min.js"

2.1.1 Plax

One of the cool plug-ins for JQuery is called "Plax", apparently, short for parallax. The idea of parallax is that depending on your line of sight, an object may appear to move (in relationship to a background or in relationship to another object). One example of this is: if you put your index finger up about six inches in front of your nose and then alternate closing your right and left eyes, it will appear like your index finger is moving quite a bit in relationship to the background. In technical terms, things that are closer have larger parallax. As you move your index finger farther away it seems to move less. The following webpage, https://github.com/500 gives the feeling that the sign is closer. Why?

Your lab instructor has provided you with a package that contains Plax. If you would like to know where Plax came from or look at more examples, you can click on this link: https://github.com/cameronmcefee/plax (click on the "Zip" icon to download everything). If you are a minimalist and know how things work, then all you really need is plax.js, which contains the function, plaxify. We will look at how we can call this function in the following subsection.

2.2 Working with the Example Code

In the example code that is provided with this lab there are a few things to point out in the index.html file:

  1. There are several scripts that are being linked to between the opening and closing head tags:
    <script type="text/javascript" src="./scripts/jquery.min.js"></script>
    <script type="text/javascript" src="./scripts/plax.js"></script>
    <script type="text/javascript" src="./scripts/callPlax.js"></script>
    
  2. When the images are being added to the webpage, there are additional attributes included in the img tag. Two examples are:
    <img src="img/plax_sphere_large.png" width="215" height="215"
             data-xrange="10" data-yrange="10" id="plax-sphere-2"/>
    <img src="img/plax_sphere_small.png" width="93" height="92"
             data-xrange="40" data-yrange="40" data-invert="true" id="plax-sphere-3"/>
    
  3. An internal cascading style sheet is part of index.html. For the image with id of plax-sphere-3, the following "property: value" pairs are specified:
    img#plax-sphere-3 {
      position: absolute;
      top: 35px;
      left: 32px;
      z-index: 1;
    }

Next, if you look at callPlax.js, you will see the following code:

$(document).ready(function () {
     $('#shell img').plaxify()
     $.plax.enable()
})

Let us explain the code line by line:

As a side note, this is just one way of calling plaxify. If you are curious, you can see another way of calling plaxify at the following location: http://www.fadadance.ca/js/home.js.

Questions to Test Your Understanding


3. References


4. Exercise

You knew this was coming, right? The goal of this exercise is to animate some images of text using the Plax plug-in for JQuery.

More Details