4

Cách tạo hiệu ứng drop down css – Paper folding

Gần đây, tôi nhận được một câu hỏi thú vị từ bạn Trần Hoàng Hải, đó là làm thế nào để tạo form/menu có hiệu ứng đồ họa giống như một xấp giấy đổ xuống mà chỉ dùng CSS, không dùng đến Javascript. Chúng ta đều biết dùng Js để tạo các hiệu ứng animation trên trang web rất đơn giản, vậy trong trường hợp không dùng js liệu chúng ta có thể tạo hiệu ứng animate sinh động?

Câu trả lời là có! Với sức mạnh của CSS3, ngày nay chúng ta có thể tạo nhiều hiệu ứng động trên  cả 2D và 3D. Vậy hãy cùng theo dõi làm thế nào để thực hiện nhé!

Demo

Chú ý: Các bạn có thể copy ngay source code ở phần demo này để sử dụng nếu lười đọc giải thích bên dưới. Bấm vào tab HTML và CSS để xem code.

Làm như thế nào?

Tạo form/menu với HTML

Đầu tiên tôi tạo form/menu với code HTML bình thường, cố gắng css để nó hiển thị được như ý trước khi thêm vào các hiệu ứng:

HTML

CSS

Lúc bấy giờ, chúng ta đã có giao diện hiển thị như là “kết quả cuối cùng” như mong muốn. Một form phẳng, bình thường.

Tạo hiệu ứng animation với css3

Ý tưởng

common-folds

Ở đây, chúng ta cần tạo hiệu ứng giống như cuộn giấy (hay xấp giấy gì đó !!!) thả rơi xuống. Vậy chúng ta cần xoay mỗi “tờ giấy” – 1 dòng trong form – một góc 90 độ đến 0 độ theo hướng nhìn của người dùng. Để làm được điều này, chúng ta cần sử dụng hiệu ứng 3D của CSS3 để góc nhìn theo chiều Z, rồi xoay mỗi thẻ div – “tờ giấy” – 90 độ theo chiều trục Z này. Với những dòng div lẻ, ta xoay -90 độ, với dòng div chẵn ta xoay 90 độ.

Thêm hiệu ứng cuộn giấy thả rơi – hiệu ứng drop down css – paper folding

Code CSS để tạo animatin drop down như sau (tôi có bổ sung thêm css tương thích với nhiều trình duyệt khác nhau):

Một số điểm đặc biệt cần chú ý:

  • :nth-child(odd), :nth-child(even): đây là hai psuedo selector của CSS dùng để lấy ra các phần tử có thứ tự chẵn hoặc lẽ.
  • Hàm perspective(700px): hàm này cho phép CSS tạo ra không gian 3D theo chiều Z để triển khai các hiệu ứng. Với giá trị nhỏ hơn, góc nhìn sẽ ở gần đối tượng hơn và cảm giác hiệu ứng nhiều hơn, với giá trị lớn hơn, góc nhìn sẽ xa hơn và hiệu ứng sẽ mềm hơn.
  • RotateX(): dùng hàm này ở mặc định ta để giá trị 90deg, điều này làm cho thẻ div có vẻ như bị kéo lệch và dẹp xuống bằng 0, lúc này chiều cao 0 sẽ làm cho thẻ div ẩn đi. Khi hover qua box, set lại giá trị là 0deg, thẻ div sẽ được kéo lại bình thường với chiều cao của nó, lúc này thẻ div sẽ được hiển thị lên.

 

Bình luận với Facebook

Hoàng Tựa

Yêu thích lập trình web và tạo ra những thứ đẹp đẽ.

4 Comments

  1. http://baobiminhan.com/
    Chào bạn. bạn có thể chỉ mình cách làm hiệu ứng của sub menu khi click vào menu cha giống như website này được ko ạ

    • Chào bạn. Tổ hợp hiệu ứng trên menu trang bạn xem này có thể chia ra làm 2:
      – Hiệu ứng lật: Bạn xem đoạn css trong bài này mình đã làm hiệu ứng lật rồi đấy. Do mình lật nhiều element nên hơi dài, nếu bạn muốn lật 1 elemet thì chú ý các đoạn css:

      .animate {...}
      .animate:nth-child(odd){...}
      .fixedBox:hover .animate:nth-child(odd){...}

      Kết hợp 3 đoạn này sẽ được hiệu ứng lật.
      – Hiệu ứng slide-up màu nền nút: bạn có thể xem demo tại đây http://jsfiddle.net/as5ZU/

  2. Cám ơn bạn nhé. Support nhanh và nguy hiểm quá :v
    chỗ recaptcha bạn cho lên trước cái ô post comment nhé!!!

Leave a Reply

Your email address will not be published. Required fields are marked *