Designing Animated Book Store With JavaScript, jQuery and CSS.

Ghost Together

Published in

UX Planet

5 min readAug 7, 2018

Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

My Coding Books

CSS Visual Dictionary contains visual diagrams for every single CSS property in common use. JavaScript Grammar contains…

jstutorial.medium.com

Last two of my tutorials dealt with css grid and flex. I wrote them so I could learn what the possibilities were and share my findings with others. Then… using CSS grid, flex, JavaScript, jQuery & 🕒 5 hours of my time I created this.

An animation I came up with for the **Learning Curve** bookstore site header. Sure, this doesn’t look anything like a grid. But it’s creative and fun IMO.

Here, a series of simple techniques produce a somewhat dramatic effect.

I always say that:

You don’t need to know everything about a language.
You only need to know a few abstract techniques. But know them well.
Find out what the intended use of that technique is.

Let’s break the design down into separate elements:

Same animation with book images removed via **img { visibility: hidden}** and border added to all elements * { border: 1px solid gray; }

I found this free bike clipart by doing a quick Google Images search. I split it into two separate images and added transparency. I also removed the wheel and animated it separately with a smaller z-index behind the frame.

The key design elements here are:

I used flex for book containers to align (“float”) them to bottom.
The moving part of the bike was animated using jQuery’s animate function: $(“#bike-back”).animate( { width: bike_position_x } );
The wheel was rotated using $(“#wheel”).css( { transform: “rotate(“ + wheel_degree+ ”deg)” } );

Just using these three ideas you can create so many different effects. In web design, most animation you will be doing is either moving an object in 2 dimensions or rotating it. A lot like 2D video games.

Source Code

I don’t want to clutter readability of this tutorial with HTML & CSS source code. But here is the JavaScript that does the the animations:

<script>
    /* Starting parameters, wheel angle, etc. */
    let angle = 100;            // starting wheel rotation angle 
    let bx = 600 + 0;           // starting wheel position 
    let wx = 600 + 50;          // starting bike frame position 
    let T = null;               // animation timer object    /* All resources loaded, now what? */
    window.onload = () => {        /* Animate the bike & the wheel */
        T = setInterval(() => {            $("#wheel").css({
                transform: 'rotate(' + angle + 'deg)',
                left: wx + 'px'}, 0);            /* Move the bike frame */
            $("#bicycle-end").css({left: bx + 'px'}, 0);            /* progress counters */
            angle--; // rotate the wheel by -1 degree
            bx--;    // move the bike by -1px
            wx--;    // move the wheel by -1px             /* bike reached the end, of animation, reset counter */
             if (bx <= 249) {
                clearInterval(T);
                T = null;
            }        }, 5); // animation delay in milliseconds
    }
</script>

Yes, it’s JavaScript. But it’s simple and there is no CSS property clutter.

You can do this using CSS animations. It doesn’t matter. I like the JavaScript approach because it gives me better control over animation counters and I don’t have to clutter my code with moz- and webkit- extensions.

I skipped the CSS and HTML source code but you can still look it up directly from the Learning Curve website, the one I was designing this animation for.

And While We’re On The Subject…

Once you get your animation polished, it’s easy to swap content around just to see what it would be like with different images.

It’s just a cheap way to multiply the value of your work. If anything, I used it as a Twitter post that looked kinda different than the bicycle.

But maybe it resonates with the Beetle drivers? Worth a shot.

Nothing changed, except size and position of the wheel. But those were easy tweaks once the code was written.

On The Following Day…

I continued working on the book store the next day. I’ve been needing to design a product page for my books for a long time. But I procrastinated.

Finally I mustered up some strength and after just a few hours of work I came up with this idea that I am quite pleased with because it’s clean and simple.

The layout for the book product page was created using grid for the primary scaffold and flex inside for the book previews list.

Point taken. Use grid for main skeleton. Use flex as inner cells or its content.

jQuery image hover zoom effect was applied to each flex item > img:

/* on mouse over */
$(".more-content div img").on("mouseover", function() {
    $(this).stop().animate( { top : "-18px", left: "-18px", width: "120%" }, 300, "swing" );
});/* on mouse out */
$(".more-content div img").on("mouseout", function() {
    $(this).stop().animate( { top : "0px", left: "0px", width: "100%" }, 300, "swing" );

I don’t know in how many projects I used this technique in! Animating elements is fun and jQuery certainly makes it quite easy (and cross-browser.)

Welp, it looks kind of interactive and fun. And that’s a lot better than static designs. Animations help with creating an engaging user experience.

Alert users are more likely to buy your product…no fooling though…this is true only if you can keep their interest with useful & high quality products.

Final Thoughts

Don’t be afraid to experiment with completely unique ideas. I find that when I think for myself I produce best design possible. I just need to somehow find that confidence that I can do it.
jQuery is not extinct. It’s helpful, not as a replacement for Vue, React or Angular but when used for its intended purpose. It’s great for cross-browser animation (move & rotate, in particular.)
Use combination of available resources (JavaScript, jQuery, CSS, clipart)