This interactiion was Inspired from this website -> https://www.madeleinedalla.com/
A Pen by Saijo George on CodePen.
<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 interactiion was Inspired from this website -> https://www.madeleinedalla.com/
A Pen by Saijo George on CodePen.
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&display=swap"rel="stylesheet" rel="stylesheet" /> |