Wind curtain effect with Spritely

Submitted by Nicola Rainiero on 2012-08-09 (last updated on 2012-08-13)

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:

This scribble helped me a lot to realize the wind curtain effect

In scribble above you can see the two parts that characterize the corresponding final PNGs:

  1. 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;
  2. 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.

curtain fabric (sfondo.png)
DIMENSIONED DRAWING FINAL DRAWING

Terminal ends

Terminal ends (parte_dorata.png)
DIMENSIONED DRAWING FINAL DRAWING

This drawing kept me busy for quite a lot of time! I report the significant steps used in Inkscape:

The model
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 ######## -->



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.