2/9 này làm gì? Làm hiệu ứng “lá cờ bay trong gió” bằng JavaScript cực đơn giản
Giới thiệu
Chào anh em. Hôm nay mình xin chia sẻ về một hiệu ứng rất thú vị. Đó là Flying flag effect: Làm hiệu ứng lá cờ bay trong gió bằng JavaScript, HTML và CSS.
Bắt tay vào làm nào!
Cách làm hiệu ứng lá cờ bay trong gió bằng JavaScript
Mình sẽ demo trên http://jsfiddle.net cho anh em dễ theo dõi nhé.
Về phần HTML của effect rất đơn giản:
<div class='flag'> </div>
Còn đây là CSS:
.flag { width:300px; height:200px; margin:50px; } .flag-element { -webkit-animation:oscill 1s ease-in-out infinite alternate; -moz-animation:oscill 1s ease-in-out infinite alternate; -ms-animation:oscill 1s ease-in-out infinite alternate; animation:oscill 1s ease-in-out infinite alternate; background: url('http://i.imgur.com/8VSL8Ve.gif'); background-size: 300px 100%; position:relative; height:100%; width:1px; display:inline-block; box-shadow:0 1px grey, 0 -1px gray; } @-webkit-keyframes oscill { 0% { top: 5%; } 100% { top: -5%; } } @-moz-keyframes oscill { 0% { top: 5%; } 100% { top: -5%; } } @-ms-keyframes oscill { 0% { top: 5%; } 100% { top: -5%; } } @keyframes oscill { 0% { top: 5%; } 100% { top: -5%; } }
Cuối cùng, tuy ngắn nhưng rất quan trọng đó là JavaScript:
var h = $('.flag').width(); for(var i = 0; i < h; i++){ var flagElement = $("<div class='flag-element'>"); flagElement.css('background-position', -i + "px 0"); flagElement.css('-webkit-animation-delay', i * 10 + 'ms'); flagElement.css('-moz-animation-delay', i * 10 + 'ms'); flagElement.css('-ms-animation-delay', i * 10 + 'ms'); flagElement.css('animation-delay', i * 10 + 'ms'); $('.flag').append(flagElement); }
Và kết quả là:
Kết
Như vậy là mình đã hướng dẫn cách làm hiệu ứng là cờ bay trong gió bằng JavaScript. Rất dễ phải không các bạn.
Chúc các bạn thành công và vui vẻ trong ngày Quốc Khánh nhé !!
Đừng bỏ lỡ những bài viết hay liên quan:
Xem thêm việc làm JavaScript Developer trên TopDev
- G Golang là gì? Top 07 Framework tối ưu “cực căng” cho Golang
- 3 30 laptop lập trình tốt nhất cho lập trình viên năm 2023 (Phần cuối)
- L Lạm Bàn Về Mindset
- 3 30 laptop lập trình tốt nhất cho lập trình viên năm 2023 (Phần 2)
- 3 30 laptop lập trình tốt nhất cho lập trình viên năm 2023 (Phần 1)
- T Tổng hợp tài liệu môn học ngành công nghệ thông tin (Phần 2)
- T Tổng hợp tài liệu môn học ngành công nghệ thông tin (Phần 1)
- 5 5 trang web, nguồn học thuật toán chất lượng để bạn luyện “lên cơ”
- 2 25 blogger IT nổi tiếng mà dân lập trình ai cũng phải biết
- 2 20 tài liệu học Python thiết thực để trở thành lập trình viên chuyên nghiệp