Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Site Scroll Micro Animation
.mouse
p Scroll
// Based on the Dribbble shot by Nick Buturishvili. Check it out here: https://dribbble.com/shots/2807757-Micro-animation-for-site-scroll
@import url(https://fonts.googleapis.com/css?family=Cabin);
$colorBg: #222a30;
$colorOutline: #ffffff;
$colorOutlineFade: #4e5559;
$widthMouse: 52px;
$heightMouse: 88px;
$borderMouse: 6px;
$posMouse: 8px;
$posText: 2px;
$sizeTrackball: 10px;
$posTrackball: 20px;
$shrinkTrackball: 0.4;
$animDuration: 5s;
@mixin bgGradient {
background:
$colorOutlineFade
linear-gradient(
transparent 0%,
transparent 50%,
$colorOutline 50%,
$colorOutline 100%
);
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: $colorBg;
}
p {
margin-top: 50px;
font-family: "Cabin", sans-serif;
letter-spacing: 12px;
text-indent: 12px;
color: $colorOutline;
animation:
colorText $animDuration ease-out infinite,
nudgeText $animDuration ease-out infinite;
}
.mouse {
@include bgGradient;
position: relative;
width: $widthMouse;
height: $heightMouse;
background-size: 100% 100%;
border-radius: 100px;
background-size: 225%;
animation:
colorSlide $animDuration linear infinite,
nudgeMouse $animDuration ease-out infinite;
&:before,
&:after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
&:before {
width: $widthMouse - $borderMouse;
height: $heightMouse - $borderMouse;
background-color: $colorBg;
border-radius: 100px;
}
&:after {
background-color: $colorOutline;
width: $sizeTrackball;
height: $sizeTrackball;
border-radius: 100%;
animation: trackBallSlide $animDuration linear infinite;
}
}
@keyframes colorSlide {
0% { background-position: 0% 100%; }
20% { background-position: 0% 0%; }
21% { background-color: $colorOutlineFade; }
29.99% {
background-color: $colorOutline;
background-position: 0% 0%;
}
30% {
background-color: $colorOutlineFade;
background-position: 0% 100%;
}
50% { background-position: 0% 0%; }
51% { background-color: $colorOutlineFade; }
59.99% {
background-color: $colorOutline;
background-position: 0% 0%;
}
60% {
background-color: $colorOutlineFade;
background-position: 0% 100%;
}
80% { background-position: 0% 0%; }
81% { background-color: $colorOutlineFade; }
89.99%, 100% { background-color: $colorOutline; }
}
@keyframes trackBallSlide {
0% {
opacity: 1;
transform: scale(1) translateY(-$posTrackball);
}
6% {
opacity: 1;
transform: scale(0.9) translateY($posTrackball/4);
}
14% {
opacity: 0;
transform: scale($shrinkTrackball) translateY($posTrackball*2);
}
15%, 19% {
opacity: 0;
transform: scale($shrinkTrackball) translateY(-$posTrackball);
}
28%, 29.99% {
opacity: 1;
transform: scale(1) translateY(-$posTrackball);
}
30% {
opacity: 1;
transform: scale(1) translateY(-$posTrackball);
}
36% {
opacity: 1;
transform: scale(0.9) translateY($posTrackball/4);
}
44% {
opacity: 0;
transform: scale($shrinkTrackball) translateY($posTrackball*2);
}
45%, 49% {
opacity: 0;
transform: scale($shrinkTrackball) translateY(-$posTrackball);
}
58%, 59.99% {
opacity: 1;
transform: scale(1) translateY(-$posTrackball);
}
60% {
opacity: 1;
transform: scale(1) translateY(-$posTrackball);
}
66% {
opacity: 1;
transform: scale(0.9) translateY($posTrackball/4);
}
74% {
opacity: 0;
transform: scale($shrinkTrackball) translateY($posTrackball*2);
}
75%, 79% {
opacity: 0;
transform: scale($shrinkTrackball) translateY(-$posTrackball);
}
88%, 100% {
opacity: 1;
transform: scale(1) translateY(-$posTrackball);
}
}
@keyframes nudgeMouse {
0% { transform: translateY(0); }
20% { transform: translateY($posMouse); }
30% { transform: translateY(0); }
50% { transform: translateY($posMouse); }
60% { transform: translateY(0); }
80% { transform: translateY($posMouse); }
90% { transform: translateY(0); }
}
@keyframes nudgeText {
0% { transform: translateY(0); }
20% { transform: translateY($posText); }
30% { transform: translateY(0); }
50% { transform: translateY($posText); }
60% { transform: translateY(0); }
80% { transform: translateY($posText); }
90% { transform: translateY(0); }
}
@keyframes colorText {
21% { color: $colorOutlineFade; }
30% { color: $colorOutline; }
51% { color: $colorOutlineFade; }
60% { color: $colorOutline; }
81% { color: $colorOutlineFade; }
90% { color: $colorOutline; }
}
@ltater21

This comment has been minimized.

Copy link

@ltater21 ltater21 commented Jul 11, 2019

Is there a way to have the mouse icon be transparent that doesn't include a background color? Thanks in advance for your reply.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.