2/9 Này Làm Gì? Làm Hiệu ứng Lá Cờ Bay Trong Gió Bằng JavaScript

Trang chủ » Hiệu ứng Html » 2/9 Này Làm Gì? Làm Hiệu ứng Lá Cờ Bay Trong Gió Bằng JavaScript

Có thể bạn quan tâm

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!

Bí kíp tạo ra một tokenizer về toán học bằng Javascript

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à:

Làm hiệu ứng lá cờ bay trong gió bằng JavaScript

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:

  • 12 thủ thuật hữu ích trong JavaScript
  • Hướng dẫn: JavaScript Modules
  • 12 tips hay cho JavaScript

Xem thêm việc làm JavaScript trên TopDev

Cách đặt tên class của element trong HTML sao cho phù hợp?

Từ khóa » Hiệu ứng Html