Tutorial: Realistic Waterfall with CSS3

A recent project requires me to create a realistic running waterfall. For such task, what came first to my mind was to use animated GIF or PNG sprite sheet and loop them frame by frame. Then my friend, Justin, explored more with a semi-transparent water layer overlaying a static waterfall image using Photoshop & Flash. The result was really satisfying. So I decide to adopt it into our project which is pure HTML. Thanks to CSS' background repeat and the new CSS3's animation, the task was really simple to achieve and straight forward.

Here's the demo & source code on Dabblet: http://dabblet.com/gist/2403656

It is worth noting that CSS3's animation is still an experiment feature. You can still achieve same result using JS to shift the background at intervals.

Let me explain step by step to re-create the effect:

Geany: open-source SublimeText for front-end developer

When I started doing JavaScript, I kept searching for an ideal JS code editor that is free, lightweight and fast just like FlashDevelop, my favorite ActionScript counter part. (In case you're wondering, I have made a Wine mod of FD4 and been able to run it on Linux). Most JS editors I tried were Java-based, heavy and code assistance is as not good as I expected.

Then I discovered SublimeText 2 and Geany. The former is commercial and the latter is opensource. Both of them are cross platform, lightweight, fast and has syntax highlighting for quite a number languages. For JavaScript and front-end stuff in particular, they both have some support for code hinting and auto completion but fairly limited.

Geany interface

Project: Justin Portfolio

One of the projects to challenge my skill in JavaScript and HTML5. The original parallax scrolling experience is coded from scratch with the help of MooTools framework. I learned a lot from this project and  got everything I need to handle larger front-end interactive websites.

Visit the site.

Technical features:

• HTML5 Boilerplate
• MooTools 1.4
• ThreeJS 3D library & its Birds Demo
• CSS3's transition & animation

Related posts:

• Realistic waterfall effect with CSS
• Fish boids

Project: J&J HTML Template

This is an HTML template for a privately developed CMS website. The job involved converting Photoshop .PSD files into HTML/CSS template, Javascripting validation for contact form and Google maps interaction. At the same time, I custom made the Flash banner carousel with the text & images customizable via XML feed. Due to CMS restrictions and corporate's guidelines, the template is rather traditional.

The live site can be visited here: www.comms.%6A%6A%73%65%61.com [?]
Note: the CMS developers have altered some layout and client-size logic. Here's the link to my demo site before integration.

Technical notes:

• jQuery
• Google Maps API

 

Demo: Stage3D Fireworks with Flare3D

My going back to Flash to experiment on Stage3D. The animation make use of Flare3D engine. Thanks to its built-in shaders and particles components, I was able to create the fireworks and the lightning effects without much trouble. However there's still room to improve the fireworks effect with more particles.

View the demo.