This interactiion was Inspired from this website -> https://www.madeleinedalla.com/
A Pen by Saijo George on CodePen.
Created
May 18, 2021 02:13
-
-
Save CodeMyUI/2d680a8a58c19278f9f43d0dc3ac71b7 to your computer and use it in GitHub Desktop.
Link Hover Interaction | SplittingJS
This file contains hidden or 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
| <nav> | |
| <a href="#" class="nav__link"> | |
| <span class="nav__link--text" data-splitting>Home</span> | |
| <span class="nav__link--text" data-splitting>Home</span> | |
| </a> | |
| <a href="#" class="nav__link"> | |
| <span class="nav__link--text" data-splitting>About</span> | |
| <span class="nav__link--text" data-splitting>About</span> | |
| </a> | |
| <a href="#" class="nav__link"> | |
| <span class="nav__link--text" data-splitting>Contact</span> | |
| <span class="nav__link--text" data-splitting>Contact</span> | |
| </a> | |
| </nav> | |
| <div class="support"> | |
| <a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a> | |
| <a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a> | |
| </div> |
This file contains hidden or 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
| console.clear(); | |
| Splitting(); |
This file contains hidden or 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://unpkg.com/splitting/dist/splitting.min.js"></script> |
This file contains hidden or 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
| @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400&display=swap"); | |
| @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap"); | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| :root { | |
| font-size: 16px; | |
| --link-translate-x: 3rem; | |
| } | |
| body { | |
| width: 100%; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background: #000; | |
| overflow: hidden; | |
| } | |
| a { | |
| text-decoration: none; | |
| &:focus { | |
| outline: none; | |
| border: none; | |
| } | |
| } | |
| .nav { | |
| &__link { | |
| font-size: 5rem; | |
| color: #fff; | |
| display: grid; | |
| font-style: italic; | |
| &--text { | |
| grid-area: 1/1; | |
| transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), | |
| transform 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95); | |
| .word { | |
| white-space: nowrap; | |
| } | |
| .char { | |
| display: inline-block; | |
| transform-origin: 50% 50% 0.4em; | |
| transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1); | |
| transition-delay: calc(0ms + var(--char-index) * 25ms); | |
| backface-visibility: hidden; | |
| margin: 0 -0.02em; | |
| } | |
| } | |
| &--text:nth-child(1) { | |
| font-family: "Playfair Display"; | |
| font-weight: 500; | |
| } | |
| &--text:nth-child(2) { | |
| font-family: "Roboto"; | |
| font-weight: 500; | |
| opacity: 0; | |
| .char { | |
| transform: rotate3d(1, -0.5, 0, 90deg); | |
| // OR | |
| // transform: rotateX(90deg) rotateY(-45deg); | |
| } | |
| } | |
| &:hover { | |
| .nav__link--text { | |
| transform: translateX(var(--link-translate-x)); | |
| &:nth-child(1) { | |
| opacity: 0; | |
| .char { | |
| transform: rotate3d(1, 0.3, 0, -90deg); | |
| // OR | |
| // transform: rotateX(-90deg) rotateY(-27deg); | |
| } | |
| } | |
| &:nth-child(2) { | |
| opacity: 1; | |
| .char { | |
| transform: rotate3d(0, 0, 0, 90deg); | |
| // OR | |
| // transform: rotate(0); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @media only screen and (max-width: 20rem) { | |
| :root { | |
| font-size: 10px; | |
| --link-translate-x: 2rem; | |
| } | |
| } | |
| .support { | |
| position: absolute; | |
| right: 10px; | |
| bottom: 10px; | |
| padding: 10px; | |
| display: flex; | |
| a { | |
| margin: 0 10px; | |
| color: #fff; | |
| font-size: 1.8rem; | |
| backface-visibility: hidden; | |
| transition: all 150ms ease; | |
| &:hover { | |
| transform: scale(1.1); | |
| } | |
| } | |
| } |
This file contains hidden or 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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment