Thư giãn, giải trí với hiệu ứng Pop Some Bubbles trên blogspot/blogger

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;
}

Nguồn:https://dautoblognz.blogspot.com/