Tổng hợp code hiệu ứng HTML5, CSS5 tuyệt đẹp

Trong thiết kế Website của mình, cũng có một vài chổ trống mà bạn chả biết thêm gì vào cho đẹp mắt, hoặc là phần đó không được hay cho lắm với lại bàn tay của mình cũng giới hạn viết được các hiệu ứng hoặc là 1 animation. Nên nhiều người thường lặp lại những animation mà mình đã sử dụng ở trên đầu hay cuối trang. Vậy nên trong bài viết này mình sẽ tổng hợp code HTML, CSS, Javascript hay nhất cho Website của bạn.

1/ Giao diện đồng hồ

Giao diện đồng hồ không thể thiếu trong việc trang trí Website của bạn, nó giúp phần thêm đẹp mắt hoặc cũng có ích cho người truy cập.

Full Source :

Giao diện đồng hồ RUN
<!DOCTYPE html>
<html>
    <head>
        <title>Giao diện đồng hồ cực chất</title>
<style>
body{
    background-color: black;
    margin: 0;
    padding: 0;
}
.container{
    position: absolute;
    margin: auto;
    display: flex;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    height:15pc;
    width: 15pc;
}
.watch-face{
    position: relative;
    animation: secMove 60s infinite cubic-bezier(0,0,0,0);
    height: 180px;
    width:180px;
    border-radius: 50%;
    border:8px solid aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 10px rgb(255, 255, 255),
    0 0 10px rgb(255, 255, 255);
}
.dial{
    position: absolute;
    height:10px;
    width:10px;
    background-color: rgb(158, 255, 133);
    z-index: +1;
    border-radius:50%;
    box-shadow: 0 0 20px rgb(105, 228, 74);
}
.minute-hand{
    position: absolute;
    height: 75px;
    width: 5px;
    background-color: rgb(155, 208, 255);
    box-shadow:0 0 20px rgb(98, 182, 255);
    bottom:120px;
    transform-origin: bottom;
    border-radius: 50px 50px 0 0;
    transition:1s;
}
.hour-hand{
    position: absolute;
    height:50px;
    width: 5px;
    background-color: rgb(255, 91, 91);
    bottom:120px;
    box-shadow:0 0 20px rgb(255, 48, 48);
    border-radius: 50px 50px 0 0;
    transform-origin: bottom;
    transition:1s;
}
.second-hand{
    position: absolute;
    height: 8px;
    width: 8px;
    top:-8px;
    border-radius:50px;
    background-color: rgb(255, 65, 144);
}
.twelve,.six{
    position:absolute ;
    background-color:white;
    height:4px;
    width:4px;
    top:28px;
    z-index:-1;
    border-radius:50%;
}
.six{
    top:208px;
}
.three,.nine{
    position:absolute ;
    background-color:white;
    height:4px;
    width:4px;
    transform:rotate(90deg);
    left:28px;
    z-index:-1;
    border-radius:50%;
}
.nine{
    left:207px;
}
</style>
    </head>
    <body>
        <div class="container">
            <div class="watch-face" id="secmove">
                <div class="second-hand" id="sec"></div>
            </div>
            <div class="dial"></div>
            <div class="hour-hand" id="hour"></div>
            <div class="minute-hand" id="min"></div>
            <div class="twelve"></div>
            <div class="three"></div>
            <div class="six"></div>
            <div class="nine"></div> 
        </div>
<script>
function setDeg(){
    var d = new Date();
    var hourDeg = document.getElementById("hour");
    var minDeg = document.getElementById("min");
    var hours = (d.getHours()>12)?(d.getHours()-12):(d.getHours());
    var mins = d.getMinutes()+1;
    var secDeg = document.getElementById("secmove");
    var secs = d.getSeconds();
    secDeg.style.transform = "rotate("+secs*6+"deg)";
    if(d.getMinutes()>30){
        hourDeg.style.transform = "rotate("+(hours*30+15)+"deg)";
    }
    else
        hourDeg.style.transform = "rotate("+(hours*30)+"deg)";
    minDeg.style.transform = "rotate("+(mins*6-6)+"deg)";
}
setInterval(setDeg,1);
</script>
    </body>
</html>

2. Button 7 màu

