3D Tilt Parallax Effect with Mouse Movement

Learn how to create the 3D tilt parallax effect while moving a mouse cursor. Developed using html, css, vanilla-tilt.js and JavaScript. Demo and download available.

Demo Download

Author Ryan Yu
Hits
Created MARCH 29, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

Include Dependency

<script src='https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.4.1/vanilla-tilt.min.js'></script>

CSS Code

body {
  background: #2b5876;
  background: linear-gradient(to right, #4e4376, #2b5876);
}

.o-main {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.c-tilt {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  position: relative;
  -webkit-transform: perspective(700px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
          transform: perspective(700px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 100vw;
  will-change: transform;
}

.c-ryanyu {
  background-color: transparent;
  display: block;
  font-family: "Kalam", cursive;
  height: 26.25rem;
  margin: 0 auto;
  position: relative;
  text-align: center;
  -webkit-transform: translateZ(20px);
          transform: translateZ(20px);
  width: 26.25rem;
}
.c-ryanyu img {
  background-color: white;
  border: 0.625rem solid #fa9600;
  border-radius: 50%;
  height: 25rem;
  -o-object-fit: contain;
     object-fit: contain;
  width: 25rem;
}

.c-ryanyu-name-shadow {
  color: white;
  font-size: 150px;
  position: absolute;
  top: 292px;
  -webkit-transform: translateZ(70px);
          transform: translateZ(70px);
}

.c-ryanyu-name {
  color: #404040;
  font-size: 150px;
  position: absolute;
  top: 290px;
  -webkit-transform: translateZ(80px);
          transform: translateZ(80px);
}

.c-fe30 {
  -webkit-animation: fe30-anime 1s ease-in-out 4s forwards;
          animation: fe30-anime 1s ease-in-out 4s forwards;
  color: #fa9600;
  font-size: 1.5rem;
  margin-top: 3.125rem;
  opacity: 0;
  text-align: center;
  -webkit-transform: translateZ(30px);
          transform: translateZ(30px);
}
.c-fe30 a {
  color: white;
}
.c-fe30 a:hover {
  text-decoration: none;
}

@-webkit-keyframes fe30-anime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fe30-anime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

HTML Snippet

<div class="c-tilt">
  <a class="c-ryanyu" target="_blank">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/ryan-logo.svg" alt="Ryan Yu" />
  </a>
  <div class="c-ryanyu-name-shadow">Ryan Yu</div>
  <div class="c-ryanyu-name">Ryan Yu</div>
</div>

JavaScript

VanillaTilt.init(document.querySelector('.c-tilt'), {
  max: 25,
  perspective: 700,
  speed: 400
});

Preview

3D Tilt Parallax Effect with Mouse Movement

Advertisement

Google Matched Content...