Tạo nút Gấu trúc-Panda giải trí trên web/blog

Tạo nút sản xuất Gấu trúc nhẩy múa trên web/blog vui nhộn giúp bạn thư giãn xả stret những lúc căng thẳng vọc vạch code hoặc mệt nhọc vì xào nấu bài vở chôm chỉa được.

Để cài đặt hiệu ứng panda nhẩy nhót trên web/blog bạn cần vào chỉnh sửa mẫu và dán lần lượt CSS, Javascript và HTML vào những vị trí cần thiết.

DEMO

Để thấy hiệu ứng bạn click chuột vào nút "Panda" và click bao nhiêu con cũng được, không hạn chế số

lượng, kín blog luôn. Muốn tắt thì F5. Cài đặt Panda Button bao gồm.

1. CSS:

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');.cover{position:fixed;width:100%;height:100vh;top:0;left:0;z-index:999;pointer-events:none}
.panda_face.hide{opacity:0}
span{margin-left:12px}
.panda{position:absolute;height:45px;width:45px;overflow:hidden;transition:2s}
.panda_inner{height:100%}
.panda_inner svg{height:100%;width:auto}
button{width:180px;padding:10px 14px;display:flex;justify-content:center;align-items:center;border:solid #006400;border-width:2px 2px 7px;border-radius:10px;background-color:#008080;font-family:'Press Start 2P',cursive;font-size:15px;color:white;transition:0.3s;cursor:pointer;float:right}
button:hover{border-width:2px 2px 4px;margin-top:3px}
button:focus{outline:none;box-shadow:0 0 0 4px hotpink}
.panda_face{position:relative;height:25px;width:auto}
.panda_face{opacity:1}
.panda_face svg{height:100%;width:auto}
.panda_white{fill:white}
.blue{fill:#12b7e9}
.green{fill:rgb(43,163,113)}
.pink{fill:hotpink}
.brown{fill:rgb(126,80,62)}
.dark_brown{fill:rgb(53,34,27)}
button:hover .panda_face{animation:bop infinite 0.5s}
@keyframes bop{0%{top:0;transform:scale(1)}
50%{top:-5px;transform:scale(0.95,1.05)}
90%{transform:scale(1.1,0.9)}
100%{top:0;transform:scale(1)}
}
button.animate svg{animation:spin infinite linear 0.5s}
@keyframes spin{0%{transform:rotate(0)}
100%{transform:rotate(-720deg)}
}
@keyframes fadeout{0%{opacity:1}
90%{opacity:0}
100%{opacity:0;display:none}
}
button:hover .fade_in,.panda_face.fade_in{animation:fade_in forwards 0.5s}
@keyframes fade_in{0%{opacity:0}
100%{opacity:1}
}
button.animate{border-color:rgb(58,28,9);transform-origin:bottom right;animation:shake ease forwards 0.5s}
@keyframes shake{0%{transform-origin:bottom right;transform:translate(0,0) rotate(0deg)}
40%{transform:translate(5px,0) rotate(45deg)}
70%{transform-origin:bottom right;transform:translate(5px,0) rotate(45deg)}
85%{transform-origin:bottom left;transform:translate(0,0) rotate(-20deg)}
95%{transform:translate(0,0) rotate(0deg)}
100%{transform-origin:bottom right;transform:translate(0,0) rotate(0deg)}
}


2. Javascript.

Dán trong phần head hoặc body

<script>
function init() {
const spriteSvg = color =>{
return `
<svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 2117.1 177.4" >
<path class="panda_white" d="M1893.1,133.9l-76.9,8.4l-4.8-3l-5.1,0v-5.1h-5.1v-15.3l20.4-14h50.9l20.6,14V133.9z M1785.9,88.3V73h5.1V62.8
h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5.1l5.1,0l31.6-3.9l44.8,8.8l8.3,10.4v7.9l-71.4,36.2L1785.9,88.3z"/>
<g>
<path class="panda_white" d="M556.7,88.5l0-30.3h5.1v-5.1h5.1V42.9h5.1v-5.1h5.1v-5.1h10.2v-5l50.9,0v5l25.5,0v55.8L556.7,88.5z
M656.9,102.8l11.9,6.4v10.1l-5.1,21.8l-20.4,3.7h-5.1v5.1h-40.7l-25.6-4.3l-5-21.2v-5.1l10.6-16.5H656.9z"/>
</g>
<path class="panda_white" d="M208.8,93.7V83.5h5.1V73.3h5.1l0-25.5l15.3,0h10.2v-5.1h35.6v5.1l25.5,0l0,15.3h5.1v10.2h5.1v15.3h-5.1v5.1
l0,20.3l10.2,0v5.1h-5.1l-0.1,20.4h-30.5v5.1h-30.5v-5.1l-29.4,0l-6.3-10.2v-5.1h-5.1v-5.1h-5.1V114L208.8,93.7z"/>
<g>
<g>
<path class="panda_white" d="M1172,48v-5.1h5.1 M1177.1,42.9h10.2V48h5.1v5.1h5.1v10.2h5.1v30.5l-15.3,30.6v10.2h-5.1v5.1l-12.8,10.2
l-38.2,0v-5.1H1121v-5.1l51-91.7 M1135.8,49.6l11.5,44.2l-41.6,40.8h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V88.7
L1135.8,49.6z"/>
</g>
<path class="${color}" d="M1202.6,88.7h5.1v5.1h5v5.1h5.1v15.3h-5.1v10.2h-10.1v5.1h-15.3v-5.1h-5.1v-15.3h5.1V98.9h5.1v-5.1h10.2
L1202.6,88.7z M1177.1,58.2v-5.1h10.2v5.1h5.1v10.2h-10.2v-5.1h-5.1V58.2 M1177.1,139.7h5.1v10.2h-5.1v5.1h-15.3v-5.1h-5.1v-10.2
H1177.1 M1121.1,37.8h10.1v-5.1h20.4v-5.1h15.3v5.1h5.1v56.1h-5.1V104h-5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1v5.1h-10.2v5.1
h-20.3v-5.1h-5.1v-10.2h5.1v-5.1h5.1v-5.1h5.1v-5.1h5V104h5.1V93.8h5.1V58.2h-5.1v10.2h-5v5.1h-5.1v5.1h-10.2v5.1h-10.2v5.1h-20.4
V78.6h5.1V68.4h5.1v-5.1h5.1v-5.1h5.1V48h10.2v-5.1h5.1v-5.1L1121.1,37.8"/>
</g>
<g>
<path class="panda_white" d="M1514.2,139.5v5.1h-5v5.1h-25.5v-5.1h-5.1v-5h-5.1v-5.1h-5.1v-5.1h-5.1v-5.7l-20.4-35.1V73.3l15.3-25.5h5.1v-5
h5.1v-5.1h10.2v-5.1h10.2v-5.1h10.2L1514.2,139.5z M1539.7,42.8h5.1v5.1h5.1V53h5.1v5.1l-20.4,63h-10.2l-15.8-32.8l-0.2-49
l5.8-11.8h5.1v5.1h10.2v5.1h5.1v5.1L1539.7,42.8"/>
<path class="${color}" d="M1458.2,129.3H1448v-5.1h-5.1v-5.1h-5.1V93.6h5.1v-5.1h15.3v5.1h5.1v30.6h-5.1L1458.2,129.3z M1458.2,63.1
h-5.1v5.1h-5.1v5.1h-5.1v-5.1h-5.1V58h5.1v-5.1h5.1v-5h10.2V63.1z M1504.1,134.4v10.2h-15.3v-5.1h-5.1v-5.1h5.1v-5.1h10.2v5.1
L1504.1,134.4z M1509.1,134.4v-5.1h-5v-5.1h-5.1V114h-5.1v-5.1h-5.1v-5.1h-5.1V93.6h-5.1V47.8h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5
h15.2v61h5.1v10.2h5.1v10.2h5.1v5.1h5.1V83.4h5.1V68.2h5.1v-5.1h5.1V58h5.1v5.1h5.1v10.2h5.1V114h-5.1v10.2h-5.1v5.1h-10.2v5.1
h-5.1v15.3h-25.5v-10.2h-5.1L1509.1,134.4"/>
</g>
<g>
<path class="panda_white" d="M793.7,32.7v5.1h10.2l35.6,20.4v5.1h5.1v6.6l5.1,8.9l0,35.4h-5.1v10.2h-5.1v5.1h-5.1l-81.5-71.3v-5.1h-5.1
V42.9h5.1v-5.1h5.1v-5.1L793.7,32.7z M821.3,126.8l2.9,12.9v5.1h-5.1v5.1h-10.2v5.1h-30.5v-6.3L747,98.6l3.4-14.1l20.6-2.8
L821.3,126.8z"/>
<path class="${color}" d="M844.6,68.3h10.2v5.1H865v15.3h-5.1v5.1h-5.1v5.1h-10.2L844.6,68.3L844.6,68.3z M839.5,47.9v10.2h-5.1v5.1
h-15.3v-5.1H814V53h-5.1v-5.1h-5.1V32.6h5.1v-5.1h15.3v5.1h10.2v5.1h5.1V47.9 M763.1,42.8h5.1v-5.1h10.2v10.2h-5.1V53H758v-5.1h5.1
V42.8z M752.9,53v5.1h25.5v5.1h10.2v5.1h5.1v5.1h5.1v5.1h5.1v5.1H814v5.1h5.1v5.1h5.1v5.1h5.1V109h5.1v25.5h-5.1v5.1h-10.2v-5.1
H814v-5.1h-5.1v-5.1h-5.1v-5.1h-5v-5.1h-5.1v-5h-5.1V104h-5.1v-5.1h-15.3v-5.1H758v-5.1h-5.1v10.2h5.1v5.1h5.1v5h5.1v10.2h5.1v10.2
h5.1v20.4h-15.3v-5.1H758v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-10.1h-5.1V78.5h5.1v-5.1h-5.1V58.1h5.1V53H752.9z"/>
</g>
<path class="${color}" d="M577.1,129.5v5.1h10.2v5.1h10.2V155h-5.1v5.1h-15.3V155H572v-5.1h-5.1v-10.2h-5.1v-10.2h5.1v-5.1h5.1v5.1H577.1
z M582.2,58.2h5.1v-5.1h5.1V48h5.1v5.1h5.1v5.1v5.1v5.1h-5.1v5.1h-15.3L582.2,58.2L582.2,58.2z M597.5,17.5h5.1v-5.1h20.3v5.1h10.2
v20.3H628l0,0v5.1h-15.3v-5.1h-5.1v-5h-5v-5.1h-5.1L597.5,17.5L597.5,17.5z M663.7,155h-5.1v5.1h-10.2V155h-5.1v-15.3h10.2v-5.1h5.1
v-5.1h5.1v-10.2h5.1v25.5h-5.1V155z M658.6,53.1V42.9h-5.1V32.7h5.1v-5h10.2v5h5.1V48h-5.1l0,0v5.1H658.6z M668.8,109.2h-51v5.1
h-40.7v5h-10.2v-15.2h-5.1V99h-5.1v-5.1h-5.1v-5.1h-5.1V78.6h5.1v-5.1h15.3v5.1h15.3v5.1h50.9v-5.1h25.5v-5.1h5.1v-5.1h25.5v20.4
h-5.1v5.1H679V99h-10.2l0,0V109.2z"/>
<g>
<polyline class="${color}" points="1962.2,83.6 1962.2,78.5 1962.2,73.4 1967.3,73.4 1967.3,73.4 1967.3,73.4 1967.3,68.3 1967.3,63.2
1972.4,63.2 1972.4,63.2 1972.4,63.2 1972.4,58.1 1972.4,53 1977.5,53 1977.5,53.1 1977.5,53 1977.5,48 1982.6,48 1982.6,48
1982.6,48 1982.6,42.9 1987.7,42.9 1987.7,37.8 1992.8,37.8 1992.8,37.8 1997.8,37.8 1997.9,37.8 1997.8,37.8 1997.8,32.7
2002.9,32.7 2008,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,27.6 2018.2,27.6 2023.3,27.6
2023.3,27.6 2028.4,27.6 2033.5,27.6 2038.6,27.6 2038.6,27.6 2043.7,27.6 2048.8,27.6 2048.8,32.7 2048.8,32.7 2048.8,32.7
2053.9,32.7 2059,32.7 2059,37.8 2064.1,37.8 2064.1,37.8 2069.2,37.8 2069.2,42.9 2074.3,42.9 2074.3,48 2074.3,48 2079.4,48
2079.4,53 2079.4,53.1 2079.4,58.1 2079.3,58.1 2079.4,58.1 2084.4,58.1 2084.4,63.2 2084.4,63.2 2084.4,63.2 2089.5,63.2
2089.5,68.3 2089.5,73.4 2094.6,73.4 2094.6,78.5 2094.6,83.6 2094.6,88.7 2094.6,88.7 2094.6,93.8 2094.6,98.9 2094.6,104
2094.6,109.1 2089.5,109.1 2089.5,114.2 2089.5,114.2 2089.5,119.3 2084.4,119.3 2084.4,124.4 2084.4,129.5 2079.4,129.5
2079.4,129.4 2079.4,129.5 2079.3,129.5 2079.4,129.5 2079.4,134.5 2074.3,134.5 2074.3,134.5 2074.3,139.6 2069.2,139.6
2069.2,144.7 2064.1,144.7 2064.1,144.7 2059,144.7 2059,149.8 2053.9,149.8 2048.8,149.8 2048.8,154.9 2043.7,154.9 2038.6,154.9
2038.6,154.9 2033.5,154.9 2028.4,154.9 2023.3,154.9 2023.3,154.9 2018.2,154.9 2013.1,154.9 2013.1,154.9 2008,154.9 2008,149.8
2002.9,149.8 1997.9,149.8 1997.8,149.8 1992.8,149.8 1992.8,144.7 1992.8,144.7 1992.8,144.7 1987.7,144.7 1987.7,139.6
1982.6,139.6 1982.6,139.6 1977.5,139.6 1977.5,134.5 1977.5,129.5 1977.5,129.4 1977.5,129.5 1972.4,129.5 1972.4,124.4
1972.4,119.3 1967.3,119.3 1967.3,114.2 1967.3,114.2 1967.3,109.1 1967.3,104 1967.3,104 1967.3,104 1962.2,104 1962.2,98.9
1962.2,93.8 1962.2,88.7 1962.2,88.7 1962.2,83.6 "/>
</g>
<path class="${color}" d="M1811.4,144.5v-5.1h5.1v-5.1h10.2v-5.1h10.2v-5.1h50.9V119h-5.1v-5.1h-10.2v-5.1h-50.9v5.1h-10.2v5.1h-10.2v5.1
h-5.1V119h-5.1v-15.3h-5.1V88.5h5.1v-5.1h10.2v-5.1h5.1v-5.1h10.2v-5.1h5.1V63h10.2v-5.1h45.8V63h20.4v-5.1h-5.1v-5.1h-10.2v-5.1
h-45.8v-5.1h-20.4v-5.1h5.1v-5.1h15.3v-5.1h35.6v5.1h10.2v5.1h10.2v5.1h5.1v5.1h5.1v5.1h5.1v5.1h5.1v10.2h5.1v10.2h5.1v30.5h-5.1
v5.1h-5.1v10.2h-5.1v10.2H1898v5.1h-5.1v5.1h-10.2v5.1h-10.2v5.1h-40.7v-5.1h-15.3v-5.1H1811.4z"/>
<g>
<path class="panda_white" d="M929.4,134.7h-5.1v-5.1h-5.1v-5.1h5.1l0.4-42l20.8-32.7L962.7,89l0.6,50.4L960,155h-5.1v-5.1h-10.2v-5.1h-5.1
v-5h-10.2V134.7 M1010.9,139.8h-5.1v5h-10.2v5.1h-10.2v5.1h-10.2v-5.1h5.1l-19.6-90.7L960,43v-5.1h5v-5.1h5.1v-5.1h15.3v5.1h5.1
v5.1h5.1V43h5.1v5.1h5.1v5.1h5.1v9.1l15.1,0.6v31.1h5.3v15.3h-5.1v5.1h-5.1v5.1h-5.1v15.3h-5.1L1010.9,139.8z"/>
<path class="${color}" d="M985.4,53.2h-10.2v-5.1h-5.1V37.9h15.3V43h5.1v5.1h-5.1V53.2z M985.4,144.8h-5.1v5.1h-5.1v5.1H960V93.9h-5.1
V83.7h-5.1V73.5h-5.1v-5.1h-5.1V99h-5.1v15.3h-5.1v5.1h-5.1v5.1h-5.1v-5.1h-5.1v-10.2H909V68.4h5.1V58.2h5.1v-5h10.2v-5.1h5.1V32.8
h5.1v-5.1h15.3v5.1h5.1V43h5.1v10.2h5v5h5.1v10.2h5.1v5.1h5.1v5.1h5.1v10.2h5.1v45.9h-5.1v5h-5.1L985.4,144.8z M1036.4,124.5h-5.1
v5.1h-5.1v5.1H1016v-5.1h-5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v5.1h5.1L1036.4,124.5L1036.4,124.5z M1036.4,88.8h-5.1v5.1H1016
v-5.1h-5.1V58.2h5.1v-5h10.2v5h5.1v5.1h5.1L1036.4,88.8L1036.4,88.8z"/>
</g>
<g>
<path class="panda_white" d="M149.5,68.2V58h-5.1V47.8l-4.6-20.5l-20.9,0.1v-5.1h-10.2v-5.1H73.1v5.1H62.9l-16.6,5.1l-3.9,5l0.1,20.5h-5.1
l0,33H27.3l-0.1,34.9h20.4v13.8l25.5-0.2v5.1l65.7,0l0.3-15.3h5.3v-5.1h5.1v-10.2L149.5,68.2z"/>
<path class="${color}" d="M98.7,63.1H88.5V58h10.2V63.1z M103.8,73.3H83.4v-5.1h-5.1v-5.1h5.1v5.1h20.4V73.3z M124.1,42.7v5.1h5.1v5.1
h5.1v10.2H119V58h-5.1V42.7H124.1z M149.6,42.7h-5.1v5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V22.3h5.1v-5.1h10.2v5.1h5.1v5.1h5.1
L149.6,42.7L149.6,42.7z M103.8,134.4H119v-5.1h10.2v-5.1h10.2v30.6h-5.1v5H119v-5h-5.1v-5.1h-5.1v-5.1h-5V134.4z M68.1,42.7h5.1
V58h-5.1v5.1H57.9V58h-5.1V47.8h5.1v-5.1H68.1 M52.8,17.2h5.1v5.1H63v5.1h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1 M42.6,42.7h-5.1V27.4
h5.1v-5.1h5.1v-5.1h5.1 M22.3,139.5h-5.1v-20.4h5.1V114h5v-5.1h20.4v5.1h5.1v5.1h5.1v5.1H63v10.2h-5.1v5.1h-5.1v5.1H42.6v5.1H32.4
v-5.1H22.3V139.5z M52.8,78.3h5.1v5.1h66.2v-5.1h15.3v-5.1h5.1v-5h5.1v10.1h15.3v5.1h5.1v15.3h-5.1v5.1h-5.1v5.1h-15.3v-5.1h-10.2
v-5.1h-10.2v-5.1H52.8v5.1H27.3v-5.1h-5V83.4h-5.1v-5.1h-5.1v-5H7V52.9h5.1v-5.1h10.2v5.1h5.1V58h5v5.1h5.1v5.1h5.1v5h5.1v5.1
L52.8,78.3"/>
</g>
<path class="${color}" d="M285.3,42.7h5.1v-5.1h15.3v5.1h5.1v5.1h5.1V58h-5.1v5.1h-5.1V58h-5.1v-5.1h-5.1v-5.1h-10.2L285.3,42.7
L285.3,42.7z M280.2,68.2h5.1v-5.1h10.2v5.1h5.1v10.2h-5.1v5.1h-10.2v-5.1h-5.1V68.2z M259.8,73.3H270v5.1h-10.2V73.3z M254.8,83.5
h20.3v5.1h-20.3V83.5z M244.6,68.2v10.2h-5.1v5.1h-15.3V73.3h5.1v-5.1h5.1v-5.1h5.1v5.1L244.6,68.2z M208.9,47.8h5.1v-5.1h15.3v5.1
h5.1v5.1h-5.1V58h-5.1v5.1h-5.1v5.1H214v-5.1h-5.1V47.8z M239.5,154.8v5.1h-15.3v-5.1h-5.1v-25.5h15.3v5.1h10.2v5.1h5.1v10.2h-5.1
v5.1L239.5,154.8z M321,144.6v5.1h-5.1v5.1h-15.3v-5.1h-5.1v-5.1h-5.1v-10.2h10.2v-5.1h10.2v-5.1h5.1v-5.1h10.2v25.5H321z
M341.4,98.8h-5.1v5h-5.1v5.1h-5.1v5.1h-25.5v-5.1h-61.1v5.1h-45.9v-5.1h-5.1V93.7h5.1v-5.1h15.3v5.1h101.9v-5.1h5.1v-5.1h5.1v-5.1
h10.2v5.1h5.1v5.1h5.1L341.4,98.8L341.4,98.8z"/>
<g>
<path class="panda_white" d="M380.1,108.9v10.2h5.1v5.1h5.3l0.3,15.3l65.7,0v-5.1l25.5,0.2v-13.8h20.4l-0.1-34.9h-10.1l0-33h-5.1l0.1-20.5
l-3.9-5l-16.6-5.1h-10.2v-5.1h-35.6v5.1h-10.2v5.1l-20.9-0.1l-4.6,20.5V58h-5.1v10.2L380.1,108.9z"/>
<path class="${color}" d="M430.9,58h10.2v5.1h-10.2V58z M425.8,68.2h20.4v-5.1h5.1v5.1h-5.1v5.1h-20.4V68.2z M415.7,42.7V58h-5.1v5.1
h-15.3V52.9h5.1v-5.1h5.1v-5.1H415.7z M380,42.7V27.4h5.1v-5.1h5.1v-5.1h10.2v5.1h5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1v-5.1
H380L380,42.7z M425.8,144.6h-5v5.1h-5.1v5.1h-5.1v5h-15.3v-5h-5.1v-30.6h10.2v5.1h10.2v5.1h15.2V144.6z M461.5,42.7h10.2v5.1h5.1
V58h-5.1v5.1h-10.2V58h-5.1V42.7H461.5 M487,42.7h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h5.1v-5.1h5.1 M476.8,17.2h5.1v5.1h5.1
v5.1h5.1v15.3H487 M507.3,144.6h-10.1v5.1H487v-5.1h-10.2v-5.1h-5.1v-5.1h-5.1v-10.2h5.1v-5.1h5.1V114h5.1v-5.1h20.4v5.1h5v5.1h5.1
v20.4h-5.1V144.6z M476.8,78.3h5.1v-5.1h5.1v-5h5.1v-5.1h5.1V58h5v-5.1h5.1v-5.1h10.2v5.1h5.1v20.4h-5.1v5h-5.1v5.1h-5.1v10.2h-5
v5.1h-25.5v-5.1h-71.3v5.1h-10.2v5.1h-10.2v5.1h-15.3v-5.1h-5.1v-5.1h-5.1V83.4h5.1v-5.1H380V68.2h5.1v5h5.1v5.1h15.3v5.1h66.2
v-5.1L476.8,78.3"/>
</g>
<g>
<path class="panda_white" d="M1295.2,60.5l-2.9-12.9v-5.1h5.1v-5.1h10.2v-5.1h30.5v6.3l31.4,50.1l-3.4,14.1l-20.6,2.8L1295.2,60.5z
M1322.8,154.6v-5.1h-10.2l-35.6-20.4V124h-5.1v-5.8l-5.1-13l0-32.2h5.1V62.9h5.1v-5.1h5.1l81.5,71.3v5.1h5.1v10.2h-5.1v5.1h-5.1
v5.1H1322.8z"/>
<path class="${color}" d="M1271.9,119h-10.2v-5.1h-10.2V98.6h5.1v-5.1h5.1v-5.1h10.2V119L1271.9,119z M1277,139.4v-10.2h5.1v-5.1h15.3
v5.1h5.1v5.1h5.1v5.1h5.1v15.3h-5.1v5.1h-15.3v-5.1h-10.2v-5.1h-5.1V139.4 M1353.4,144.5h-5.1v5.1h-10.2v-10.2h5.1v-5.1h15.3v5.1
h-5.1V144.5z M1363.6,134.3v-5.1h-25.5v-5.1h-10.2V119h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-10.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V78.3
h-5.1V52.8h5.1v-5.1h10.2v5.1h5.1v5.1h5.1V63h5.1v5.1h5v5.1h5.1v5h5.1v5.1h5.1v5.1h15.3v5.1h10.2v5.1h5.1V88.4h-5.1v-5.1h-5.1v-5
h-5.1V68.1h-5.1V57.9h-5.1V37.5h15.3v5.1h5.1v5.1h5.1v5.1h5.1v5.1h5.1V63h5.1v5.1h5.1v10.1h5.1v30.6h-5.1v5.1h5.1v15.3h-5.1v5.1
H1363.6z"/>
</g>
<g>
<g>
<path class="panda_white" d="M1650.3,139.3v5.1h-5.1 M1645.2,144.4H1635v-5.1h-5.1v-5.1h-5.1V124h-5.1V93.5l15.3-30.6V52.7h5.1v-5.1
l12.8-10.2l38.2,0v5.1h10.2v5.1l-51,91.7 M1686.5,137.7L1675,93.5l41.6-40.8h5.1v5.1h5.1v5.1h5.1V68h5.1v5.1h5.1v25.5
L1686.5,137.7z"/>
</g>
<path class="${color}" d="M1619.7,98.6h-5.1v-5.1h-5v-5.1h-5.1V73.1h5.1V62.9h10.1v-5.1h15.3v5.1h5.1v15.3h-5.1v10.2h-5.1v5.1h-10.2
L1619.7,98.6z M1645.2,129.1v5.1H1635v-5.1h-5.1v-10.2h10.2v5.1h5.1V129.1 M1645.2,47.6h-5.1V37.4h5.1v-5.1h15.3v5.1h5.1v10.2
H1645.2 M1701.2,149.5h-10.1v5.1h-20.4v5.1h-15.3v-5.1h-5.1V98.5h5.1V83.3h5.1V73.1h5.1V68h5.1v-5.1h5.1v-5.1h5.1v-5.1h10.2v-5.1
h20.3v5.1h5.1v10.2h-5.1V68h-5.1v5.1h-5.1v5.1h-5v5.1h-5.1v10.2h-5.1v35.6h5.1v-10.2h5v-5.1h5.1v-5.1h10.2v-5.1h10.2v-5.1h20.4
v10.2h-5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v10.2h-10.2v5.1h-5.1v5.1H1701.2"/>
</g>
</svg> `
}
const colorVariations = [
'blue',
'green',
'pink',
'brown',
'dark_brown'
]
const animationPattern = [
11,11,11,11,10,
9,8,7,6,5,4,
9,8,7,6,5,4,
3,2,1,0
]
const frameSize = 45
//rolling animation
const animateSprite = (target, speed) => {
let i = 0
target.style.margin = `0px 0px 0px -${(animationPattern[i] * frameSize)}px`
setInterval(function () {
target.style.margin = `0px 0px 0px -${(animationPattern[i] * frameSize)}px`
if (animationPattern[i] === 0) {
i -= 2
} else {
i++
}
}, speed)
}
const pandaFace = document.querySelector('.panda_face')
const button = document.querySelector('button')
const cover = document.querySelector('.cover')
const pandaIcon = document.querySelectorAll('.panda_icon')
let pandaPos = pandaFace.getBoundingClientRect()
let pandaColor = pandaIcon[1].classList[1]
let pandaSwitch = true
const movePanda = target =>{
target.style.transition = '10s'
const randomTop = Math.ceil(Math.random() * 100)
target.style.zIndex = randomTop
target.style.top = `${randomTop}%`
target.style.left = `${Math.ceil(Math.random() * 100)}%`
}
const animateButton = () =>{
pandaColor = pandaIcon[1].classList[1]
button.classList.add('animate')
pandaIcon.forEach(ele=>ele.classList.add(pandaColor))
pandaFace.classList.remove('fade_in')
}
const completeButtonAnimation = () =>{
button.classList.remove('animate')
pandaFace.classList.remove('hide')
pandaFace.classList.add('fade_in')
pandaIcon[1].classList.add(colorVariations[Math.floor(Math.random() * colorVariations.length)])
pandaSwitch = true
}
const createAndAnimatePanda = () =>{
const panda = document.createElement('div')
panda.classList.add('panda')
panda.style.top = `${pandaPos.y - 10}px`
panda.style.left = `${pandaPos.x - 10}px`
cover.appendChild(panda)
const inner = document.createElement('div')
inner.classList.add('panda_inner')
inner.style.width = `${frameSize * 12}px`
inner.innerHTML = spriteSvg(pandaColor)
panda.appendChild(inner)
animateSprite(inner, 110)
pandaFace.classList.add('hide')
setTimeout(()=>{
panda.style.left = `${pandaPos.x > 300 ? pandaPos.x - 300 : 50}px`
pandaIcon.forEach(ele=>ele.classList.remove(pandaColor))
}, 40)
setTimeout(()=>{
movePanda(panda)
setInterval(()=>{
movePanda(panda)
},4000)
}, 2000)
}
const triggerPanda = ()=>{
if (!pandaSwitch) return
pandaSwitch = false
animateButton()
setTimeout(()=>{
createAndAnimatePanda()
setTimeout(()=>{
completeButtonAnimation()
},1200)
},560)
}
button.addEventListener('click', triggerPanda)
window.addEventListener('resize', ()=>pandaPos = pandaFace.getBoundingClientRect())
}
window.addEventListener('DOMContentLoaded', init)
</script>


3. HTML.

Dán HTML vào chỗ mà bạn cần đổ gấu ra

<button>
<div class='panda_face'>
<svg height='100%' viewBox='0 0 91.7 71.3' width='100%' x='0px' y='0px'>
<path class='panda_icon panda_white' d='M86.6,20.4v15.3h5.1v20.4h-5.1v5.1h-5.1v5H71.3v5.1H20.4v-5.1H10.2v-5H5.1v-5.1H0V35.7h5.1V20.4L25.5,5.1h40.7L86.6,20.4z'/>
<path class='panda_icon pink' d='M40.7,45.8h10.2v5.1H40.7V45.8z M10.2,25.4H5.1v-5.1H0V10.2h5.1V5.1h5.1V0h10.2v5.1h5.1v5.1h-5.1v5.1h-5.1v5h-5.1V25.4z M30.5,45.8h-5v5.1H15.3V35.6h5.1v-5.1h10.1V45.8z M61.1,56H56v5.1H35.6V56H56v-5.1h5.1V56z M76.4,50.9H66.2v-5.1h-5.1V30.5h10.2 v5.1h5.1V50.9z M91.7,20.3h-5.1v5.1h-5.1v-5.1h-5.1v-5h-5.1v-5.1h-5.1V5.1h5.1V0h10.2v5.1h5.1v5.1h5.1V20.3z'/>
</svg>
</div>
<span>panda!</span>
</button>
<div class='cover'/>
<div style='clear: both'/>


ST

Post a Comment

Previous Post Next Post