Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created May 18, 2021 11:07
Show Gist options
  • Save CodeMyUI/4c12422077784c64b0102f6e96244368 to your computer and use it in GitHub Desktop.
Save CodeMyUI/4c12422077784c64b0102f6e96244368 to your computer and use it in GitHub Desktop.
Link Hover Interaction | SplittingJS
<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>
console.clear();
Splitting();
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
@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);
}
}
}
<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&amp;display=swap"rel="stylesheet" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment