<div class="sp-container">
    <div class="sp-content">
  <div class="sp-globe"></div>
  <h2 class="frame-1">AWESOME</h2>
  <h2 class="frame-2">TEXT ANIMATION EFFECT</h2>
  <h2 class="frame-3">BUILD WITH CSS3</h2>
  <h2 class="frame-4">TEST IT!</h2>
  <h2 class="frame-5">
   <span>FORK,</span>
   <span>CHANGE,</span>
   <span>EXPERIANCE.</span>
  </h2>
  <a class="sp-circle-link" href="/">by Nick</a>
    </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Barlow');

body {
    background: #310404 url(https://i.ytimg.com/vi/wOvQAhzWCrM/maxresdefault.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Barlow', sans-serif;
}
.container {
    width: 100%;
    position: relative;
    overflow: hidden;
}
a {
    text-decoration: none;
}
h1.main, p.demos {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.sp-container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 1000;
}
.sp-container h2 {
    position: absolute;
    top: 50%;
    line-height: 100px;
    height: 90px;
    margin-top: -50px;
    font-size: 90px;
    width: 100%;
    text-align: center;
    color: transparent;
    -webkit-animation: blurFadeInOut 3s ease-in backwards;
    -moz-animation: blurFadeInOut 3s ease-in backwards;
    -ms-animation: blurFadeInOut 3s ease-in backwards;
    animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
}
.sp-container h2.frame-2 {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}
.sp-container h2.frame-3 {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.sp-container h2.frame-4 {
    font-size: 200px;
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s;
}
.sp-container h2.frame-5 {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
    color: transparent;
    text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {
    -webkit-animation: blurFadeIn 3s ease-in 12s backwards;
    -moz-animation: blurFadeIn 1s ease-in 12s backwards;
    -ms-animation: blurFadeIn 3s ease-in 12s backwards;
    animation: blurFadeIn 3s ease-in 12s backwards;
    color: transparent;
    text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {
    -webkit-animation-delay: 13s;
    -moz-animation-delay: 13s;
    -ms-animation-delay: 13s;
    animation-delay: 13s;
}
.sp-container h2.frame-5 span:nth-child(3) {
    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
    -ms-animation-delay: 14s;
    animation-delay: 14s;
}
.sp-globe {
    position: absolute;
    width: 282px;
    height: 273px;
    left: 50%;
    top: 50%;
    margin: -137px 0 0 -141px;
    background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;
    -webkit-animation: fadeInBack 3.6s linear 14s backwards;
    -moz-animation: fadeInBack 3.6s linear 14s backwards;
    -ms-animation: fadeInBack 3.6s linear 14s backwards;
    animation: fadeInBack 3.6s linear 14s backwards;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
    -webkit-transform: scale(5);
    -moz-transform: scale(5);
    -o-transform: scale(5);
    -ms-transform: scale(5);
    transform: scale(5);
}
.sp-circle-link {
    position: absolute;
    left: 50%;
    bottom: 100px;
    margin-left: -50px;
    text-align: center;
    line-height: 100px;
    width: 100px;
    height: 100px;
    background: #fff;
    color: #3f1616;
    font-size: 25px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: fadeInRotate 1s linear 16s backwards;
    -moz-animation: fadeInRotate 1s linear 16s backwards;
    -ms-animation: fadeInRotate 1s linear 16s backwards;
    animation: fadeInRotate 1s linear 16s backwards;
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
    background: #85373b;
    color: #fff;
}
/**/

@-webkit-keyframes blurFadeInOut {
    0% {
  opacity: 0;
  text-shadow: 0px 0px 40px #fff;
  -webkit-transform: scale(1.3);
    }
    20%, 75% {
  opacity: 1;
  text-shadow: 0px 0px 1px #fff;
  -webkit-transform: scale(1);
    }
    100% {
  opacity: 0;
  text-shadow: 0px 0px 50px #fff;
  -webkit-transform: scale(0);
    }
}
@-webkit-keyframes blurFadeIn {
    0% {
  opacity: 0;
  text-shadow: 0px 0px 40px #fff;
  -webkit-transform: scale(1.3);
    }
    50% {
  opacity: 0.5;
  text-shadow: 0px 0px 10px #fff;
  -webkit-transform: scale(1.1);
    }
    100% {
  opacity: 1;
  text-shadow: 0px 0px 1px #fff;
  -webkit-transform: scale(1);
    }
}
@-webkit-keyframes fadeInBack {
    0% {
  opacity: 0;
  -webkit-transform: scale(0);
    }
    50% {
  opacity: 0.4;
  -webkit-transform: scale(2);
    }
    100% {
  opacity: 0.2;
  -webkit-transform: scale(5);
    }
}
@-webkit-keyframes fadeInRotate {
    0% {
  opacity: 0;
  -webkit-transform: scale(0) rotate(360deg);
    }
    100% {
  opacity: 1;
  -webkit-transform: scale(1) rotate(0deg);
    }
}
/**/

@-moz-keyframes blurFadeInOut {
    0% {
  opacity: 0;
  text-shadow: 0px 0px 40px #fff;
  -moz-transform: scale(1.3);
    }
    20%, 75% {
  opacity: 1;
  text-shadow: 0px 0px 1px #fff;
  -moz-transform: scale(1);
    }
    100% {
  opacity: 0;
  text-shadow: 0px 0px 50px #fff;
  -moz-transform: scale(0);
    }
}
@-moz-keyframes blurFadeIn {
    0% {
  opacity: 0;
  text-shadow: 0px 0px 40px #fff;
  -moz-transform: scale(1.3);
    }
    100% {
  opacity: 1;
  text-shadow: 0px 0px 1px #fff;
  -moz-transform: scale(1);
    }
}
@-moz-keyframes fadeInBack {
    0% {
  opacity: 0;
  -moz-transform: scale(0);
    }
    50% {
  opacity: 0.4;
  -moz-transform: scale(2);
    }
    100% {
  opacity: 0.2;
  -moz-transform: scale(5);
    }
}
@-moz-keyframes fadeInRotate {
    0% {
  opacity: 0;
  -moz-transform: scale(0) rotate(360deg);
    }
    100% {
  opacity: 1;
  -moz-transform: scale(1) rotate(0deg);
    }
}
/**/

@keyframes blurFadeInOut {
    0% {
  opacity: 0;
  text-shadow: 0px 0px 40px #fff;
  transform: scale(1.3);
    }
    20%, 75% {
  opacity: 1;
  text-shadow: 0px 0px 1px #fff;
  transform: scale(1);
    }
    100% {
  opacity: 0;
  text-shadow: 0px 0px 50px #fff;
  transform: scale(0);
    }
}
@keyframes blurFadeIn {
    0% {
  opacity: 0;
  text-shadow: 0px 0px 40px #fff;
  transform: scale(1.3);
    }
    50% {
  opacity: 0.5;
  text-shadow: 0px 0px 10px #fff;
  transform: scale(1.1);
    }
    100% {
  opacity: 1;
  text-shadow: 0px 0px 1px #fff;
  transform: scale(1);
    }
}
@keyframes fadeInBack {
    0% {
  opacity: 0;
  transform: scale(0);
    }
    50% {
  opacity: 0.4;
  transform: scale(2);
    }
    100% {
  opacity: 0.2;
  transform: scale(5);
    }
}
@keyframes fadeInRotate {
    0% {
  opacity: 0;
  transform: scale(0) rotate(360deg);
    }
    100% {
  opacity: 1;
  transform: scale(1) rotate(0deg);
    }
}

<canvas id="starfield"></canvas>

* {
  background:black;
  padding:0;
  margin:0;
}

canvas {
  padding:0;
  margin:0;
  width:100%;
  height:100%;
}

function $i(t) {
    return document.getElementById(t)
}
function $r(t, r) {
    document.getElementById(t).removeChild(document.getElementById(r))
}
function $t(t) {
    return document.getElementsByTagName(t)
}
function $c(t) {
    return String.fromCharCode(t)
}
function $h(t) {
    return ("0" + Math.max(0, Math.min(255, Math.round(t))).toString(16)).slice(-2)
}
function _i(t, r) {
    $t("div")[t].innerHTML += r
}
function _h(t) {
    return hires ? Math.round(t / 2) : t
}
function get_screen_size() {
    var t = document.documentElement.clientWidth,
        r = document.documentElement.clientHeight;
    return Array(t, r)
}
function init() {
    for (var t = 0; n > t; t++) star[t] = new Array(5), star[t][0] = Math.random() * w * 2 - 2 * x, star[t][1] = Math.random() * h * 2 - 2 * y, star[t][2] = Math.round(Math.random() * z), star[t][3] = 0, star[t][4] = 0;
    var r = $i("starfield");
    r.style.position = "absolute", r.width = w, r.height = h, context = r.getContext("2d"), context.fillStyle = "rgb(0,0,0)", context.strokeStyle = "rgb(255,255,255)"
}
function anim() {
    mouse_x = cursor_x - x, mouse_y = cursor_y - y, context.fillRect(0, 0, w, h);
    for (var t = 0; n > t; t++) test = !0, star_x_save = star[t][3], star_y_save = star[t][4], star[t][0] += mouse_x >> 4, star[t][0] > x << 1 && (star[t][0] -= w << 1, test = !1), star[t][0] < -x << 1 && (star[t][0] += w << 1, test = !1), star[t][1] += mouse_y >> 4, star[t][1] > y << 1 && (star[t][1] -= h << 1, test = !1), star[t][1] < -y << 1 && (star[t][1] += h << 1, test = !1), star[t][2] -= star_speed, star[t][2] > z && (star[t][2] -= z, test = !1), star[t][2] < 0 && (star[t][2] += z, test = !1), star[t][3] = x + star[t][0] / star[t][2] * star_ratio, star[t][4] = y + star[t][1] / star[t][2] * star_ratio, star_x_save > 0 && w > star_x_save && star_y_save > 0 && h > star_y_save && test && (context.lineWidth = 2 * (1 - star_color_ratio * star[t][2]), context.beginPath(), context.moveTo(star_x_save, star_y_save), context.lineTo(star[t][3], star[t][4]), context.stroke(), context.closePath());
    timeout = setTimeout("anim()", fps)
}
function start() {
    resize(), anim()
}
function resize() {
    w = parseInt(-1 != url.indexOf("w=") ? url.substring(url.indexOf("w=") + 2, -1 != url.substring(url.indexOf("w=") + 2, url.length).indexOf("&") ? url.indexOf("w=") + 2 + url.substring(url.indexOf("w=") + 2, url.length).indexOf("&") : url.length) : get_screen_size()[0]), h = parseInt(-1 != url.indexOf("h=") ? url.substring(url.indexOf("h=") + 2, -1 != url.substring(url.indexOf("h=") + 2, url.length).indexOf("&") ? url.indexOf("h=") + 2 + url.substring(url.indexOf("h=") + 2, url.length).indexOf("&") : url.length) : get_screen_size()[1]), x = Math.round(w / 2), y = Math.round(h / 2), z = (w + h) / 2, star_color_ratio = 1 / z, cursor_x = x, cursor_y = y, init()
}
var url = document.location.href,
    flag = !0,
    test = !0,
    n = parseInt(-1 != url.indexOf("n=") ? url.substring(url.indexOf("n=") + 2, -1 != url.substring(url.indexOf("n=") + 2, url.length).indexOf("&") ? url.indexOf("n=") + 2 + url.substring(url.indexOf("n=") + 2, url.length).indexOf("&") : url.length) : 812),
    w = 0,
    h = 0,
    x = 0,
    y = 0,
    z = 0,
    star_color_ratio = 0,
    star_x_save, star_y_save, star_ratio = 115,
    star_speed = 5,
    star_speed_save = 0,
    star = new Array(n),
    color, opacity = .1,
    cursor_x = 0,
    cursor_y = 0,
    mouse_x = 0,
    mouse_y = 0,
    canvas_x = 0,
    canvas_y = 0,
    canvas_w = 0,
    canvas_h = 0,
    context, key, ctrl, timeout, fps = 0;
start();