DEV Community

pritudev
pritudev

Posted on

Tilt Effect using tilt.js

First of all what is tilt js it's a tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery. you don't need jQuery or any css to create this thing it's very easy to create.

Tilt js has a lot of methods to create different type of tilt effects

Install Tilt js

# Using  yarn
yarn add tilt.js

# Install yarn
npm install -g yarn
Enter fullscreen mode Exit fullscreen mode

Let's head over to coding section...

Step 1 - Add HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tilt Effect using tilt js</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- Let's create a div box -->
    <div class="flex-container">
      <a
        data-tilt
        data-tilt-glare="true"
        data-tilt-transition="true"
        data-tilt-scale="1.1"
        class="c-logo"
        href=" "
        title="Tilt.js demo "
      >
        <span>PrituDev</span>
      </a>
      <!-- Import tilt js -->

      <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/vanilla-tilt.min.js"></script>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Next let's create our box better and add tilt effect using css only no javascript needed...

Step 2 - Add css

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,700');
* {
  box-sizing: border-box;
}
body {
  font-family: 'Fira Sans';
  background: #e7e7e7;
  margin-top: 5%;
}
.flex-container,
.c-logo {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
}
.c-logo {
  width: 300px;
  height: 300px;
  background-color: #7e56ff;
  background-image: linear-gradient(
    150deg,
    #5a00ff 0%,
    #ff1ff7 100%,
    #ff1ff7 100%
  );
  box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
  color: white;
  text-decoration: none;
  font-size: 4em;
  font-weight: 300;
  transform-style: preserve-3d;
  transform: perspective(500px);
  box-shadow: 0 20px 70px -10px rgba(0, 0, 0, 0.7), 0 50px 100px 0 rgba(0, 0, 0, 0.2);
}
.c-logo > span {
  display: block;
  transform: translateZ(50px) scale(0.6);
  text-shadow: -2px -1px 2px rgba(150, 150, 150, 1);
}
.c-logo:hover:after {
  transform: translateZ(-100px);
}
Enter fullscreen mode Exit fullscreen mode

You don't need to write javascript we can just do it using css transform property only, and yeah you are done wasn't that very easy? comment now!.

Discussion (19)

Collapse
thomasbnt profile image
Thomas Bnt

Hello @pritudev ! You can better explain how tilt.js works, add examples, and modify it directly in an app.js that you link to your index.html. it will make better content ! 😄

Collapse
jlopez788 profile image
Juan Lopez

Agreed. I have no idea what tilt JS is nor what it can do. An introductory paragraph along with an example works much better.

Collapse
pritudev profile image
pritudev Author

Sure Next will be better then this one and other one.

Collapse
thomasbnt profile image
Thomas Bnt

Good!

Thread Thread
pritudev profile image
pritudev Author

Thanks

Collapse
motz795 profile image
MOATAZ795

The content is really vague

Collapse
pritudev profile image
pritudev Author

I am apologizing for that.

Thread Thread
motz795 profile image
MOATAZ795

No problem, we all learn

Thread Thread
thomasbnt profile image
Thomas Bnt

Good response 👍🏼📚

Collapse
lukeshiru profile image
LUKESHIRU

I recommend you switch to Vanilla-tilt.js, so you don't need to import jQuery just for that effect.

Cheers!

Collapse
pritudev profile image
pritudev Author

Thanks

Collapse
code913 profile image
code913

there is no tutorial, just code to copy...

Collapse
pritudev profile image
pritudev Author

Sorry for that next time I'll try to be better 😔

Collapse
leouofa profile image
Leonid Medovyy

You got a ton of engagement for your first post, maybe not writing an intro was a good idea after all lol.

Collapse
moaaz_ibrahim profile image
Moaaz Ibrahim

Actually it'll be more effictive if you just write an introduction and a brief summary about tilt.js
Like what is tilts.js in the first place ?
keep going great contribution :)

Collapse
pritudev profile image
pritudev Author

Thanks

Collapse
adzetko profile image
Maxim "Adzy" Hohengarten

I clicked on this post because I was curious about what do you call a "Tilt effect" and what is Tilt.js. I'd love to read how you would describe that, don't be shy!

Collapse
pritudev profile image
pritudev Author

Sure i am gonna edit that post

Collapse
pritudev profile image
pritudev Author

Everyone I have Updated the whole post with brief information.