Creating a Baidu Homepage “Yuanxiao Festival Tangyuan” Animation with JavaScript setInterval

This tutorial demonstrates how to recreate Baidu’s Yuanxiao Festival “Tangyuan” animation by using a sprite image and JavaScript’s setInterval to repeatedly shift background positions.

The principle is to use a sliced image (sprite sheet) and change its background position to simulate frame‑by‑frame animation.

Sprite image URL: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png

Below is the complete page code (HTML, CSS, and JavaScript) that implements the animation:

<code>&lt;!DOCTYPE html&gt;
&lt;%@ page language="java" contentType="text/html; charset=UTF-8"%&gt;
&lt;%
    String ctxPath = request.getContextPath();
    request.setAttribute("ctxpath", ctxPath);//项目根路径
%&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;script src="${ctxpath}/js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
&lt;%-- &lt;link href="${ctxpath}/css/main.css" rel="stylesheet"&gt; --%&gt;
   &lt;title&gt;首页&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
$(function(){ //6210
    // 0 270 540 810 1080 1890 2700 2970 3510 3780 4050 4320 5130 5940 6480 7290
    // 定时任务,每隔100ms执行一次函数
    setInterval("tangyuan()",100);
    setInterval("tangyuan1()",100);
    //setInterval("indexChange()",1);
});
//汤圆 正着挖
var count = 0;
function tangyuan(){
    count = count - 270;
    if(count == -8370){
        count = 0;
    }
    var ctxpath = '${ctxpath}';
    //url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png")
    //https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
    $("#tangyuan").css("background","url("+ctxpath+"/img/baidu/baidu_tangyuan.png) "+count+"px 0px no-repeat");
}
//汤圆 倒着挖
var count1 = -8370;
function tangyuan1(){
    count1 = count1 + 270;
    if(count1 == 0){
        count1 = -8370;
    }
    var ctxpath = '${ctxpath}';
    //url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png")
    //https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
    $("#tangyuan1").css("background","url("+ctxpath+"/img/baidu/baidu_tangyuan.png) "+count1+"px 0px no-repeat");
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;span style="position: absolute;left: 30%"&gt;汤圆我要正着挖(●ˇ∀ˇ●)：&lt;/span&gt;
    &lt;!-- background: url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png") -2970px 0px no-repeat; --&gt;
    &lt;div id="tangyuan" style="position: absolute; top: 0px; left: 50%; cursor: pointer; width: 270px; height: 129px; margin-left: -135px;" title="团团圆圆乐元宵"&gt;
    &lt;/div&gt;
    &lt;span style="position: absolute;left: 0%"&gt;汤圆我要倒着挖o(*￣︶￣*)o：&lt;/span&gt;
    &lt;!-- background: url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png") -2970px 0px no-repeat; --&gt;
    &lt;div id="tangyuan1" style="position: absolute; top: 0px; left: 20%; cursor: pointer; width: 270px; height: 129px; margin-left: -135px;" title="团团圆圆乐元宵"&gt;
&lt;/body&gt;
&lt;/html&gt;</code>

The script sets two intervals that call tangyuan() and tangyuan1() every 100 ms, adjusting the background‑position of two absolutely positioned <div> elements to animate the tangyuan moving forward and backward.