A Pen by Swapnil V. Patil on CodePen.
Created
November 12, 2018 19:29
-
-
Save patilswapnilv/dd0e89ce14a43e29e644e205493ce1a3 to your computer and use it in GitHub Desktop.
Text clipping and perspective parallax
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="header"> | |
| <h1 class="header__initials">SP</h1> | |
| <div class="header__title"> | |
| <h2>Swapnil Patil</h2> | |
| <p>Web Developer & UX Designer</p> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var titleWrap = document.getElementsByClassName('header__initials'); | |
| document.body.addEventListener('mousemove', cursorPositionHandler); | |
| function cursorPositionHandler(e) { | |
| var decimalX = e.clientX / window.innerWidth - 0.5; | |
| var decimalY = e.clientY / window.innerHeight - 0.5; | |
| TweenMax.to(titleWrap, 0.5, { rotationY: 10 * decimalX, rotationX: 10 * decimalY, ease: Quad.easeOut, transformPerspective: 700, transformOrigin: "center" }); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: "Poppins", sans-serif; | |
| width: 100%; | |
| height: 100vh; | |
| overflow: hidden; | |
| background-color: #f4f4f4; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| &__initials { | |
| display: inline-block; | |
| font-size: 85vh; | |
| line-hieght: 1em; | |
| color: #e2e6ee; | |
| background: url("https://cdn.dribbble.com/users/566524/screenshots/4169266/purppple01.gif"); | |
| -webkit-text-fill-color: transparent; | |
| -webkit-background-clip: text; | |
| background-size: contain; | |
| background-position: center; | |
| } | |
| &__title { | |
| position: absolute; | |
| text-align: center; | |
| color: #44149c; | |
| h2 { | |
| font-size: 48px; | |
| letter-spacing: 1.2px; | |
| margin-bottom: 0; | |
| } | |
| p { | |
| font-size: 14px; | |
| letter-spacing: 0.7px; | |
| margin: 0; | |
| text-transform: uppercase; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment