Card Parallax Effect Using Vanilla Js

Post CreditA.S -
0

 Well, hello front end designer, this is themidom, today in this post, we are gonna create a Card Parallax Effect Using Vanilla Js, and believe me, it's gonna be really easy. Without any delay, let's get going. 

Card Parallax Effect Using Vanilla Js


Now, we are going to write an initial snippet of HTML


 <!DOCTYPE html>   
  <html lang="en">   
  <head>   
   <meta charset="UTF-8">   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">   
   <title>Card effect</title>   
 </head>  
 <body>  
 </body>  
 </html>

Now, we are going to write HTML tags inside the body with some classes.

 <h1>Courses you prefer to Buy</h1>  
   <div class="container">  
     <div class="card">  
       <h2 class="name">Python</h2>  
       <a href="https://themidom.in" class="Try">Try Now</a>  
       <div class="circle"></div>  
       <img style="height: 150px;" src="python.png" class="product" alt="">  
     </div>  
     <div class="card">  
       <h2 class="name">Graphic Design</h2>  
       <a href="https://themidom.in" class="Try">Try Now</a>  
       <div class="circle"></div>  
       <img style="height: 200px;" src="web.png" class="product2" alt="">  
     </div>  
     <div class="card">  
       <h2 class="name">Hacking</h2>  
       <a href="https://themidom.in" class="Try">Try Now</a>  
       <div class="circle"></div>  
       <img style="height: 300px;" src="hacker.png" class="product" alt="">  
     </div>  
   </div>
Now, we need to style the HTML inside the style tag, which is inside of the head tag.

 <style>  
     * {  
       margin: 0;  
       padding: 0;  
       font-family: sans-serif;  
     }  
     h1{  
       position: absolute;  
       top: 5px;  
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;  
     }  
     body {  
       display: flex;  
       justify-content: center;  
       align-items: center;  
       min-height: 100vh;  
     }  
     .container {  
       position: relative;  
       display: flex;  
       justify-content: center;  
       align-items: center;  
       flex-wrap: wrap;  
       width: 1200px;  
       transform-style: preserve-3d;  
     }  
     .container .card {  
       position: relative;  
       width: 300px;  
       height: 400px;  
       margin: 40px;  
       box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px, rgb(0 0 0 / 73%) 0px 16px 10px -10px;  
       background: #b7dbf8;  
       border-radius: 20px;  
       transform-style: preserve-3d;  
     }  
     .container .card::before {  
       content: 'Best';  
       position: absolute;  
       top: 20px;  
       left: 20px;  
       font-size: 6em;  
       font-weight: 800;  
       color: rgb(89, 0, 255);  
       font-style: italic;  
       opacity: 0;  
       transition: .2s;  
     }  
     .container .card::after {  
       content: 'Collection';  
       position: absolute;  
       bottom: 20px;  
       right: 5px;  
       font-size: 3em;  
       font-weight: 600;  
       color: rgb(89, 0, 255);  
       font-style: italic;  
       opacity: 0;  
       transition: .5s;  
     }  
     .container .card:hover::before,  
     .container .card:hover::after {  
       opacity: 0.2;  
     }  
     .container .card .name {  
       position: absolute;  
       top: 0;  
       left: 0;  
       text-align: center;  
       color: #fff;  
       transform-style: preserve-3d;  
       width: 100%;  
       transform: translate3d(0, 0, 75px);  
       transition: 0.5s;  
       opacity: 0;  
       z-index: 10;  
     }  
     .container .card:hover .name {  
       top: 40px;  
       opacity: 1;  
     }  
     .container .card .Try {  
       position: absolute;  
       bottom: 0;  
       left: 50%;  
       transform-style: preserve-3d;  
       transform: translate3d(-50%, 0, 75px);  
       color: #fff;  
       background: #333;  
       box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px, rgb(0 0 0 / 73%) 0px 16px 10px -10px;  
       padding: 10px 25px;  
       border-radius: 30px;  
       text-decoration: none;  
       transition: 0.5s;  
       opacity: 0;  
       z-index: 10;  
     }  
     .container .card:hover .Try {  
       bottom: 30px;  
       opacity: 1;  
     }  
     .container .card .circle {  
       position: absolute;  
       top: 50%;  
       left: 50%;  
       width: 200px;  
       height: 200px;  
       border-radius: 50%;  
       transition: 0.5s;  
       background: #fff;  
       transform-style: preserve-3d;  
       z-index: 10;  
       opacity: 1;  
       transform: translate3d(-50%, -50%, 0px);  
     }  
     .container .card .product {  
       position: absolute;  
       top: 50%;  
       left: 50%;  
       max-width: 300px;  
       transition: 0.5s;  
       z-index: 11;  
       transition: 0.5s;  
       transform-style: preserve-3d;  
       transform: translate3d(-50%, -50%, 0px) rotate(0deg);  
     }  
     .container .card .product2 {  
       position: absolute;  
       top: 50%;  
       left: 50%;  
       max-width: 300px;  
       transition: 0.5s;  
       z-index: 11;  
       transition: 0.5s;  
       transform-style: preserve-3d;  
       transform: translate3d(-50%, -50%, 0px) rotate(0deg);  
     }  
     .container .card:hover .product {  
       transform: translate3d(-50% -50%, 0px) rotate(0deg);  
     }  
     .container .card:hover .product2 {  
       transform: translate3d(-50% -50%, 0px) rotate(-15deg);  
     }  
     .container .card:nth-child(1) .circle,  
     .container .card:nth-child(1) .Try {  
       background: black;  
     }  
     .container .card:nth-child(2) .circle,  
     .container .card:nth-child(2) .Try {  
       background: purple;  
     }  
     .container .card:nth-child(3) .circle,  
     .container .card:nth-child(3) .Try {  
       background: blue;  
     }  
   </style>
We are mostly done, now we need to add a little bit of javascript. You can add outside of the closing body tag.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"  
     integrity="sha512-SttpKhJqONuBVxbRcuH0wezjuX+BoFoli0yPsnrAADcHsQMW8rkR84ItFHGIkPvhnlRnE2FaifDOUw+EltbuHg=="  
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>  
   <script type="text/javascript">  
     VanillaTilt.init(document.querySelectorAll(".card"), {  
       max: 30,  
       speed: 500  
     });  
   </script>
And we are done. So, Here's the full code.

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Parallox affect using vanilla</title>  
   <style>  
     * {  
       margin: 0;  
       padding: 0;  
       font-family: sans-serif;  
     }  
     h1{  
       position: absolute;  
       top: 5px;  
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;  
     }  
     body {  
       display: flex;  
       justify-content: center;  
       align-items: center;  
       min-height: 100vh;  
     }  
     .container {  
       position: relative;  
       display: flex;  
       justify-content: center;  
       align-items: center;  
       flex-wrap: wrap;  
       width: 1200px;  
       transform-style: preserve-3d;  
     }  
     .container .card {  
       position: relative;  
       width: 300px;  
       height: 400px;  
       margin: 40px;  
       box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px, rgb(0 0 0 / 73%) 0px 16px 10px -10px;  
       background: #b7dbf8;  
       border-radius: 20px;  
       transform-style: preserve-3d;  
     }  
     .container .card::before {  
       content: 'Best';  
       position: absolute;  
       top: 20px;  
       left: 20px;  
       font-size: 6em;  
       font-weight: 800;  
       color: rgb(89, 0, 255);  
       font-style: italic;  
       opacity: 0;  
       transition: .2s;  
     }  
     .container .card::after {  
       content: 'Collection';  
       position: absolute;  
       bottom: 20px;  
       right: 5px;  
       font-size: 3em;  
       font-weight: 600;  
       color: rgb(89, 0, 255);  
       font-style: italic;  
       opacity: 0;  
       transition: .5s;  
     }  
     .container .card:hover::before,  
     .container .card:hover::after {  
       opacity: 0.2;  
     }  
     .container .card .name {  
       position: absolute;  
       top: 0;  
       left: 0;  
       text-align: center;  
       color: #fff;  
       transform-style: preserve-3d;  
       width: 100%;  
       transform: translate3d(0, 0, 75px);  
       transition: 0.5s;  
       opacity: 0;  
       z-index: 10;  
     }  
     .container .card:hover .name {  
       top: 40px;  
       opacity: 1;  
     }  
     .container .card .Try {  
       position: absolute;  
       bottom: 0;  
       left: 50%;  
       transform-style: preserve-3d;  
       transform: translate3d(-50%, 0, 75px);  
       color: #fff;  
       background: #333;  
       box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px, rgb(0 0 0 / 73%) 0px 16px 10px -10px;  
       padding: 10px 25px;  
       border-radius: 30px;  
       text-decoration: none;  
       transition: 0.5s;  
       opacity: 0;  
       z-index: 10;  
     }  
     .container .card:hover .Try {  
       bottom: 30px;  
       opacity: 1;  
     }  
     .container .card .circle {  
       position: absolute;  
       top: 50%;  
       left: 50%;  
       width: 200px;  
       height: 200px;  
       border-radius: 50%;  
       transition: 0.5s;  
       background: #fff;  
       transform-style: preserve-3d;  
       z-index: 10;  
       opacity: 1;  
       transform: translate3d(-50%, -50%, 0px);  
     }  
     .container .card .product {  
       position: absolute;  
       top: 50%;  
       left: 50%;  
       max-width: 300px;  
       transition: 0.5s;  
       z-index: 11;  
       transition: 0.5s;  
       transform-style: preserve-3d;  
       transform: translate3d(-50%, -50%, 0px) rotate(0deg);  
     }  
     .container .card .product2 {  
       position: absolute;  
       top: 50%;  
       left: 50%;  
       max-width: 300px;  
       transition: 0.5s;  
       z-index: 11;  
       transition: 0.5s;  
       transform-style: preserve-3d;  
       transform: translate3d(-50%, -50%, 0px) rotate(0deg);  
     }  
     .container .card:hover .product {  
       transform: translate3d(-50% -50%, 0px) rotate(0deg);  
     }  
     .container .card:hover .product2 {  
       transform: translate3d(-50% -50%, 0px) rotate(-15deg);  
     }  
     .container .card:nth-child(1) .circle,  
     .container .card:nth-child(1) .Try {  
       background: black;  
     }  
     .container .card:nth-child(2) .circle,  
     .container .card:nth-child(2) .Try {  
       background: purple;  
     }  
     .container .card:nth-child(3) .circle,  
     .container .card:nth-child(3) .Try {  
       background: blue;  
     }  
   </style>  
 </head>  
 <body>  
   <h1>Courses you prefer to Buy</h1>  
   <div class="container">  
     <div class="card">  
       <h2 class="name">Python</h2>  
       <a href="https://themidom.in" class="Try">Try Now</a>  
       <div class="circle"></div>  
       <img style="height: 150px;" src="python.png" class="product" alt="">  
     </div>  
     <div class="card">  
       <h2 class="name">Graphic Design</h2>  
       <a href="https://themidom.in" class="Try">Try Now</a>  
       <div class="circle"></div>  
       <img style="height: 200px;" src="web.png" class="product2" alt="">  
     </div>  
     <div class="card">  
       <h2 class="name">Hacking</h2>  
       <a href="https://themidom.in" class="Try">Try Now</a>  
       <div class="circle"></div>  
       <img style="height: 300px;" src="hacker.png" class="product" alt="">  
     </div>  
   </div>  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"  
     integrity="sha512-SttpKhJqONuBVxbRcuH0wezjuX+BoFoli0yPsnrAADcHsQMW8rkR84ItFHGIkPvhnlRnE2FaifDOUw+EltbuHg=="  
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>  
   <script type="text/javascript">  
     VanillaTilt.init(document.querySelectorAll(".card"), {  
       max: 30,  
       speed: 500  
     });  
   </script>  
 </body>  
 </html>
Now, if you want you can change the properties. And That's it for this post, see ya in the next.
                                                --Themidom

Post a Comment

If you have have any doubt please let me know

Previous Post Next Post

Ads

Ads