Start Free Trial
Rise Vision Blog

Product News, Customer Stories and Updates from Rise Vision

Create a Floating Effect in Your Presentations

create floating effect digital signage presentation

Using a jQuery plugin called jqFloat.js, you can create floating effects like the one's in this Presentation. It works by utilizing jQuery's animate function to animate elements to different positions indefinitely, giving them the illusion that they're floating. This demo is the same one provided on the plugin's web site, and it highlights some interesting ways in which the plugin can be used.

If you'd like to experiment with some of your own ideas, you can download the plugin from here. Don't forget to start by including it in your digital signage Presentation:

<script src="path/to/jqfloat.js"></script>

From there, add the HTML that you would like to appear floated. If that HTML element had an ID of balloon, for example, you would add the following jQuery code to then "float" it:


You can configure the floating object by specifying its maximum horizontal floating area (width), maximum vertical floating area (height), maximum floating speed (speed), or its distance from the bottom (minHeight):


You can also start or stop the animation (like the balloon in the demo Presentation) by passing play or stop:


The plugin takes care of the rest! Pretty neat, huh?

Featured Image Source

Keep your displays interesting - pick new templates every week!

Every week, we send Template recommendations that will make you look great and improve your audience experience. And the best part, they save up to 16 hours of content creation time every week.

Not convinced? Check out the email we sent last week.