Animate your Drupal 7 site, use spritely!

Submitted by Nicola Rainiero on 2012-06-16 (last updated on 2015-04-25)

With spritely, a jQuery plugin, your site acquires the ability to animate the background graphic and to give vitality at the HTML and css layout. In this article I explain you how install it and what are the files to modify in order to use it.

At the beginning of the Web design history, the only possibility to animate an HTML page was the GIF, then Flash (created by FutureSlash and secondly by Macromedia and nowadays by Adobe, how many informations I learn consulting Wikipedia). Flash has brought new possibilities with the introduction of interaction and multimedia. Today jQuery and HTML5 are giving new chances with the assumption of more compatibility and lightness. Spritely is a freshly addon, created by Artlogic, and licensed Mit and GPL, that improves the abilities offered by jQuery, “for creating dynamic character and background animation in pure HTML and JavaScript”, like they wrote in theirs site.

As you can see in every page of my site, this plug-in allows to move six pieces of clouds in the upper side (a dirty trick to simulate a 3D effect).

To obtain good results you need to know a little of:

  • css style system, above all how set position of the objects in the page and how make interaction with the other part that constituted the background (maybe you want hide or block the logo of your page, don't you?);
  • javascript code, but the examples help a lot;
  • vector graphics and alpha channel (i.e. the transparency). I suggest you to use Inkscape, is open, powerful and multi platform software.

Installation

JQuery is already loaded in Drupal 7, but spritely plug-in must be installed and to do it, there are 2 ways:

  1. Download the homonym module and copy it in your site (point 2 and 6 of previous article), then uncompress last release of spritely in the "sites/all/libraries/spritely/" FTP directory, don't forget: jquery.spritely.js. Now you can enable this module in the Drupal admin panel.
  2. Get the last release of spritely and copy the jquery.spritely-0.6.js file in "sites/all/themes/subtheme_enabled/js/". In other words you have to install it manually in your sub-theme and add the following "scripts[] = js/jquery.spritely-0.6.js" string in subtheme_enabled.info file located here: "sites/all/themes/subtheme_enabled/". I suggest you to study the Drupal documentation to learn how the themes system works in this CMS, and how create a sub-theme or a new theme from scratch.

Well at this point the plugin should function in every theme (point A) or in the only active theme (point B).

Files to change for using spritely

The possibilities and the files that you can edit to use it are many (this is possible thanks to Drupal's framework and HTML/CSS rules). I am going to illustrate my solution for this site, anyway I'm sure that it is not the only one and the best... It functions without any problems or incompatibilities, so why should I change it?

I created my theme starting from the Bartik (but the only file that differs from the others should be the css), I modified the following files:

  • css style file in "sites/all/themes/subtheme_enabled/css/style.css"; 
  • drupal page template in "sites/all/themes/subtheme_enabled/templates/page.tpl.php".

Remember: never modify the original files in the root directory "themes", but only in the "sites/all/themes" or "sites/default/themes" directories.

In style.css file I defined position, interaction and depth for floating objects, too for fixed ones situated in nearness. For example inside the section commented with:

 /* ------------------ Header ------------------ */

I inserted for every cloud: two css definitions. The first called "stage" with position and dimension and the second called "cloud" with the image definition and location of the image. This is the code for the cloud labeled 1:

/* Code for spritely header */
        #stage1 {
            top: -50px;
            left: -50px;
        }
        .stage1 {
            position: absolute;
            top: 0;
            left: 0px;
            width: 600px;
            min-width: 600px;
            height: 120px;
            overflow: hidden;
        }
        #cloud1 {
            position: absolute;
            top: 0;
            left: 0px;                     
			width: 600px;
			height: 95px;
            background: transparent url(../images/clouds_animation3.png) 0 0 no-repeat;
        }
        
        [...same thing for the other 5, changing position and image location...]

I extended the z-index property to the objects covered and crossed by these floating objects, in my case menus and logo links worked only with this added property.

In page.tpl.php file, once understood the code with the calls to the various elements of the page (I suggest you the following article to study this template file), I included the following code after the line 90:

<!-- Code to animate background: START -->

 <script type="text/javascript">
        <!-- javascript code for the first cloud -->
        (function($) {
            $(document).ready(function() {
                $('#cloud1').delay(0).sprite({fps: 0.5, no_of_frames: 3}).spRandom({top: 10, left: 20, right: 10, bottom: 20, speed: 500, pause: 0}); 
            });
                })(jQuery);
	<!-- similar text for the others -->
</script>

<!-- html code for the first cloud -->
<div id="stage1" class="stage1">
       <div id="cloud1" class="stage1"></div>
</div>
<!-- similar text for the others -->

<!-- Code to animate background: END -->

In the beginning part, I inserted the javascript code with the animation effect (after many tries: varying frame rate, speed position, etc.) for all the 6 clouds, after there is HTML code for the 6 divs: stage and cloud as I explained in the css file.

As you can see these addictions are simple and in my case I could make a for loop to save space and to simplify the script, but it works, why do I make things too difficult for myself?

In a next article I will explain step by step, the realization of a little animation with spritely.




Related Content:

Nicola Rainiero

A civil geotechnical engineer with the ambition to facilitate own work with free software for a knowledge and collective sharing. Also, I deal with green energy and in particular shallow geothermal energy. I have always been involved in web design and 3D modelling.

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.