Wind curtain effect with Spritely
In this brief tutorial I will explain how to create a wind effect on a curtain in order to use it like a background on site header that I am updating. Measuring out the linear gradient of curtain, adding shadows and wavelike motion in the ends, it is possible to simulate a fairly good movement in spite of some blemish. All in all it gives the page layout more dynamic and beautiful.
Well, I haven't resisted and in this summer time I'm trying to update my old Roman Legion site and porting it to Drupal, making the most of knowledge learned here in these last months. While I was designing the first version, I looked for an effect like this, but the result in Flash was too heavy and poor that I desisted!
On the contrary Spritely permitted me create a good animation with two PNG files (realized interely using Inkscape, 9 kB in all!). Firstly I sketched up in a paper sheet a primitive draft, here it is:
In scribble above you can see the two parts that characterize the corresponding final PNGs:
- the curtain fabric defined by a two linear gradients, tending to dark when the wave goes to inward, viceversa to light when goes to outward;
- terminal ends where prevail waving and shadow.
Curtain
I used the original background color, filling the 4 frames (100 px by 100) with this color or linear gradient. In order to obtain a better interaction among two PNGs, I further divided them.
DIMENSIONED DRAWING | FINAL DRAWING |
Terminal ends
DIMENSIONED DRAWING | FINAL DRAWING |
This drawing kept me busy for quite a lot of time! I report the significant steps used in Inkscape:
Draw the rectangles | Their assembly | Conversion in raster (Edit --> Make a Bitmap Copy); Waving effect (Extensions --> Raster --> Wave...) |
Overlapping with the curtain |
Ri-conversion in vectorial (Path -->
Traced Bitmap - option Colors) |
Add shadow (Filters --> Shadows and Glows --> Inner shadow...) |
Insertion in Drupal
For the technicisms you can read my Animate your Drupal 7 site, use spritely! article. Here it is only the code added in style.css and page.tpl.php.
In style.css
#stage { top: 0px; left: 0px; } .stage { position: absolute; top: 0px; left: 0px; width: 100%; min-width: 100%; height: 100px; overflow: hidden; } #sfondo { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background: transparent url(../images/sfondo.png) repeat; } #stage_finale { top: 100px; left: 0px; } .stage_finale { position: absolute; top: 0; left: 0px; width: 100%; min-width: 100%; height: 75px; overflow: hidden; } #finale_sfondo { position: absolute; top: 0; left: 0px; z-index: 1; width: 100px; height: 75px; background: transparent url(../images/parte_dorata.png) repeat; }
In page.tpl.php (I inserted it after <div id="page-wrapper"><div id="page">, because I want fit the animation to page width)
<script type="text/javascript"> (function($) { $(document).ready(function() { $('#sfondo').sprite({fps: 1, no_of_frames: 4}); }); })(jQuery); (function($) { $(document).ready(function() { $('#finale_sfondo').sprite({fps: 1, no_of_frames: 4}); }); })(jQuery); </script> <div id="contenitore_spritely"> <div id="stage" class="stage"> <div id="sfondo" class="stage"></div> </div> <div id="stage_finale" class="stage_finale"> <div id="finale_sfondo" class="stage_finale"></div> </div> </div>
You can see it in the target site and in a shorter version below:
The code for animation above:
<!-- ######## SPRITELY ANIMATION ######## --> <style type="text/css"> #terminale { top: 0px; left: 0px; } .terminale { position: absolute; top: 0; left: 0px; width: 100%; min-width: 100%; height: 75px; overflow: hidden; } #terminale_sfondo { position: absolute; top: 0; left: 0px; z-index: 1; width: 100px; height: 75px; background: transparent url(http://rainnic.altervista.org/sites/default/files/styles/large/public/images/parte_dorata.png) repeat; } </style> <script type="text/javascript"> (function($) { $(document).ready(function() { $('#terminale_sfondo').sprite({fps: 1, no_of_frames: 4}); }); })(jQuery); </script> <div> <div id="terminale" class="terminale"> <div id="terminale_sfondo" class="terminale"></div> </div> </div> <!-- ######## SPRITELY ANIMATION ######## -->
Add new comment