Last two of my tutorials dealt with 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, , & 🕒 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:

Same animation with 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 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:

/* 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(() => {
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) {
T = null;
        }, 5); // animation delay in milliseconds

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 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 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)

Follow Me On Social Networks

You can, 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.

If you wish to support my work CSS Visual Dictionary is my book.

Source link—-819cc2aaeee0—4


Please enter your comment!
Please enter your name here