How I designed an animated book store with JavaScript, jQuery, and CSS.

JavaScript Teacher

Oct 19, 2019·5 min read

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.

The 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. Using grid, flex, jquery and 🕒 5 hours of my time, I created this.

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:

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)” } );

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 and CSS source code. But here is the JavaScript that does 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 these using CSS animations. It doesn’t matter. I like the JavaScript approach, because it gives me better control over animation counters. 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 from the Learning Curve website. This is the website for which I was designing this animation.

And While We’re On The Subject…

Once you get your animation polished, it’s easy to swap content around 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 the 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 bookstore the next day. I’ve needed to design a product page for my books for a long time. After a few hours I came up with this idea:

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

Point taken. Use CSS grid for the 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! Animating elements is fun and jQuery certainly makes it quite easy (and cross-browser.)

Welp, it looks 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 unique ideas. I find that when I think for myself I produce the best design possible. I need to find somehow 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 and rotate, in particular.)
• Use a combination of available resources (JavaScript, jQuery, CSS, clipart)

Follow me on Social Networks for More Freemium Tutorials!

You can follow me on Twitter for occasional weekend PDF giveaways.

Follow me on Instagram for a quick hit of JavaScript.

You can follow me on Facebook for free coding stuff.

Limited Time Offer

The diagrams in this tutorial were influenced directly by the manuscript!

28% OFF

Medium Readers Only:

CSS Visual Dictionary

== grab a copy ==

Contains all CSS properties.