To add some seasonal flair to a site's homepage can be as simple as adding a new hero image or updating the headline in a Jumbotron widget, but when you want to take it a step further, add falling leaves or snow with a few quick steps!


View a demo of the two different seasonal update options by clicking the links below!

seasonal-update.uxinetwork.com/fall-update

seasonal-update.uxinetwork.com/winter-update


1. Download the files

Click the link attached at the bottom of this article to download a zip file of the required javascript and image files. Unpack it to a local folder like your desktop to get started!


2. Prepare the image files

Get started by preparing three .png files. There are six leaves and flakes included in the download file attached below. If new images are created, please be sure they've been saved as 8-bit png files to keep file sizes down. When the files are ready, upload them to the media library.


3. Configure the UXiAnimate JavaScript File

Before uploading the JavaScript files, the URLs of the three images that were added to the media library must be added to the top of UXi Animate file.

 

BFcxh_Wr2pGnqy1XMyk3msuR_ewLP4Tjaw.jpg

  1. Open the 06-uxi-animate.js file with a text editor like Notepad++

  2. Copy and paste the image URLs to lines 3, 5, and 7.
    To find the image URLs, click each image thumbnail in the media library, then from the pop-up window, copy and paste the full URL from the URL field at the top right.

  3. Save the updated JavaScript file

*Note: Lines 9 - 15 have more advanced options that can be updated upon client request. These lines can modify how many leaves fall, how fast they fall, etc.


4. Upload JavaScript files

Now it's time to put the images to work. For this we'll need the help of several JavaScript files.  Upload the following files to the media library

  • 01-jquery-1.4.2.min.js
  • 02-animation-fix-min.js
  • 03-css-transform-min.js
  • 04-animate-css-rotate-scale-min.js
  • 05-rotate3Di-0.9-min.js
  • 06-falling-leaves.js


5. Add Custom JavaScript Links

In order to use the JavaScript files that were uploaded on a page, click UXi Settings > Custom JS to add new links

  1. Click the 'Add Script' button 6 times to add new fields for the JavaScript files that were just uploaded.
  2. From a separate tab / window, copy and paste the JavaScript file URLs in order from 01 to 06
  3. For all six links, set the following options:
  • HTML Location: Footer - This will output the links in the <footer> element of the page.
  • Output Location: Layout - This will allow the scripts to load on only a specific layout.
  • Select Layout: Homepage - Any layout could be selected, but this features will be used on the homepage. 


6. Add HTML Markup to the Homepage

 The HTML that is added looks like this 

<div  class="leaves"></div>
<script type="text/javascript"> 
	fallingLeaves();
</script>

  

Simply add it to an embed widget on the homepage!