Share Source Code HTML/JavaScript/CSS Troll Bạn Bè Cực Vui

 hehe như tiêu đề, cái này là code bong bóng chat messenger thôi =))

đầu tiên bạn phải có 1 trang web/wap gì cũng được, sau đó dụ nó vào web mình chơi :D kiểu "Ờ tao mới làm trang web nè m vô coi thử đẹp hơm", kiểu kiểu vậy :D khi nó vào rồi thì sẽ có 1 bong bóng chat hiện ra và một âm thanh quen thuộc ping lên như thật luôn :v những điều bạn cần làm là sửa lại link ảnh avatar nữa là xong nha. bong bóng đó nó ở đó mãi thôi =)) khó chịu cực, mình đã thử và thành công troll rồi nha...

Vào việc chính thôi nào: Add css này vào web bạn, vì là để troll thôi thì chúng ta để nó ở thẻ style tiện mai mốt bỏ đi

html

<style type="text/css">#chat-head { 
 background: #fff url('https://nguoinghe.vn/zoom/156x0/uploads/images/trunganhdung/2022/09/12/kg-1662994624.jpg') no-repeat -3px -5px;
 background-size: 80px 80px;
 width: 70px;
 height: 70px;
 -webkit-border-radius: 55px;
 -moz-border-radius: 55px;
 border-radius: 55px;
 background-color: #adafb5;
 -webkit-box-shadow: 0 2px 12px 1px rgba(0,0,0,.89);
 -moz-box-shadow: 0 2px 12px 1px rgba(0,0,0,.89);
 box-shadow: 0 2px 12px 1px rgba(0,0,0,.89);
 border: solid 1px #fff;
 position: fixed;
 right: -110px;
 top: 60px;
 text-decoration: none;
 -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out;
 opacity: 0;
 transition: 5s;
 }
 #chat-head i { 
 width: 17px;
 height: 24px;
 -webkit-border-radius: 4px/3px;
 -moz-border-radius: 4px/3px;
 border-radius: 4px/3px;
 background-color: #adafb5;
 background-image: -webkit-linear-gradient(bottom, #ff1919, #ff5959);
 background-image: -moz-linear-gradient(bottom, #ff1919, #ff5959);
 background-image: -o-linear-gradient(bottom, #ff1919, #ff5959);
 background-image: -ms-linear-gradient(bottom, #ff1919, #ff5959);
 background-image: linear-gradient(to top, #ff1919, #ff5959);
 display: block;
 color: #fff;
 font-style: normal;
 font-family: 'Helvetica';
 font-weight: bold;
 font-size: 16px;
 text-align: center;
 line-height: 28px;
 box-shadow: 0px 1px 3px #000;
 -moz-box-shadow: 0px 1px 3px #000;
 -webkit-box-shadow: 0px 1px 3px #000;
 border: 1px solid rgba(255, 0, 0, .5);
 margin: -5px 0 0 -5px;
 text-shadow: 0 2px 0 #c51414;
 }
 #chat-head.animate { right: -10px;opacity: 1 }
 </style>

tiếp theo đặt cái này ở header

html

<a id="chat-head" href="#">
   <i>1</i>
 </a>
 
 <audio id="pingpong" autoplay>
   <source src="http://nhacchuongvui.com/wp-content/uploads/Nhac-chuong-tin-nhan-Messenger-www_nhacchuongvui_com.mp3?_=1" type="audio/mpeg">
 </audio>

và không thể thiếu javascript =)) cái này là chính nè

html

<script>
   var element = document.getElementById("chat-head");
   var pingpong = document.getElementById("pingpong");
   element.classList.add("animate");
   pingpong.play();
   dragElement(document.getElementById(("chat-head")));
 function dragElement(elmnt) {
   var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
   if (document.getElementById(elmnt.id + "header")) {
     document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
   } else {
     elmnt.onmousedown = dragMouseDown;
   }
   function dragMouseDown(e) {
     e = e || window.event;
     pos3 = e.clientX;
     pos4 = e.clientY;
     document.onmouseup = closeDragElement;
     document.onmousemove = elementDrag;
   }
   function elementDrag(e) {
     e = e || window.event;
     pos1 = pos3 - e.clientX;
     pos2 = pos4 - e.clientY;
     pos3 = e.clientX;
     pos4 = e.clientY;
     elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
     elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
   }
   function closeDragElement() {
     document.onmouseup = null;
     document.onmousemove = null;
   }
 }
 </script>

Giải thích tại sao có javascript thì là lúc đầu không có, sờ vào bong bóng thấy thô quá nên là để cho sinh động hơn chút thì gắn javascript này để có thể di chuyển bong bóng chat đi chổ khác được nhưng không thể tắt được =)) và muốn kéo nó đi cũng cực kì khó luôn nha, cứ kéo mà nó không chịu đi theo ý mà nó cứ từ từ nó đi thôi nên là bực mình lắm luôn.
Đây là link file mp3: nhacchuongvui.com/wp-content/uploads/Nhac-chuong-tin-nhan-Messenger-www_nhacchuongvui_com.mp3?_=1 thay link này nếu không có tiếng nha.
Đây là link avatar mình lụm trên google: nguoinghe.vn/zoom/156x0/uploads/images/trunganhdung/2022/09/12/kg-1662994624.jpg
Demo online: http://imgill.viwap.com/ddos.victim