CSS Site Scroll Micro Animation

css-site-scroll-micro-animation.markdown

CSS Site Scroll Micro Animation

This fantastic dribble shot by Nick Buturishvili, but built with only CSS (Chrome and Safari approved).

A Pen by Ryan Mulligan on CodePen.

License.

index.jade

.mouse
p Scroll

script.js

// Based on the Dribbble shot by Nick Buturishvili. Check it out here: https://dribbble.com/shots/2807757-Micro-animation-for-site-scroll

style.scss

@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; }
}