EPeak Daily

How I designed an animated e-book retailer with JavaScript, jQuery, and CSS.

0 7

The final two of my tutorials handled CSS grid and flex. I wrote them so I may study what the probabilities had been and share my findings with others. Then… utilizing CSS grid, flex, JavaScript, jQuery and 🕒 5 hours of my time, I created this.

Right here, a sequence of easy strategies produce a considerably dramatic impact.

I at all times say that:

  • You don’t have to know every little thing a couple of language.
  • You solely have to know a couple of summary strategies. However know them properly.
  • Discover out what the supposed use of that method is.

Let’s break the design down into separate components:

Identical animation with e-book photos eliminated through img { visibility: hidden} and border added to all components * { border: 1px strong grey; }

I discovered this free bike clipart by doing a fast Google Photographs search. I cut up it into two separate photos and added transparency. I additionally eliminated the wheel and animated it individually with a smaller z-index behind the body.

The important thing design components listed here are:

  • I used flex for e-book containers to align (“float”) them to backside.
  • The shifting a part of the bike was animated utilizing jQuery’s animate perform: $(“#bike-back”).animate( { width: bike_position_x } );
  • The wheel was rotated utilizing $(“#wheel”).css( { rework: “rotate(“ + wheel_degree+ ”deg)” } );

Utilizing these three concepts, you’ll be able to create so many alternative results. In internet design, most animation you can be doing is both shifting an object in 2 dimensions or rotating it. Rather a lot like 2D video video games.

Supply Code

I don’t need to muddle readability of this tutorial with HTML and CSS supply code. However right here is the JavaScript that does the animations:

/* Beginning parameters, wheel angle, and so on. */
let angle = 100; // beginning wheel rotation angle
let bx = 600 + 0; // beginning wheel place
let wx = 600 + 50; // beginning bike body place
let T = null; // animation timer object
/* All sources loaded, now what? */
window.onload = () => {
/* Animate the bike & the wheel */
T = setInterval(() => {
rework: 'rotate(' + angle + 'deg)',
left: wx + 'px'}, 0);
/* Transfer the bike body */
$("#bicycle-end").css({left: bx + 'px'}, 0);
/* progress counters */
angle--; // rotate the wheel by -1 diploma
bx--; // transfer the bike by -1px
wx--; // transfer the wheel by -1px
/* bike reached the tip, of animation, reset counter */
if (bx <= 249) {
T = null;
}, 5); // animation delay in milliseconds

Sure, it’s JavaScript. But it surely’s easy, and there’s no CSS property muddle.

You are able to do these utilizing CSS animations. It doesn’t matter. I just like the JavaScript method, as a result of it offers me higher management over animation counters. I don’t must muddle my code with moz- and webkit- extensions.

I skipped the CSS and HTML supply code, however you’ll be able to nonetheless look it up from the Studying Curve web site. That is the web site for which I used to be designing this animation.

And Whereas We’re On The Topic…

When you get your animation polished, it’s simple to swap content material round to see what it might be like with totally different photos.

It’s only a low cost solution to multiply the worth of your work. If something, I used it as a Twitter submit that seemed kinda totally different than the bicycle.

However perhaps it resonates with the Beetle drivers? Price a shot.

Nothing modified, besides the scale and place of the wheel. However these had been simple tweaks as soon as the code was written.

On The Following Day…

I continued engaged on the bookstore the following day. I’ve wanted to design a product web page for my books for a very long time. After a couple of hours I got here up with this concept:

The structure for the e-book product web page was created utilizing CSS grid for the first scaffold and flex inside for the e-book previews checklist.

Level taken. Use CSS grid for the principle skeleton. Use flex as inside cells or its content material.

jQuery picture hover zoom impact was utilized to every flex merchandise > img:

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

I don’t know in what number of tasks I used this method! Animating components is enjoyable and jQuery actually makes it fairly simple (and cross-browser.)

Welp, it appears interactive and enjoyable. And that’s rather a lot higher than static designs. Animations assist with creating a fascinating person expertise.

Alert customers usually tend to purchase your product…no fooling although…that is true provided that you’ll be able to preserve their curiosity with helpful & high-quality merchandise.

Last Ideas

  • Don’t be afraid to experiment with distinctive concepts. I discover that once I suppose for myself I produce the very best design attainable. I would like to search out in some way that confidence that I can do it.
  • jQuery is just not extinct. It’s useful, not as a alternative for Vue, React, or Angular however when used for its supposed function. It’s nice for cross-browser animation (transfer and rotate, particularly.)
  • Use a mixture of accessible sources (JavaScript, jQuery, CSS, clipart)

Observe me on Social Networks for Extra Freemium Tutorials!

You may comply with me on Twitter for infrequent weekend PDF giveaways.

Observe me on Instagram for a fast hit of JavaScript.

You may comply with me on Fb free of charge coding stuff.

When you want to assist my work, CSS Visible Dictionary is my e-book.

Supply hyperlink

Leave A Reply

Hey there!

Sign in

Forgot password?

Processing files…