Hieu Ung Noel

Chia sẻ code làm header chào đón Giáng Sinh động

See the Pen
Chrismast header ball – Noel
by Nguyen Duc Minh (@mewxu)
on CodePen.


Trước tiên hãy thử “chơi” script này trên khung phía trên nhé. Di chuột qua nó sẽ lắc lư lắc lư đó 😀

Chia sẻ code làm header chào đón Giáng Sinh động

Bắt đầu thôi nào!

có 3 đoạn code cần lưu ý, mình sẽ chia luôn ra thành từng ô và vị trí gắn vào code nhé

HTML

Hãy copy đoạn code này và dán vào ngay sau thẻ <body>

<div class="b-page_newyear">
  <div class="b-page__content">
    <i class="b-head-decor">
      <i class="b-head-decor__inner b-head-decor__inner_n1">
        <div class="b-ball b-ball_n1 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n2 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n3 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n4 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n5 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n6 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n7 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n8 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n9 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i1">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i2">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i3">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i4">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i5">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i6">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
      </i>
      <i class="b-head-decor__inner b-head-decor__inner_n2">
        <div class="b-ball b-ball_n1 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n2 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n3 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n4 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n5 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n6 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n7 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n8 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n9 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i1">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i2">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i3">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i4">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i5">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i6">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
      </i>
      <i class="b-head-decor__inner b-head-decor__inner_n3">
        <div class="b-ball b-ball_n1 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n2 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n3 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n4 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n5 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n6 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n7 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n8 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n9 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i1">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i2">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i3">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i4">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i5">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i6">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
      </i>
      <i class="b-head-decor__inner b-head-decor__inner_n4">
        <div class="b-ball b-ball_n1 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n2 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n3 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n4 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n5 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n6 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n7 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n8 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n9 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i1">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i2">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i3">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i4">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i5">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i6">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
      </i>
      <i class="b-head-decor__inner b-head-decor__inner_n5">
        <div class="b-ball b-ball_n1 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n2 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n3 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n4 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n5 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n6 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n7 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n8 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n9 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i1">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i2">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i3">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i4">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i5">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i6">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
      </i>
      <i class="b-head-decor__inner b-head-decor__inner_n6">
        <div class="b-ball b-ball_n1 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n2 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n3 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n4 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n5 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n6 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n7 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n8 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n9 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i1">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i2">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i3">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i4">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i5">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i6">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
      </i>
      <i class="b-head-decor__inner b-head-decor__inner_n7">
        <div class="b-ball b-ball_n1 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n2 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n3 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n4 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n5 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n6 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n7 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n8 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_n9 b-ball_bounce">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i1">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i2">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i3">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i4">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i5">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
        <div class="b-ball b-ball_i6">
          <div class="b-ball__right"></div>
          <div class="b-ball__i"></div>
        </div>
      </i>
    </i>
  </div>
</div>

CSS

Copy và dán đoạn mã này nằm vào giữa thẻ <style>...</style> hoặc copy thành file riêng, sau đó gọi nó bằng đoạn mã sau đây ( lưu ý dán vào trước thẻ đóng </head> )

<link rel="stylesheet" type="text/css" href="css.css">

* Lưu ý thay đổi tên file hoặc đường dẫn đến file css này nhé

.b-page_newyear {
  margin-bottom: -85px;
}
.b-page__content {
  min-height: 160px;
}
.b-head-decor {
  display: none;
}
.b-page_newyear .b-head-decor {
  position: absolute;
  top: -10px;
  left: 0;
  display: block;
  height: 115px;
  width: 100%;
  overflow: hidden;
  background: url(images/b-head-decor_newyear.png) repeat-x 0 0;
}
.b-page_newyear .b-head-decor__inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 115px;
  display: block;
  width: 373px;
}
.b-page_newyear .b-head-decor::before {
  content: "";
  display: block;
  position: absolute;
  top: -115px;
  left: 0;
  z-index: 3;
  height: 115px;
  display: block;
  width: 100%;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.75);
}
.b-page_newyear .b-head-decor__inner_n2 {
  left: 373px;
}
.b-page_newyear .b-head-decor__inner_n3 {
  left: 746px;
}
.b-page_newyear .b-head-decor__inner_n4 {
  left: 1119px;
}
.b-page_newyear .b-head-decor__inner_n5 {
  left: 1492px;
}
.b-page_newyear .b-head-decor__inner_n6 {
  left: 1865px;
}
.b-page_newyear .b-head-decor__inner_n7 {
  left: 2238px;
}

