Falling fun custom card

Add seasonal flair or celebrate a win with falling fun!

What it does

Adds a simple animation to any page. With configuration options for emojis 🥓 ❄ and images, the possibilities are endless. A great way to add seasonal flair or celebrate a win.

Complexity

Installation

All free custom cards are automatically available on ThoughtFarmer and can be added to content templates. (To learn more, see Create and edit default templates and Modify a page template.) Details about the cards can be found on the ThoughtFarmer Admin panel: User interface section > Custom cards page.

Configuration

The Falling fun card takes in a number of configuration parameters in JSON format. Expand the Sample Configurations section below to see examples.

Configuration

• numberOfItems: How many falling items to show. Over 25 gets a bit crazy. Over 50 and slower computers will likely see lag, CPU fans will fire up, chaos will ensue. Use your power wisely. Maximum is capped to 100.
• fontSize (optional): The size used for emojis and characters. Default is 1.25em.
• itemVariations: A string array of unicode characters or emojis.
• imageItems: An object array of images to use. Requires url, and size.
• animationIterationCount: The number of times the falling animation will run. Default is 4. To never stop the fun set to "infinite".

Sample configurations

Just a few emojis

{
"numberOfItems": 20,
"itemVariations": ["🥓","🦖", "🦋", "🍁"],
"animationIterationCount": 1
}

Just an image (from external source)

{
"numberOfItems": 25,
"itemVariations": [],
"imageItems": [{
     "url": "https://premiumcoding.com/CSSTricks/fallingLeaves/leaf.png",
     "size": 40
}],

"animationIterationCount": 1
}

Images and emojis (with large emojis)

{
"numberOfItems": 15,
"fontSize": "2.5em",
"itemVariations": ["🦋", "🍁"],
"imageItems": [{
"url": "https://premiumcoding.com/CSSTricks/fallingLeaves/leaf.png",
"size": 40
}]
}

Multiple images (images uploaded to ThoughtFarmer)

Upload the images to a content page so it's in a File Library. Click on the image, and right-click Download URL and click Copy Link Address for the URL parameter.

Trim off the front of the address to make it relative, for example: https://community.thoughtfarmer.com/attachment/744757900000/129263/pickle.png?type=1 becomes /attachment/744757900000/129263/pickle.png?type=1.

{
"numberOfItems": 35,
"itemVariations": [],
"imageItems": [{
"url": "/attachment/744757900000/129263/pickle.png?type=1",
"size": 30
},
{
"url": "/attachment/745074170000/129265/egg.png?type=1",
"size": 60
},
{
"url": "/attachment/745069300000/129264/bino.png?type=1",
"size": 30
}]
}