Button là phần không thể thiếu trên Website, nhưng bạn hãy tham khảo ngay và đừng bỏ qua Button 7 màu tuyệt đẹp này nha.

Full Source :

Button 7 màu RUN
<!DOCTYPE html>
<html>
<head>
  <title>Button 7 màu</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css?family=Lobster');
body {
  margin: 0;
  padding: 0;
  background: rgb(0, 0, 0);
}
span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 120px;
  text-align: center;
  line-height: 120px;
  font-size: 48px;
  color: white;
  text-transform: capitalize;
  font-family: 'lobster';
  letter-spacing: 4px;
  cursor: pointer;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 60px;
}

span:hover {
  animation: animate 8s linear infinite;
}

@keyframes animate {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}
span:before{
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  z-index: -1;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 40px;
  opacity: 0;
  transition: all .5s ease;
}
span:hover:before{
  filter: blur(20px);
  opacity: 1;
  animation: animate 8s linear infinite;
}
</style>
</head>
<body>
  <span>Chạm vào tôi :)</span>
</body>
</html>

3. Khung đồng hồ Glitch

Mời bạn tham khảo thêm khung đồng hồ Glitch này. Bạn cũng có thể tùy chỉnh theo cách của bạn, nhưng hãy lưu ý khi sửa đổi.

Full Source :

<!doctype html>
<html>
<head>
<title>Khung đồng hồ Glitch</title>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<style>
body{
  position:relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas:

    ". a a ."
    ". a a ."
    ". a a .";
  background-color:black;
}
#clockContainer{
  z-index:1;
  width:80%;
  height:30%;
  padding:20px 20px;
  background: linear-gradient(90deg, blue 50%, transparent 50%),
          linear-gradient(90deg, blue 50%, transparent 50%),
          linear-gradient(0deg,  blue 50%, transparent 50%),
          linear-gradient(0deg,  blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
  background-position: 0 0, 100% 100%, 0 100%, 100% 0;
  padding: 80px;
  grid-area: a;
  align-self: center;
  justify-self: center;
color:white;
user-select:none;
text-align:center;text-shadow:3px 5px 6px #0000ff;cursor:default;
transition:all 1s ease-out;
animation:changeColor 5s infinite;

}
@keyframes changeColor{
  0%{border:5px dashed red;background-position:0 0, 100% 100%, 0 100%, 100% 0;}
    25%{border:5px dashed lightblue;}
      50%{border:5px dashed green;}
        75%{border:5px dashed yellow;}
          100%{border:5px dashed purple;background-position: 100% 0, 0% 100%, 0 0, 100% 100%;}
}
#dateContainer{
margin-top:10px;
  font-size:1rem;
}
#timeContainer{
  font-family: 'Orbitron', sans-serif;
  font-size:2rem;
}
#AMPM{color:white;font-size:1rem;}
</style>
</head>
<body>

    <div id="clockContainer" onload="borderColor();">
    <div id="dateContainer">
      <p id="clockDate" ></p>
    </div>
    <div id="timeContainer">
      <i id="clockTime"></i><i id="AMPM"></i>
    </div>
  </div>
  <script type="text/javascript">
function showTime(){
  var currentTime = new Date();
  var day = currentTime.getDay();
  var dayarr =["Sun","Mon","Tues","Wed","Thurs","Fri","Sat"];
  day = dayarr[day];
  var date = currentTime.getDate();
  var month = currentTime.getMonth();
  var montharr = ["Jan","Fab","Mar","April","May","Jun","July","Aug","Sep","Oct","Nov","Dec"];
  month = montharr[month];
  var year = currentTime.getFullYear();


  var h = currentTime.getHours(); // from 0-23
  var m = currentTime.getMinutes(); // from 0-59
  var s = currentTime.getSeconds(); // from 0-59

  var session = "AM";
  if(h == 0){
    h=12;
  }
  if(h>12){
    h = h-12;
    session = "PM";
  }
  h = (h<10) ? "0" + h : h;
  m = (m<10) ? "0" + m : m;
  s = (s<10) ? "0" + s : s;

  var time = h + ":" + m + ":" + s + " ";
  document.getElementById('clockDate').innerHTML = day + ", "  + date + " " + month + ", " + year;

  document.getElementById('clockTime').innerHTML = time;
    document.getElementById('AMPM').innerText = session;

  setTimeout(showTime, 1000);
}
showTime();
</script>
</body>
</html>

