HTML5 Flipbooks with jQuery Animations

There is a lot of jabber about the benefits of creating HTML5 flipbooks with jQuery on this blog, but today we want to focus on the how. The good news is you don’t need any coding skills to brings your flipbooks to life with jQuery animation.

There are plenty of software packages that take care of the technical stuff for you. So, instead of worrying about that, let’s look at what you do need to do to build your own, fully animated flipbook with jQuery.

Choosing software with jQuery features

Unless you’re going to code your own jQuery flipbook, the the first thing you’ll need to do is choose a software package that comes with animation features. All flipbook makers will animate the turning of your pages automatically, but we want to take that extra step today and animations to the pages themselves.

There are plenty of flipbook makers that fit into this category, but we’ll be looking at Fliphtml5 – perhaps the best-known application – for the sake of example today.

If you want a visual look at how Fliphtml5 animations work, you can take a look at this video:

What kind of animations can I put into my HTML5 flipbooks?

If you watched the video, you’ll see the kind of animations you have available include move in effects, fade in, fade out, mouse click events and various other types of animation. These effects are taken right out of the jQuery library and your flipbook software simply lets you tap into these within a few clicks.

Here is a rundown of how these animations work:

Elements you can animate

In theory, you can animate any element you add into your flipbook through your flipbook maker software package – for example, fading in a video. That said, most of your animations will be text, images or other static visuals.

Normally, this means fading in elements, moving them from one position to another or making an element appear when users click something else.

There are various other animation effect you can use, depending on the features your software comes with. So test out some free trials before you end up paying for any software.

Event triggers

Your animations will be triggered by mouse actions and movements – eg: clicking on an element. These are the events you can use to trigger your animations:

On mouse click: Starts the animation when a user clicks your chosen element; presses the mouse down and releases.

One mouse down: When a user presses the mouse down (animation runs even if user doesn’t release).

On mouse up: When a user releases the mouse button over an element, even if they pressed it over another one.

Note: Chances are you’ll only need the “On mouse click” trigger from these first three, but take the time to get a feel for the other two.

On mouse move: Animates when a user moves the mouse.

On mouse enter: Runs your animation when a user moves the mouse over an element.

Keeping it minimal with jQuery animations

The worst thing you can do for your flipbooks is get carried away with the jQuery and start animating elements for the sake of it. The trick is to use as few animations as necessary to create the kind of flipbook you need. By taking the minimal approach your flipbooks will perform faster and you run less risk of confusing readers.

If you’re looking to create a digital magazine that looks and feels like a print edition, animations might not be the way to go. In this case, you may be better of sticking to the static format and focusing on strong images for engagement.

If you’re using a catalog maker to create a catalog for luxury products, on the other hand, it can be a nice touch to have product images fade in and slide from one direction and description text from another. It all depends on the type of publication you’re trying to create and the stylistic ideas your reader will associate with them.

So, as you can see from the points we’ve looked at today, anyone really can put custom jQuery animations into their flipping book HTML5. There’s nothing technical about it with the right software on board. What’s more challenging is finding the right balance between creativity and minimalism to get the most out of subtle animation effects.