Tạo hiệu ứng Pop Some Bubbles trên blogspot
Pop Some Bubbles là trò chơi nhấp làm vỡ các bong bóng trên mang hình máy tính hay điện thoại thông minh. Tiện ích này có thể tải về cho điện thoại hay PC tại App Store.Nhưng đối với blogspot bạn cũng có thể chơi được trò chơi thư giãn này bằng cách nhấp chuột làm vỡ các bong bóng bay lên từ đáy blog.
Việc cài đặt code cũng không có gì phức tạp và bạn hoàn toàn có thể. Bạn có thể cài ngay trên trang bài viết hoặc trên trang riêng tùy thích hoặc thêm một tiện ích ở đâu đó(sidebar hoặc footer). Khi sủ dụng nên bật chế độ tối.
Cài đặt hiệu ứng Pop Some Bubbles trên blogspot/blogger
Cài trong bài viết hoặc trang riêng
DEMO
Thêm code sau vào cuối bài viết hoặc trang riêng.
<div id='bubble_machine'></div>
<style>
:root {
--bubbles: url('https://lh3.googleusercontent.com/-pwtrBndLo0c/YxjcwV-M9TI/AAAAAAAAEgk/AsDfIOLWH60UTMvFx_pyv30k9VlokHEPQCNcBGAsYHQ/s1600/contentservice-1.png');
}
.post-body {
display: grid;
place-items: center;
min-height: 100vh;
background: url('https://lh3.googleusercontent.com/-hVYSZB69xtA/YxjdAW-0P6I/AAAAAAAAEgs/neUQ1nT6kY4M7HEmErxBrqd6NPCnkirswCNcBGAsYHQ/s1600/contentservice-2.png'), #1486f5;
background-size: auto auto;
background-position: 50% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#bubble_machine {
position: fixed;
inset: 0;
z-index: 999999;
pointer-events: none;
}
.bubble {
width: 100px;
aspect-ratio: 1 / 1;
position: absolute;
top: 100%;
left: 0;
pointer-events: all;
cursor: pointer;
filter: drop-shadow(0px 3px 3px rgba(0,0,0,.05));
transform: translateX(-50%);
animation: bubble_float 10s linear forwards;
}
@keyframes bubble_float {
100% {
top: -130px;
transform: translateX(-50%) rotate(360deg);
}
}
.bubble:after {
content:'';
width: 100%;
height:100%;
position: absolute;
left: 0;
top: 0;
background-image: var(--bubbles);
background-size: auto 100%;
background-position: 0 0;
}
.pop_bubble:after {
animation: pop_bubble .3s steps(6) forwards;
}
@keyframes pop_bubble {
100% {
transform: scale(2);
background-position: -600% 0;
}
}
</style>
<script>
const bm = document.querySelector('#bubble_machine'),
bubble_rate = 500 //milliseconds per release
function addBubble() {
var b = document.createElement('div')
b.className="bubble"
b.style.width = (Math.random()*100) + 28 + 'px'
b.style.left = Math.random()*100 + '%'
b.style.animationDuration = Math.floor(Math.random()*10) + 8 + 's'
// b.style.filter="hue-rotate("+Math.random()*360+'deg)'
b.onclick = function() {
this.classList.add('pop_bubble')
}
b.onanimationend = function() {
this.remove()
}
bm.appendChild(b)
setTimeout(addBubble, bubble_rate)
}
addBubble()
</script>
Trong phần CSS của code bạn có thể bỏ đi đoạn ảnh nền nếu thấy không cần thiết.
.post-body {
display: grid;
place-items: center;
min-height: 100vh;
background: url('https://lh3.googleusercontent.com/-hVYSZB69xtA/YxjdAW-0P6I/AAAAAAAAEgs/neUQ1nT6kY4M7HEmErxBrqd6NPCnkirswCNcBGAsYHQ/s1600/contentservice-2.png'), #1486f5;
background-size: auto auto;
background-position: 50% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
Cài đặt bằng việc thêm một tiện ích Javascript/HTML
DEMO
Với việc thêm một tiện ích thuận tiện cho việc nếu không dùng có thể tạm thời tắt hay ẩn tiện ích đó đi hoặc thay đổi màu nền với mã màu đã bôi màu trong code.
<div id='bubble_machine'></div>
<style>/*<![CDATA[*/
:root {
--bubbles: url('https://lh3.googleusercontent.com/-pwtrBndLo0c/YxjcwV-M9TI/AAAAAAAAEgk/AsDfIOLWH60UTMvFx_pyv30k9VlokHEPQCNcBGAsYHQ/s1600/contentservice-1.png');
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background: url('https://lh3.googleusercontent.com/-hVYSZB69xtA/YxjdAW-0P6I/AAAAAAAAEgs/neUQ1nT6kY4M7HEmErxBrqd6NPCnkirswCNcBGAsYHQ/s1600/contentservice-2.png'), #e5ebff;
background-size: auto auto;
background-position: 50% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#bubble_machine {
position: fixed;
inset: 0;
z-index: 999999;
pointer-events: none;
}
.bubble {
width: 100px;
aspect-ratio: 1 / 1;
position: absolute;
top: 100%;
left: 0;
pointer-events: all;
cursor: pointer;
filter: drop-shadow(0px 3px 3px rgba(0,0,0,.05));
transform: translateX(-50%);
animation: bubble_float 10s linear forwards;
}
@keyframes bubble_float {
100% {
top: -130px;
transform: translateX(-50%) rotate(360deg);
}
}
.bubble:after {
content:'';
width: 100%;
height:100%;
position: absolute;
left: 0;
top: 0;
background-image: var(--bubbles);
background-size: auto 100%;
background-position: 0 0;
}
.pop_bubble:after {
animation: pop_bubble .3s steps(6) forwards;
}
@keyframes pop_bubble {
100% {
transform: scale(2);
background-position: -600% 0;
}
}
/*]]>*/</style>
<script>/*<![CDATA[*/
const bm = document.querySelector('#bubble_machine'),
bubble_rate = 500 //milliseconds per release
function addBubble() {
var b = document.createElement('div')
b.className = 'bubble'
b.style.width = (Math.random()*100) + 28 + 'px'
b.style.left = Math.random()*100 + '%'
b.style.animationDuration = Math.floor(Math.random()*10) + 8 + 's'
// b.style.filter = 'hue-rotate('+Math.random()*360+'deg)'
b.onclick = function() {
this.classList.add('pop_bubble')
}
b.onanimationend = function() {
this.remove()
}
bm.appendChild(b)
setTimeout(addBubble, bubble_rate)
}
addBubble()
/*]]>*/</script>
Lưu ý:
Trong phần CSS của code bạn có thể bỏ đi đoạn ảnh nền nếu thấy không cần thiết.
body {
display: grid;
place-items: center;
min-height: 100vh;
background: url('https://lh3.googleusercontent.com/-hVYSZB69xtA/YxjdAW-0P6I/AAAAAAAAEgs/neUQ1nT6kY4M7HEmErxBrqd6NPCnkirswCNcBGAsYHQ/s1600/contentservice-2.png'), #1486f5;
background-size: auto auto;
background-position: 50% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
Leave a comment