4. Loading cơ bản

Hiện tại, trên Freetuts có rất nhiều loại Loading Bar, Loading Vòng tròn hay là cầu vòng, nếu những thứ đó không ưng ý với bạn thì bạn nên sử dụng thử Loading cơ bản nhưng chất này nha.

Full Source :

<!doctype html>
<html>
<head>
<title>Loading cơ bản cho Website</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Saira");
body {
  font-family: "Saira", sans-serif;
  background-color: #272727;
  color: #fff;
}

.with-dots {
  text-align: center;
  z-index: 5;
  font-size: 2em;
  margin-top: 20px;
}
.with-dots span {
  display: inline;
  margin-left: 0.1em;
  margin-right: 0.1em;
  position: relative;
  top: 0;
  font-size: 1.5em;
  opacity: 0;
  -webkit-animation: fadeDots 1.8s ease-in-out infinite;
          animation: fadeDots 1.8s ease-in-out infinite;
}
.with-dots span:nth-child(1) {
  -webkit-animation-delay: 0.2571428571s;
          animation-delay: 0.2571428571s;
}
.with-dots span:nth-child(2) {
  -webkit-animation-delay: 0.5142857143s;
          animation-delay: 0.5142857143s;
}
.with-dots span:nth-child(3) {
  -webkit-animation-delay: 0.72s;
          animation-delay: 0.72s;
}

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

@keyframes fadeDots {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
</head>
<body>
<h1 class="with-dots">
Loading
<span>.</span>
<span>.</span>
<span>.</span>
</h1>
</body>
</html>

5. Slide Bar Chat

Slide Bar Chat giúp gì cho bạn?

  • Hiệu ứng tuyệt đẹp
  • Nhanh gọn và lẹ
  • Có thể thay thế với PHP và nhiều mã nguồn khác.

Full Source :

Slide Bar Chat RUN
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
<style>
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-size: 62.5%;
  height: 100%;
}

button, input {
  border: 0;
  outline: none;
}

body {
  background: linear-gradient(45deg, #636f85, #6960a0);
}

.demo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25rem;
  margin-left: -15rem;
  width: 30rem;
  height: 50rem;
  box-shadow: 0 1rem 5rem rgba(0, 0, 0, 0.3);
}