.b-ball {
  position: absolute;
}
.b-ball_n1 {
  top: 0;
  left: 3px;
  width: 59px;
  height: 83px;
}
.b-ball_n2 {
  top: -19px;
  left: 51px;
  width: 55px;
  height: 70px;
}
.b-ball_n3 {
  top: 9px;
  left: 88px;
  width: 49px;
  height: 67px;
}
.b-ball_n4 {
  top: 0;
  left: 133px;
  width: 57px;
  height: 102px;
}
.b-ball_n5 {
  top: 0;
  left: 166px;
  width: 49px;
  height: 57px;
}
.b-ball_n6 {
  top: 6px;
  left: 200px;
  width: 54px;
  height: 70px;
}
.b-ball_n7 {
  top: 0;
  left: 240px;
  width: 56px;
  height: 67px;
}
.b-ball_n8 {
  top: 0;
  left: 283px;
  width: 54px;
  height: 53px;
}
.b-ball_n9 {
  top: 10px;
  left: 321px;
  width: 49px;
  height: 66px;
}
.b-ball_n1 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_n1.png) no-repeat;
}
.b-ball_n2 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_n2.png) no-repeat;
}
.b-ball_n3 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_n3.png) no-repeat;
}
.b-ball_n4 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_n4.png) no-repeat;
}
.b-ball_n5 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_n5.png) no-repeat;
}
.b-ball_n6 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_n6.png) no-repeat;
}
.b-ball_n7 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_n7.png) no-repeat;
}
.b-ball_n8 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_n8.png) no-repeat;
}
.b-ball_n9 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_n9.png) no-repeat;
}
.b-ball_i1 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_i1.png) no-repeat;
}
.b-ball_i2 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_i2.png) no-repeat;
}
.b-ball_i3 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_i3.png) no-repeat;
}
.b-ball_i4 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_i4.png) no-repeat;
}
.b-ball_i5 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_i5.png) no-repeat;
}
.b-ball_i6 .b-ball__i {
  background: url(//mewxu.net/noel/images/b-ball_i6.png) no-repeat;
}
.b-ball_i1 {
  top: 0;
  left: 0;
  width: 25px;
  height: 71px;
}
.b-ball_i2 {
  top: 0;
  left: 25px;
  width: 61px;
  height: 27px;
}
.b-ball_i3 {
  top: 0;
  left: 176px;
  width: 29px;
  height: 31px;
}
.b-ball_i4 {
  top: 0;
  left: 205px;
  width: 50px;
  height: 51px;
}
.b-ball_i5 {
  top: 0;
  left: 289px;
  width: 78px;
  height: 28px;
}
.b-ball_i6 {
  top: 0;
  left: 367px;
  width: 6px;
  height: 69px;
}
.b-ball__i {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}
.b-ball_bounce .b-ball__right {
  position: absolute;
  top: 0;
  right: 0;
  left: 50%;
  bottom: 0;
  z-index: 9;
}
.b-ball_bounce:hover .b-ball__right {
  display: none;
}
.b-ball_bounce .b-ball__right:hover {
  left: 0;
  display: block !important;
}
.b-ball_bounce.bounce > .b-ball__i {
  -webkit-transform: rotate(-9deg);
  -moz-transform: rotate(-9deg);
  -o-transform: rotate(-9deg);
  transform: rotate(-9deg);
}
.b-ball_bounce .b-ball__right.bounce + .b-ball__i {
  -webkit-transform: rotate(9deg);
  -moz-transform: rotate(9deg);
  -o-transform: rotate(9deg);
  transform: rotate(9deg);
}
.b-ball_bounce.bounce1 > .b-ball__i {
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  transform: rotate(6deg);
}
.b-ball_bounce .b-ball__right.bounce1 + .b-ball__i {
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.b-ball_bounce.bounce2 > .b-ball__i {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.b-ball_bounce .b-ball__right.bounce2 + .b-ball__i {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}
.b-ball_bounce.bounce3 > .b-ball__i {
  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);
}
.b-ball_bounce .b-ball__right.bounce3 + .b-ball__i {
  -webkit-transform: rotate(-1.5deg);
  -moz-transform: rotate(-1.5deg);
  -o-transform: rotate(-1.5deg);
  transform: rotate(-1.5deg);
}
@media (max-width: 960px) {
  .b-page_newyear {
    margin-bottom: -85px;
  }
}

Javascript

Trước tiên, đoạn mã này hoạt động dựa trên jquery, do đó nếu web bạn chưa load jquery từ 3.x trở lên thì buộc phải gọi nó về bằng đoạn mã này <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Sau đó, paste đoạn code này vào giữa thẻ <script>...</script> hoặc lưu thành file riêng và gọi nó ra, tương tự css

<script src="js.js"></script>

Dưới đây là đoạn code chi tiết.

jQuery(function () {
  var d = function () {};
  jQuery(document)
    .delegate(".b-ball_bounce", "mouseenter", function () {
      b(this);
      m(this);
    })
    .delegate(".b-ball_bounce .b-ball__right", "mouseenter", function (i) {
      i.stopPropagation();
      b(this);
      m(this);
    });

  var g = 36;

  function b(n) {
    if (n.className.indexOf("b-ball__right") > -1) {
      n = n.parentNode;
    }
    var i = /b-ball_n(\d+)/.exec(n.className);
    var j = /b-head-decor__inner_n(\d+)/.exec(n.parentNode.className);
    if (i && j) {
      i = parseInt(i[1], 10) - 1;
      j = parseInt(j[1], 10) - 1;
      d((i + j * 9) % g);
    }
  }
  function m(j) {
    var i = jQuery(j);
    if (j.className.indexOf(" bounce") > -1) {
      return;
    }
    i.addClass("bounce");

    function n() {
      i.removeClass("bounce").addClass("bounce1");

      function o() {
        i.removeClass("bounce1").addClass("bounce2");

        function p() {
          i.removeClass("bounce2").addClass("bounce3");

          function q() {
            i.removeClass("bounce3");
          }
          setTimeout(q, 300);
        }
        setTimeout(p, 300);
      }
      setTimeout(o, 300);
    }
    setTimeout(n, 300);
  }
});
jQuery("a.page-scroll").bind("click", function (event) {
  var $anchor = jQuery(this);
  jQuery("html, body")
    .stop()
    .animate(
      {
        scrollTop: jQuery($anchor.attr("href")).offset().top - 50
      },
      1250,
      "easeInOutExpo"
    );
  event.preventDefault();
});

Giờ thì hưởng thành quả thôi!