SOURCE

/*
 *	ready
 */
$(document).ready(function() {

  //头部背景,字体颜色
  $(window).scroll(function(event) {
    var bgop = $(document).scrollTop() / 700;
    var fcitem = $('.head_auto > h1 > a , .head_auto > .menu > a');
    $('#head').css('background-color', 'rgba(255, 255, 255, ' + bgop + ')');
    if (bgop > 0.5) {
      fcitem.css('color', '#000');
    } else {
      fcitem.css('color', '#fff');
    }
  });

});

//移动
function move(x) {
  $('body,html').animate({
    scrollTop: $('.box').eq(x).offset().top - 70
  },
  500);
}

$(window).load(function() {

  //打字机效果
  var arrayItem = $('#text .arrayItem') //获取要输入的文字
  ,
  arrayLength = arrayItem.length,
  editCon = $('#text .txt') //获取填写位置
  ,
  text = [],
  textLength,
  textX = 0,
  textItem,
  str,
  num = 0;
  for (var i = 0; i < arrayLength; i++) { //HTML内容转换数组
    var s = arrayItem.eq(i).text();
    text[i] = s.split(",");
  }
  textLength = text.length - 1; //获取数组长度-1
  function txtType1() { //添加
    var timer = Math.round(Math.random() * 200 + 100);
    s1 = setTimeout(function() {
      str = editCon.text() + text[textX][num];
      editCon.text(str);
      if (num > text[textX].length - 2) {
        num = 0;
        txtType2();
        clearInterval(s1);
        return false;
      } else {
        num++;
        txtType1();
      }
    },
    timer);
  };
  function txtType2() { //延迟
    s2 = setTimeout(function() {
      txtType3();
      clearInterval(s2);
    },
    3000);
  }
  function txtType3() { //删除
    s3 = setInterval(function() {
      str = str.substring(0, str.length - 1);
      editCon.text(str);
      if (editCon.text() == '') {
        textX < textLength ? textX++:textX = 0;
        txtType1();
        clearInterval(s3);
      }
    },
    40);
  };
  s4 = setTimeout(function() { //load延迟
    txtType1();
    clearInterval(s4);
  },
  1000);

});

<div id="head">
  <div class="head_auto">
    <h1>
      <a href="#">
        LOGO
      </a>
    </h1>
    <div class="menu clearf">
      <a href="javascript:move(0);" accesskey="1">
        menu1
      </a>
      <a href="javascript:move(1);" accesskey="2">
        menu2
      </a>
      <a href="javascript:move(2);" accesskey="3">
        menu3
      </a>
      <a href="#">
        menu4
      </a>
      <a href="#">
        menu5
      </a>
    </div>
  </div>
</div>
<div class="box">
  <div id="box1">
  </div>
  <p class="tit" id="text">
    <!-- 要打出的文字按顺序用,分开 -->
    <span class="arrayItem">
      a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z
    </span>
    <span class="arrayItem">
      0,1,2,3,4,5,6,7,8,9,1,0
    </span>
    <span class="arrayItem">
      一,二,三,四,五,六,七,八,九,十
    </span>
    <!-- ↑↑END -->
    This is
    <span class="txt">
    </span>
    .
  </p>
</div>
<div class="box">
  <div id="box2" class="jarallax">
  </div>
  <p class="tit">
    V
  </p>
</div>
<div class="box">
  <div id="box3" class="jarallax">
  </div>
  <p class="tit">
    W
  </p>
</div>
<script src="http://harace.top/js/jarallax.js">
</script>
<script type="text/javascript">
  /* init Jarallax */
  $('.jarallax').jarallax({
    speed: 0.5,
    imgWidth: 1366,
    imgHeight: 768
  })
</script>

@charset "utf-8";

/********************
    Default set
********************/

@import url('https://fonts.googleapis.com/css?family=Poiret+One');
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  padding: 0px;
  font-family: 'Poiret One', cursive;
  font-size: 13px;
  list-style: none;
  color: #282828;
}

a {
  text-decoration: none;
}

img {
  border: 0;
  vertical-align: middle;
}

.clear {
  clear: both;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  height: 0 !important;
}

.clearf {
  *zoom: 1;
}

.clearf:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}


/***********************************************
************************************************
				Start Coding
************************************************
************************************************/

#head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 10;
}

.head_auto {
  width: 1160px;
  margin: 0 auto;
  position: relative;
}

.head_auto > h1 {
  position: absolute;
  top: 17px;
  left: 0;
}

.head_auto > h1 > a {
  color: #fff;
  font-size: 30px;
  font-weight: normal;
}

.head_auto > .menu {
  position: absolute;
  top: 20px;
  right: 0;
}

.head_auto > .menu > a {
  display: block;
  float: left;
  font-size: 20px;
  color: #fff;
  margin-left: 20px;
}

.head_auto > .menu > a:hover {
  text-decoration: underline;
}

.box {
  height: 100vh;
  line-height: 100vh;
  position: relative;
  overflow: hidden;
}

.box > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  line-height: 100vh;
  background-blend-mode: multiply;
  background-color: rgba(0, 0, 0, 0.3);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.box > p {
  position: relative;
  z-index: 2;
  height: 100vh;
  line-height: 100vh;
  font-size: 20vw;
  color: #fff;
  text-align: center;
  text-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}

#box1 {
  background-image: url('http://harace.top/images/bg1.jpg');
  animation: bg 30s linear alternate infinite;
  transform: scale(1, 1);
}

#box2 {
  background-image: url('http://harace.top/images/bg2.jpg');
}

#box3 {
  background-image: url('http://harace.top/images/bg3.jpg');
}

#text {
  font-size: 50px;
}

#text .txt {
  display: inline-block;
  padding: 5px 20px 5px 13px;
  border-radius: 5px;
  background: #333;
  line-height: normal;
  position: relative;
  height: 40px;
  vertical-align: middle;
  font-size: 30px;
}

#text .txt:after {
  content: '|';
  display: block;
  position: absolute;
  top: 8px;
  right: 10px;
  animation: bg2 .9s linear infinite;
}

#text .arrayItem {
  display: none;
}

@keyframes bg {
  form {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.2, 1.2);
  }
}

@keyframes bg2 {
  form {
    color: #fff;
  }
  to {
    color: #333;
  }
}