.static {
  height: 100%;
  font-size: 1.8rem;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  background: #6D7ADA;
}
.static:before, .static:after {
  content: "";
  position: absolute;
  left: 7rem;
  width: 2rem;
  height: 2rem;
  margin-left: -1rem;
  margin-top: -1rem;
  border: 2px solid #fff;
  border-left: none;
  border-bottom: none;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-animation: arrows 1.5s infinite;
          animation: arrows 1.5s infinite;
}
.static:before {
  top: 15rem;
}
.static:after {
  top: 35rem;
}
.static__text {
  width: 9rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5rem;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
  color: #fff;
  -webkit-perspective: 1px;
          perspective: 1px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.sidebar-content {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 20rem;
  height: 100%;
  padding-top: 1rem;
  opacity: 0;
  transition: opacity 200ms, z-index 0s 0s;
  background-color: #E9EAF3;
  overflow: hidden;
}
.sidebar-content.active {
  z-index: 2;
  opacity: 1;
}

.contact {
  position: relative;
  width: 100%;
  height: 5rem;
  padding-left: 1.7rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
}
.contact__photo {
  border-radius: 50%;
  margin-right: 1.5rem;
}
.contact__name {
  font-size: 1.2rem;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.contact__status {
  position: absolute;
  top: 2.1rem;
  right: 1.5rem;
  width: 8px;
  height: 8px;
  border: 2px solid #00B570;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}
.contact__status.online {
  opacity: 1;
}

.search {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4.0rem;
  padding-left: 1.5rem;
  background: #fff;
  display: flex;
  align-items: center;
}

svg {
  overflow: visible;
}

.sidebar {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.s-path {
  cursor: -webkit-grab;
  cursor: grab;
}

.cloned {
  position: absolute;
  z-index: 10;
  transition: top 0.3s, left 0.3s;
  transition-delay: 0.2s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.cloned.removed {
  transition: opacity 0.2s 0;
  opacity: 0;
}

.chat {
  display: none;
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2.5rem 0 5.5rem 2.5rem;
  transition: opacity 200ms;
  opacity: 0;
}
.chat.active {
  opacity: 1;
}
.chat.active:before {
  width: 100%;
}
.chat:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  background: #1CC6AE;
  width: 0;
  transition: width 0.2s;
}
.chat__back {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-top: 0.5rem;
  margin-left: -0.6rem;
  cursor: pointer;
}
.chat__back:hover:before {
  -webkit-transform: translateX(-0.3rem) rotate(-45deg);
          transform: translateX(-0.3rem) rotate(-45deg);
}
.chat__back:before {
  content: "";
  position: absolute;
  display: block;
  top: 0.4rem;
  left: 0.6rem;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid #545675;
  border-right: none;
  border-bottom: none;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.chat__status {
  position: absolute;
  top: 2rem;
  right: 6.5rem;
  font-size: 1.2rem;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: #B1A9A9;
}
.chat__person {
  display: inline-block;
  position: absolute;
  top: 3rem;
  right: 6.5rem;
  font-size: 2rem;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #36343D;
}
.chat__online {
  position: absolute;
  top: 50%;
  left: -1.5rem;
  margin-top: -3px;
  width: 8px;
  height: 8px;
  border: 2px solid #00B570;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}
.chat__online.active {
  opacity: 1;
}
.chat__messages {
  position: absolute;
  top: 7.5rem;
  left: 2.5rem;
  width: 27.5rem;
  height: 37rem;
  padding-right: 2.5rem;
  overflow-y: auto;
}
.chat__msgRow {
  margin-bottom: 0.5rem;
}
.chat__msgRow:after {
  content: "";
  display: table;
  clear: both;
}
.chat__message {
  display: inline-block;
  max-width: 60%;
  padding: 1rem;
  font-size: 1.4rem;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.chat__message.mine {
  color: #2B2342;
  border: 1px solid #DFDFDF;
}
.chat__message.notMine {
  float: right;
  color: #23244E;
  background: #E9EAF3;
}
.chat__input {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5.5rem;
  padding: 1rem 1rem 1rem 4rem;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/elastic-search.png");
  background-repeat: no-repeat;
  background-position: 1rem 1.5rem;
  background-color: #E9EAF3;
  color: #2B2342;
  font-size: 1.4rem;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.ripple {
  position: absolute;
  width: 10rem;
  height: 10rem;
  margin-left: -5rem;
  margin-top: -5rem;
  background: rgba(0, 0, 0, 0.4);
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: animRipple 0.3s;
          animation: animRipple 0.3s;
  border-radius: 50%;
}

@-webkit-keyframes animRipple {
  to {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes animRipple {
  to {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: 0;
  }
}
@-webkit-keyframes arrows {
  to {
    -webkit-transform: translateX(100%) rotate(45deg);
            transform: translateX(100%) rotate(45deg);
    opacity: 0;
  }
}
@keyframes arrows {
  to {
    -webkit-transform: translateX(100%) rotate(45deg);
            transform: translateX(100%) rotate(45deg);
    opacity: 0;
  }
}
</style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
<div class="demo">
  <svg class="sidebar" viewBox="0 0 300 500">
    <path class="s-path" fill="#fff" d="M0,0 50,0 a0,250 0 1,1 0,500 L0,500" />
  </svg>
  <div class="static">
    <div class="static__text">Kéo thanh màu trắng qua bên phải<br><br> Bạn có thể sử dụng PHP để viết Form tin nhắn <br><br> Nhấn vào Tài khoản để nhắn, xem tin</div>
  </div>
  <div class="sidebar-content">
    <div class="contact">
      <img src="https://freetuts.net/public/logo/main-logo.png" alt="" class="contact__photo" width="35px"/>
      <span class="contact__name">thanhchiit</span>
      <span class="contact__status online"></span>
    </div>
    <div class="contact">
      <img src="https://freetuts.net/public/logo/main-logo.png" alt="" class="contact__photo"  width="35px"/>
      <span class="contact__name">Admin</span>
      <span class="contact__status online"></span>
    </div>
    <div class="search">
      <img src="https://freetuts.net/public/logo/main-logo.png" alt="" class="search__img"  width="35px"/>
      <input type="text" class="search__input" placeholder="Tìm kiếm tin nhắn" />
    </div>
  </div>
  <div class="chat">
    <span class="chat__back"></span>
    <span class="chat__status">hoạt động</span>
    <div class="chat__person">
      <span class="chat__online active"></span>
      <span class="chat__name">AJ</span>
    </div>
    <div class="chat__messages">
      <div class="chat__msgRow">
        <div class="chat__message mine">Hay lắm! Tôi rất thích những thứ bạn chia sẻ trên Freetuts!</div>
      </div>
      <div class="chat__msgRow">
        <div class="chat__message notMine">Cám ơn bạn!</div>
      </div>
    </div>
    <input type="text" class="chat__input" placeholder="Bạn đang nói gì?" />
  </div>
</div>
<script>
$(document).ready(function() {
  var $svg = $(".sidebar"),
      $demo = $(".demo"),
      $path = $(".s-path"),
      $sCont = $(".sidebar-content"),
      $chat = $(".chat"),
      demoTop = $demo.offset().top,
      demoLeft = $demo.offset().left,
      diffX = 0,
      curX = 0,
      finalX = 0,
      frame = 1000 / 60,
      animTime = 600,
      sContTrans = 200,
      animating = false;

  var easings = {
    smallElastic: function(t,b,c,d) {
      var ts = (t/=d)*t;
      var tc = ts*t;
      return b+c*(33*tc*ts + -106*ts*ts + 126*tc + -67*ts + 15*t);
    },
    inCubic: function(t,b,c,d) {
      var tc = (t/=d)*t*t;
      return b+c*(tc);
    }
  };

  function createD(top, ax, dir) {
    return "M0,0 "+top+",0 a"+ax+",250 0 1,"+dir+" 0,500 L0,500";
  }

  var startD = createD(50,0,1),
      midD = createD(125,75,0),
      finalD = createD(200,0,1),
      clickMidD = createD(300,80,0),
      clickMidDRev = createD(200,100,1),
      clickD = createD(300,0,1),
      currentPath = startD;

  function newD(num1, num2) {
    var d = $path.attr("d"),
        num2 = num2 || 250,
        nd = d.replace(/\ba(\d+),(\d+)\b/gi, "a" + num1 + "," + num2);
    return nd;
  }

  function animatePathD(path, d, time, handlers, callback, easingTop, easingX) {
    var steps = Math.floor(time / frame),
        curStep = 0,
        oldArr = currentPath.split(" "),
        newArr = d.split(" "),
        oldLen = oldArr.length,
        newLen = newArr.length,
        oldTop = +oldArr[1].split(",")[0],
        topDiff = +newArr[1].split(",")[0] - oldTop,
        nextTop,
        nextX,
        easingTop = easings[easingTop] || easings.smallElastic,
        easingX = easings[easingX] || easingTop;

    $(document).off("mousedown mouseup");

    function animate() {
      curStep++;
      nextTop = easingTop(curStep, oldTop, topDiff, steps);
      nextX = easingX(curStep, curX, finalX-curX, steps);
      oldArr[1] = nextTop + ",0";
      oldArr[2] = "a" + Math.abs(nextX) + ",250";
      oldArr[4] = (nextX >= 0) ? "1,1" : "1,0";
      $path.attr("d", oldArr.join(" "));
      if (curStep > steps) {
        curX = 0;
        diffX = 0;
        $path.attr("d", d);
        currentPath = d;
        if (handlers) handlers1();
        if (callback) callback();
        return;
      }
      requestAnimationFrame(animate);
    }
    animate();
  }

  function handlers1() {

    $(document).on("mousedown touchstart", ".s-path", function(e) {
      var startX =  e.pageX || e.originalEvent.touches[0].pageX;

      $(document).on("mousemove touchmove", function(e) {
        var x = e.pageX || e.originalEvent.touches[0].pageX;
        diffX = x - startX;
        if (diffX < 0) diffX = 0;
        if (diffX > 300) diffX = 300;
        curX = Math.floor(diffX/2);
        $path.attr("d", newD(curX));
      });
    });

    $(document).on("mouseup touchend", function() {
      $(document).off("mousemove touchmove");
      if (animating) return;
      if (!diffX) return;
      if (diffX < 40) {
        animatePathD($path, newD(0), animTime, true);
      } else {
        animatePathD($path, finalD, animTime, false, function() {
          $sCont.addClass("active");
          setTimeout(function() {
            $(document).on("click", closeSidebar);
          }, sContTrans);
        });
      }
    });

  }

  handlers1();

  function closeSidebar(e) {
    if ($(e.target).closest(".sidebar-content").length ||
        $(e.target).closest(".chat").length) return;
    if (animating) return;
    animating = true;
    $sCont.removeClass("active");
    $chat.removeClass("active");
    $(".cloned").addClass("removed");
    finalX = -75;
    setTimeout(function() {
      animatePathD($path, midD, animTime/3, false, function() {
        $chat.hide();
        $(".cloned").remove();
        finalX = 0;
        curX = -75;
        animatePathD($path, startD, animTime/3*2, true);
        animating = false;
      }, "inCubic");
    }, sContTrans);
    $(document).off("click", closeSidebar);
  }

  function moveImage(that) {
    var $img = $(that).find(".contact__photo"),
        top = $img.offset().top - demoTop,
        left = $img.offset().left - demoLeft,
        $clone = $img.clone().addClass("cloned");

    $clone.css({top: top, left: left});
    $demo.append($clone);
    $clone.css("top");
    $clone.css({top: "1.8rem", left: "25rem"});
  }

  function ripple(elem, e) {
    var elTop = elem.offset().top,
        elLeft = elem.offset().left,
        x = e.pageX - elLeft,
        y = e.pageY - elTop;
    var $ripple = $("<div class='ripple'></div>");
    $ripple.css({top: y, left: x});
    elem.append($ripple);
  }

  $(document).on("click", ".contact", function(e) {
    if (animating) return;
    animating = true;
    $(document).off("click", closeSidebar);
    var that = this,
        name = $(this).find(".contact__name").text(),
        online = $(this).find(".contact__status").hasClass("online");
    $(".chat__name").text(name);
    $(".chat__online").removeClass("active");
    if (online) $(".chat__online").addClass("active");
    ripple($(that),e);
    setTimeout(function() {
      $sCont.removeClass("active");
      moveImage(that);
      finalX = -80;
      setTimeout(function() {
        $(".ripple").remove();
        animatePathD($path, clickMidD, animTime/3, false, function() {
          curX = -80;
          finalX = 0;
          animatePathD($path, clickD, animTime*2/3, true, function() {
            $chat.show();
            $chat.css("top");
            $chat.addClass("active");
            animating = false;
          });
        }, "inCubic");
      }, sContTrans);
    }, sContTrans);
  });

  $(document).on("click", ".chat__back", function() {
    if (animating) return;
    animating = true;
    $chat.removeClass("active");
    $(".cloned").addClass("removed");
    setTimeout(function() {
      $(".cloned").remove();
      $chat.hide();
      finalX = 100;
      animatePathD($path, clickMidDRev, animTime/3, false, function() {
        curX = 100;
        finalX = 0;
        animatePathD($path, finalD, animTime*2/3, true, function() {
          $sCont.addClass("active");
          $(document).on("click", closeSidebar);
          animating = false;
        });
      }, "inCubic");
    }, sContTrans);
  });

  $(window).on("resize", function() {
    demoTop = $demo.offset().top;
    demoLeft = $demo.offset().left;
  });

});
</script>
</body>
</html

6. Lời kết

Vậy là xong, mình đã liệt kê tổng hợp code HTML, CSS, Javascript hay nhất, nhưng hoàn toàn chưa hết đâu, rất còn nhiều loại code hay cho Website và bạn tham khảo. Vì bài viết có giới hạn nên mình viết 1 phần tổng hợp code. 

Hẹn bạn trong bài viết tổng hợp nhiều loại code trong bài viết sau.

Hãy tham khảo và chọn cho mình những loại code hay nhé!

Khóa học nên xem

Nguồn: freetuts.net