OMONP#1: Build a 3D Bank Card With Vanilla-tilt.js

Make your cards stand-out with this quick JavaScript tutorial

Welcome to issue #1 One Minute, One NPM Package, where you discover cool NPM packages and how to use them in one minute.

🔛⏭️

What we are going to build

THE PROBLEM

The payment form on our website looks a little bit dull. Customers get bored and don’t input their card details. How can we make it more engaging?

Our boring static card.

A SOLUTION

We are going to use Vanilla-tilt.js to make our card move in 3 dimensions when hovering it with our mouse or tilting our handheld device.

It is really simple:

1. Import it in our project

npm install vanilla-tilt

or import it from a CDN as in the example:

import vanillaTilt from "https://cdn.skypack.dev/vanilla-tilt@1.7.0";

2. Target a DOM element as a Vanilla-tilt container. The second argument is the options object.

const card = document.querySelector("#card");
VanillaTilt.init(card, {
  max: 10,
  speed: 1000,
  perspective: 700
});

And that’s really it! Here is our final result:

Our cool cat 3D moving card! Let’s spend all our $$!

If you liked this story, you may also like

OMONP#2

🔛⏭️