This is one of those tutorials whose end result might not be worth the effort but the effort is what it's all about.
What is rainyday.js?
The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface.
In this tutorial you can learn how to
- register a Home Featured custom widget area
- display this widget area below the header on front page only
- initialize rainyday.js with an image placed inside a text widget in this widget area
- use CSS transform along with absolute positioning to center HTML on top of the 'rained' canvas
- enqueue rainyday and its init script on non-handhelds and on front page only
Step 1
Upload rainyday.min.js to child theme's 'js' directory.
Create a file named say, rainyday-init.js in the same location having this code:
I love this! Nice one.
can you give us a link to see the live demo?
There are a few demos here: http://maroslaw.github.io/rainyday.js/
Here’s one for example: http://maroslaw.github.io/rainyday.js/demo012_1.html
I notice some times on page reloads the script is not working? No image or script…any thoughts? I have to refresh and it will start working again. This is just occasional. Do you know what might be a causing this?
Thank you in advance!
I figured out the issue i posted above. If you call the image within javascript the issue seems to resolve.