JSFiddle - React, Tailwind, and code Playground

by Lionel T

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="center_line"></div>

<img id="arrow_down" class="bounce" src="http://i.imgur.com/fBa10CH.png">

<div id="pulse_ball">
  <div id="ball"></div>
  <div id="pulse"></div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  background-color:#000;
  height:1000px;
}

#center_line {
	width: 3px;
	background: #dbdbdb;
	margin: 0 auto;
	position: fixed;
	z-index: 0;
}

#pulse {
  width: 10px;
  height: 10px;
  margin: 0 auto;
  border: 5px solid #00abe8;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #00abe8;
  z-index: 10;
  position: relative;
  top: -37px;
}

#ball {
  border: 10px solid #00abe8;
  background: transparent;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  -webkit-animation: pulse 2s ease-out;
  -moz-animation: pulse 2s ease-out;
  animation: pulse 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  z-index: 1;
  opacity: 0;
}
#pulse_ball {
	display: block;
	position: fixed;
	left: 50%;
	z-index: 25;
	top: 48%;
}
@-moz-keyframes pulse {
 0% {
    -moz-transform: scale(0);
    opacity: 0.0;
 }
 25% {
    -moz-transform: scale(0);
    opacity: 0.1;
 }
 50% {
    -moz-transform: scale(0.1);
    opacity: 0.3;
 }
 75% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -moz-transform: scale(1);
    opacity: 0.0;
 }
}

@-webkit-keyframes "pulse" {
 0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
 }
 25% {
    -webkit-transform: scale(0);
    opacity: 0.1;
 }
 50% {
    -webkit-transform: scale(0.1);
    opacity: 0.3;
 }
 75% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
 }
}

#arrow_down {
	display: block;
	width: 64px;
	position: fixed;
	bottom: 10%;
	left: calc(50% - 32px);
}

.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0); }
  40% {
   ...

JavaScript

centerItems();

$(window).resize(function() {
  centerItems();
});

function centerItems() {
  $("#center_line").height($("body").height());
  $("#center_line").offset({left: ($("body").width() / 2) - 1});
  $("#pulse_ball").offset({left: ($("body").width() / 2) - ($("#pulse_ball").width() / 2)});
  $("#arrow_down").offset({left: ($("body").width() / 2) - ($("#arrow_down").width() / 2)});
}