• RE: Hiểu về Scope trong Javascript

    Bài viết rất hữu ích. Mình có bổ xung thêm,
    Lí do và chúng ta nên sử dụng let thay cho var trong vòng for vì như vậy sẽ kiểm soát được biến i khi vòng for kết thúc, đảm bảo không ảnh hưởng với những đoạn code bên ngoài về sau (nếu như code bên ngoài cũng đang sử dụng một biến tên i)

    Với var

    for(var i = 0; i < 10; i++){
    
    }
    console.log(i) // kết quả = 10
    
    

    Với let

    for(let i = 0; i < 10; i++){
    
    }
    console.log(i) // i không tồn tại, i is not defined
    
    
    posted in Tutorials
  • RE: Sprite Sheet - Khi những bức ảnh nhảy múa trên Website

    Tuyệt nhỉ,
    Cái này làm animation trong game thì tuyệt rồi.

    posted in Case Study Thực Tế
  • Hướng dẫn tạo hiệu ứng ảnh Slide Before After với Javascript

    Slide image Before After:

    Hiệu ứng Slide Before After rất hữu ích nếu như bạn muốn so sánh 2 hình ảnh với nhau tạo trải nghiệm thích thú khi sử dụng website. Chúng ta có thể dùng Slide Before After để làm nổi bật sự khác biệt giữa ảnh trước và ảnh sau một cách rõ rệt.

    Slide Before After.gif

    Rất thú vị phải không nào 😃 . Nào cùng mình bắt đầu thiết kế hiệu ứng Slide Before After nhé.

    Các bước thực hiện

    Bước 1: Tạo HTML
    Tạo file index.html

    Code hoàn chỉnh như sau

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Slide After Before - Nodejs.vn, Nodemy.vn  </title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="container">
      <div id="comparison">
        <figure>
          <div id="handle"></div>
          <div id="divisor"></div>
        </figure>
        <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
      </div>
     </div>
    <!-- partial -->
    
      <script  src="./script.js"></script>
    
    </body>
    </html>
    
    

    Lưu ý: Các bạn nhớ bổ sung file style.css và script.js vào cùng thư mục file HTML nhé

    Bước 2: Trang trí giao diện với CSS
    Tạo file với với tên style.css

    Đầu tiên chúng ta sẽ set kích thước cho khung ảnh

    .container {
      max-width: 600px;
    }
    
    #comparison {
      width: 100%;
      padding-bottom: 100%;
      overflow: hidden;
      position: relative;
    }
    

    Ở trên nếu bạn muốn ảnh to hoặc nhỏ chỉ cần sửa max-width: 600px bằng kích thước bạn muốn là được.

    Cấu hình CSS cho ảnh trước và sau:

    figure {
      position: absolute;
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553461-photoshop-face-before.jpg);
      background-size: cover;
      font-size: 0;
      width: 100%;
      height: 100%;
      margin: 0;
    }
    
    #divisor {
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553419-photoshop-face-after.jpg);
      background-size: cover;
      position: absolute;
      width: 50%;
      box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
      bottom: 0;
      height: 100%;
    }
    #divisor::before, #divisor::after {
      content: '';
      position: absolute;
      right: -2px;
      width: 4px;
      height: calc(50% - 25px);
      background: white;
      z-index: 3;
    }
    #divisor::before {
      top: 0;
      box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    #divisor::after {
      bottom: 0;
      box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    

    Chú ý: các bạn có thể thay hình ảnh Before After tại background-image bằng đường dẫn ảnh của mình.

    Tiếp theo là handle chính là hình tròn điều khiển ở giữa 2 tấm ảnh:

    #handle {
      position: absolute;
      height: 50px;
      width: 50px;
      top: 50%;
      left: 50%;
      -webkit-transform: translateY(-50%) translateX(-50%);
              transform: translateY(-50%) translateX(-50%);
      z-index: 1;
    }
    #handle::before, #handle::after {
      content: '';
      width: 0;
      height: 0;
      border: 6px inset transparent;
      position: absolute;
      top: 50%;
      margin-top: -6px;
    }
    #handle::before {
      border-right: 6px solid white;
      left: 50%;
      margin-left: -17px;
    }
    #handle::after {
      border-left: 6px solid white;
      right: 50%;
      margin-right: -17px;
    }
    

    Cuối cùng là input, giúp chúng ta có thể di chuyển handle tròn bên trên theo chiều ngang một cách mượt mà:

    input[type=range] {
      -webkit-appearance: none;
      -moz-appearance: none;
      position: absolute;
      top: 50%;
      left: -25px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      background-color: transparent;
      width: calc(100% + 50px);
      z-index: 2;
    }
    input[type=range]:focus, input[type=range]:active {
      border: none;
      outline: none;
    }
    
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      background: transparent;
      border: 4px solid white;
      box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
    }
    
    input[type=range]::-moz-range-track {
      -moz-appearance: none;
      height: 15px;
      width: 100%;
      background-color: transparent;
      position: relative;
      outline: none;
    }
    

    Bước 3: Thiết lập Javascipt thay đổi hiệu ứng
    Tạo file script.js

    var divisor = document.getElementById("divisor"),
        handle = document.getElementById("handle"),
        slider = document.getElementById("slider");
    
    function moveDivisor() {
      handle.style.left = slider.value+"%";
    	divisor.style.width = slider.value+"%";
    }
    
    window.onload = function() {
    	moveDivisor();
    };
    

    Với hàm moveDivisor, mỗi khi chung ta di chuyển handle tròn bên trên thì tỉ lệ hiển thị ảnh của Before và After sẽ thay đổi tạo lên hiệu ứng thay đổi hình ảnh

    Tổng kết:

    File HTML:

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Slide After Before - Nodejs.vn, Nodemy.vn  </title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="container">
      <div id="comparison">
        <figure>
          <div id="handle"></div>
          <div id="divisor"></div>
        </figure>
        <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
      </div>
     </div>
    <!-- partial -->
    
      <script  src="./script.js"></script>
    
    </body>
    </html>
    

    File CSS:

    .container {
      max-width: 600px;
    }
    
    #comparison {
      width: 100%;
      padding-bottom: 100%;
      overflow: hidden;
      position: relative;
    }
    
    figure {
      position: absolute;
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553461-photoshop-face-before.jpg);
      background-size: cover;
      font-size: 0;
      width: 100%;
      height: 100%;
      margin: 0;
    }
    
    #divisor {
      background-image: url(https://nodejs.vn/assets/uploads/files/1598428553419-photoshop-face-after.jpg);
      background-size: cover;
      position: absolute;
      width: 50%;
      box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
      bottom: 0;
      height: 100%;
    }
    #divisor::before, #divisor::after {
      content: '';
      position: absolute;
      right: -2px;
      width: 4px;
      height: calc(50% - 25px);
      background: white;
      z-index: 3;
    }
    #divisor::before {
      top: 0;
      box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    #divisor::after {
      bottom: 0;
      box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
    }
    
    #handle {
      position: absolute;
      height: 50px;
      width: 50px;
      top: 50%;
      left: 50%;
      -webkit-transform: translateY(-50%) translateX(-50%);
              transform: translateY(-50%) translateX(-50%);
      z-index: 1;
    }
    #handle::before, #handle::after {
      content: '';
      width: 0;
      height: 0;
      border: 6px inset transparent;
      position: absolute;
      top: 50%;
      margin-top: -6px;
    }
    #handle::before {
      border-right: 6px solid white;
      left: 50%;
      margin-left: -17px;
    }
    #handle::after {
      border-left: 6px solid white;
      right: 50%;
      margin-right: -17px;
    }
    
    input[type=range] {
      -webkit-appearance: none;
      -moz-appearance: none;
      position: absolute;
      top: 50%;
      left: -25px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      background-color: transparent;
      width: calc(100% + 50px);
      z-index: 2;
    }
    input[type=range]:focus, input[type=range]:active {
      border: none;
      outline: none;
    }
    
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      background: transparent;
      border: 4px solid white;
      box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
    }
    
    input[type=range]::-moz-range-track {
      -moz-appearance: none;
      height: 15px;
      width: 100%;
      background-color: transparent;
      position: relative;
      outline: none;
    }
    

    File JS:

    var divisor = document.getElementById("divisor"),
        handle = document.getElementById("handle"),
        slider = document.getElementById("slider");
    
    function moveDivisor() {
      handle.style.left = slider.value+"%";
    	divisor.style.width = slider.value+"%";
    }
    
    window.onload = function() {
    	moveDivisor();
    };
    

    Chúc mọi người thực hiện thành công hiệu ứng Slide Before After nhé 😃
    Link download code: https://github.com/namndwebdev/frontend-casestudy/tree/master/Slide-Before-After

    Video chi tiết

    Slide Before After

    Nguồn : Codepen.io

    posted in Case Study Thực Tế