swks

Как добавить и удалить класс при сколле?

За место ховера - класс.

#axis.transform .move-right{
    transform: translate(350px,0);
}

classPoint(axis, "transform");

И почитайте на досуге про автопрефиксер.

Если по быстрому ... поменяйте css на этот

body {
  width:100%;
  height:100%;
  position:fixed;
  background-color:#34495e;
}

.content {
  width:237px;
  font-size:36px;
  line-height:40px;
  font-family:'Muli';
  color:#ecf0f1;
  height:40px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-15px;
  margin-left:-118px;
  
  &:before {
    content:'[';
    position:absolute;
    left:-30px;
    line-height:40px;
  }
  &:after {
    content:']';
    position:absolute;
    right:-30px;
    line-height:40px;
  }
  &:after, &:before {
    color:#16a085;
    font-size:42px;
    animation:2s linear 0s normal none  opacity;
    -webkit-animation:2s ease-out 0s normal none  opacity;
    -moz-animation:2s ease-out 0s normal none  opacity;
    -o-animation:2s ease-out 0s normal none  opacity;
  }
}

.visible {
  float:left;
  font-weight:600;
  overflow:hidden;
  height:40px;   
}

p {
  display:inline;
  float:left;
  margin:0;
}

ul {
  margin-top:0;
  padding-left:110px;
  text-align:left;
  list-style:none;
  animation:6s linear 0s normal none  change;
  -webkit-animation:6s linear 0s normal none  change;
  -moz-animation:6s linear 0s normal none  change;
  -o-animation:6s linear 0s normal none  change;
}

ul li {
  line-height:40px;
  margin:0;
}

@-webkit-keyframes opacity {
  0%   {opacity:0;}
  100%  {opacity:1;}
    
}
@keyframes opacity {
  0%   {opacity:0;}  
  100% {opacity:1;}
}

@-webkit-keyframes change {
  0%   {margin-top:0;}
  15%  {margin-top:0;}
  25%  {margin-top:-40px;}
  40%  {margin-top:-40px;}
  50%  {margin-top:-80px;}
  65%  {margin-top:-80px;}
  75%  {margin-top:-80px;}
  85%  {margin-top:-80px;}
  100% {margin-top:-80px;}
}
@keyframes change {
  0%   {margin-top:0;}
  15%  {margin-top:0;}
  25%  {margin-top:-40px;}
  40%  {margin-top:-40px;}
  50%  {margin-top:-80px;}
  65%  {margin-top:-80px;}
  75%  {margin-top:-80px;}
  85%  {margin-top:-80px;}
  100% {margin-top:-80px;}
}

jsfiddle.net/gbag764n

Ваш код лишь с изменённым фоном. Работает. Исходя из этого можно сказать, что в скрипте есть ошибка, которая прерывает выполнение не дойдя до данной строки. Может быть не подключен jQuery, просмотр консоли, вероятно, сразу даст ответ. Ещё возможно, что вы объявляете $(window).on('load', function() { /* ... */ }) внутри такого же onload или же похожая ситуация, когда вы ставите обработчик на onload, который уже прошёл.

Ну и немного занудства: если стоит position: absolute/fixed или float: left/right, то display: block ставится автоматом. И код со спиннером можно переписать наглядней с callback'ом:

$spinner.fadeOut(350, function() {
  $preloader.fadeOut('slow');
});