Hướng dẫn tạo Sticky và Collapse Header bằng JS, CSS

Sticky và Collapse là hai hiệu ứng được dùng khá phổ biến cho Header của trang web. Sticky là hiệu ứng khi người dùng cuộn xuống thì Header được giữ đứng yên ở phía trên (fixed top) để tiện truy cập. Gần giống như vậy, Collapse là hiệu ứng Header sẽ được thu nhỏ lại (mà vẫn fixed top) khi người dùng cuộn trang xuống dưới, mục đích là tiết kiệm diện tích, nhìn cho thoáng. Hãy cùng MyLớp.edu.vn tìm hiểu cách tạo ra hai hiệu ứng này thuần túy bằng CSS và JavaScript mà không cần dùng tới jQuery nhé!

Hướng dẫn sử dụng Con bướm xinh Web Screensaver

Sau khi viết bài “CSS3 3D Butterfly – Con bướm xinh phiên bản CSS3“, tôi có ý tưởng làm chương trình này, mục đích vui vẻ là chính, chế ra cái Web Screensaver để anh em chơi dịp Tết sắp đến xuân sắp về. Hôm nay tôi sẽ hướng dẫn các bạn cách cấu hình để có thể điều khiển được chương trình này theo ý mình.

Create a CSS Flipping Animation – Tạo hiệu ứng lật 3D bằng CSS3

Animation là một kỹ thuật hoạt hình rất hấp dẫn và mạnh mẽ của CSS3. Bài hướng dẫn hôm nay của MyLớp.edu.vn sẽ giúp bạn tạo ra một hoạt hình khá bắt mắt, đó là hiệu ứng lật 3D, được sử dụng khá nhiều trong các trang web. Hiệu ứng này sử dụng các thuộc tính perspective, transform, transition và các hàm rotateY(), rotateY() của CSS3.

CSS Background Animations – Tạo hoạt hình đám mây trôi đơn giản

Background animations là một kỹ thuật mạnh mẽ, tạo được hiệu quả bất ngờ nếu bạn biết sử dụng một cách đúng đắn. Trước kia, để làm được việc này, ta phải dùng JavaScript khá phức tạp. May thay, từ khi CSS3 ra đời vài năm gần đây, mọi việc trở nên đơn giản hơn. MyLớp.edu.vn xin giới thiệu tới bạn một ví dụ đơn giản tạo hoạt hình đám mây trôi bằng cách cuộn ảnh nền từ phải sang trái.

Animated scroll to top jQuery Effects

Animated scroll to top là hiệu ứng khá phổ biến và hữu ích trên các trang web có chiều dài lớn. Ở bất kỳ vị trí nào, người dùng cũng có thể cuộn lên phía trên cùng của trang web bằng cách click lên nút “Back to top” thường nằm ở phía dưới bên phải trang web. Hiệu ứng rất êm, mượt, tạo cảm giác dễ chịu.

Đây là một hiệu ứng khá đơn giản mà chúng ta có thể xây dựng bằng jQuery và một chút CSS. Nào, hãy cùng MyLớp.edu.vn tìm hiểu cách làm nhé.