In this section, we'll be doing the following:
- Creating the rain function and making it rain
- Creating the rain drops using border-radius
This last frame is all about fun. What we're going to do is use JavaScript to find each feature that passed the feature test, make that a rain drop, and make it fall out of the cloud. We're literally going to have Modernizr make it rain features.
This final frame is built exclusively on WebKit browsers such as Google Chrome and Safari. This is because we're building things not available on many of today's browsers and with feature testing properly in place we're dealing with features that wouldn't be seen at all. These features would only be shown once the browser had "progressed" far enough to interpret them. However, for the sake of building a forward-thinking experience we'll need to be able to see what we are viewing. So, the typical feature detection guard has been dropped. We will not detect whether a feature is supported with JavaScript or CSS before we use it as we have in the past.
Building for the future means that some but not all browsers will be ready for these features. I recommend at the time of this writing viewing the last two frames in Google Chrome 20 and above.
For the HTML all we need to add is this extra part to the rain-drops div. It's another div element named drops-wrapper that will act as a wrapper for all of the raindrops, as seen in the following code snippet:
<div class="rain-drops">
<div class="drops-wrapper"></div>
<div class="rainbg"></div>
</div>The raindrops will be CSS and be done using border-radius, transform, and some animation that will make the drop fall, as shown in the following code snippet:
.drop {
position: absolute;
width: 1em;
height: 1em;
-webkit-border-top-left-radius: 10em;
-webkit-border-top-right-radius: 1em;
-webkit-border-bottom-right-radius: 10em;
-webkit-border-bottom-left-radius: 1em;
border-radius-topleft: 10em;
border-radius-topright: 0;
border-radius-bottomright: 10em;
border-radius-bottomleft: 10em;
border-top-left-radius: 10em;
border-top-right-radius: 0;
border-bottom-right-radius: 10em;
border-bottom-left-radius: 10em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
text-align: center;
font-family: Arial;
font-size: 1em;
color: #fff;
z-index: 1;
color: #336699;
background-color: #0567a0;
-webkit-box-shadow: 0 0px 2px 5px rgba(11,144,213,0.5);
box-shadow: 0 0px 2px 5px rgba(11,144,213,0.5);
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: rain;
-moz-animation-name: rain;
-ms-animation-name: rain;
-o-animation-name: rain;
animation-name: rain;
}
.drop p {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}This time I've taken the liberty of adding all the vendor prefixes as well in order to give a fuller picture in our final example.
The cloud will have three drops fall at any given time. To keep things as simple as possible, there are three separate classes that position and specify the timing of the drops' descent, as shown in the following code snippet:
.drop-1 {
left: 60px;
-webkit-animation-duration: 3s;
}
.drop-2 {
left: 100px;
-webkit-animation-duration: 2s;
}
.drop-3 {
left: 180px;
-webkit-animation-duration: 2.5s;
}Next we will add the following JavaScript:
/*
* Adds a droplet for each feature that the browser has.
*/
function randomRange (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//The array to collect the passed tests.
var rainDrops = [];
/* Loop through the Modernizr global and collect the passed test into an array */
(function($){
for( var prop in Modernizr ) {
if( Modernizr.hasOwnProperty( prop ) )
if( Modernizr[prop] === true ){
//Push each passed test into an array.
rainDrops.push(prop);
}
}
}
)(jQuery);
//Loop through the array of passed tests and add raindrops to the cloud.
var start = 0;
var end = slice = 3;
function dripFaucet(){
var dropSet,
drops = '';
//Grab 3 from the results.
dropSet = rainDrops.slice( start , end);
for ( i=0; i< dropSet.length; i++ ){
drops += '<div class="drop drop-'+( i + 1 )+' " style="z-index: '+ randomRange( 1,3 ) +' top: '+randomRange( 90,100 )+'px ;"><p>'+ rainDrops[start + i] +'</p></div>';
}
//Move the pointer up in the array for the next set.
start = end;
end = end + slice;
$('.rain-drops .drops-wrapper', '#frame-5').html(drops);
}
window.setInterval( function(){ dripFaucet(); }, 2000);The JavaScript loops through the stored Modernizr tests, if a test passed, it is stored in an array. This array is then parsed and drops are added three at a time to the cloud. For WebKit browsers, the CSS drops animate by falling, as seen in the following screenshot:
As I mentioned earlier, this tutorial was WebKit-centric. However, the majority of these features are available in most current versions of browsers. The way that the browser in question detects these is by use of a vendor prefix.
The following is an earlier linear gradient example, fully vendor prefixed:
.vert-stripe-gradient {
background-image: -webkit-linear-gradient(0deg,transparent 50%, rgba(255,255,255,.5) 50%);
background-image: -moz-linear-gradient(0deg,transparent 50%, rgba(255,255,255,.5) 50%);
background-image: -o-linear-gradient(0deg,transparent 50%, rgba(255,255,255,.5) 50%);
background-image: -ms-linear-gradient(0deg,transparent 50%, rgba(255,255,255,.5) 50%);
background-image: linear-gradient(0deg,transparent 50%, rgba(255,255,255,.5) 50%);
-webkit-background-size: 5px;
-moz-background-size: 5px;
background-size: 5px;
}As you can see the CSS is iterative for each vendor and is rather cut and dry. I tend to write my code with a single vendor in mind, and then use a prefix generator such as Prefixr, which can be found at prefixr.com. Simply paste in your code and full vendor prefixing is done for you on the fly. Vendor prefixing plugins are also widely available for most if not all popular IDEs. The following screenshot shows us a peek how the earlier code is used on the website:
Modernizr has a prefixing utility under the hood. This is helpful should you want to automatically obtain the prefix while using JavaScript. Simply pass the prefix you are looking for as an argument and the function will return the applicable vendor prefix.
For example, Modernizr.prefixed('animation-duration') in Google Chrome would return WebkitAnimation-duration.