[JS] Div tự động nhảy loi choi

Hi các bạn, trong công việc của mình, có 1 số trang OnePage yêu cầu có một số hiệu ứng động khá vui mắt như trái banh tưng tưng trên trang web chẳng hạn.

Hiệu ứng này mình cũng chả biết gọi tên nó là gì , thôi cứ tạm gọi là "nhảy loi choi". Tự code "hướng đối tượng" cho dễ xài

Bước 1: nhét thư viện jquery vào code của bạn

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Bước 2: Phần html đơn giản chỉ là 1 cái div

PHP:

<div class="div-1 div">1</div>

Bước 3: CSS make-up cho nó sặc sỡ đồng bóng tí

PHP:

        .div {
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            line-height: 50px;
            color: white;
            font-weight: bold;
            text-align: center;
        }
        .div-1 {         
            top: 50px;
            background-color: red;
            left: 500px;
        }


Bước 4: Bây giờ là phần code js xử lí

• Mình sử dụng 1 hàm của jquery là animation !
• Hàm _vertical để thực hiện việc nhảy loi choi theo chiều dọc. Gồm 2 hàm con là _vertical_1 là hàm nhảy lên, _vertical_2 là hàm nhảy xuống . Hai hàm liên kết với nhau tạo hiệu ứng "nhảy loi choi".
  
• Các tham số a là div muốn hiệu ứng nhảy, b là khoảng cách nhảy tính theo px, c là thời gian nửa chu kì nhảy tính theo ms (c càng cao tốc độ càng chậm)
  
• Trong demo có thêm trường hợp nhảy ngang, .

Bước 5: Kết quả


Link demo: Here
(Cảm ơn Đoilơ ViệtDesigner đã tài trợ hosting )