Chèn nút Call hiệu ứng động chạy dọc website

Lang thang trên mạng tìm các giao diện website đẹp để tham khảo các hiệu ứng mới cho vào website của mình cho sinh động, bất ngờ Web7b bắt gặp một hiệu ứng nút Call quá đẹp hoạt động chủ yếu bằng CSS3 nên rất mượt mà.

Các bài viết trước:

• Hiệu ứng và chuyển động với wow.js và animate.css
• Resize ảnh bằng CSS không bị co giãn tỉ lệ

Để bạn dễ hình dung mình đang nói về cái gì, mời bạn xem ví dụ ở dưới đây:

Sau khi click vào nút Call, hộp hỗ trợ trực tuyến xuất hiện:

Khi nhấn nút Close thì sẽ trở lại màn hình nút Call như ban đầu, thật là tuyệt vời!

Bạn có thể xem trực tiếp tại website khách hàng của Web7b: www.maylanhlevinh.vn

Bạn có thấy nút Call ở góc phải màn hình chưa, quá đẹp phải không nào, bạn có muốn làm nó? Nếu muốn thì tiếp tục xem hướng dẫn ở dưới đây nhé.

Hướng dẫn thêm nút Call chạy dọc màn hình hiệu ứng đẹp

Nói là hướng dẫn cho vui vậy thôi, chứ thực ra mình cũng đi tìm và làm theo từ các hướng dẫn của những website khác mà thôi.

Để làm được nút Call như ở trên, bạn cần tải về 2 file .css này:

• File css thứ 1: coccoc_alo.css
• File css thứ 2: support.css

Sau khi tải về 2 file này rồi, bạn cần upload lên host của mình để sử dụng.

Bạn tiến hành thêm thư viện coccoc_alo.css và support.css vừa tải lên vào cặp thẻ header của website hoặc project.

<link rel="stylesheet" href="css/coccoc_alo.css">
<link rel="stylesheet" href="css/support.css">

Tiếp theo bạn copy đoạn code ở dưới đây và chèn vào phần body của trang web:

<div style="width: 100%; height: 200px; padding: 20px; background: #f7f7f7; overflow: auto;"><span style="color: #0000ff;">
<script type="&lt;span style=" color:="" ff0000="">// <![CDATA[
text/javascript</span>"></span><br>function showHidechatbox(){var t=document.getElementById("chatbox"),o=t.offsetWidth;t.opened?movechatbox(0,19-o):movechatbox(19-o,0),t.opened=!t.opened; t.opened?$('#coccoc-alo-phoneIcon').hide():($('#coccoc-alo-phoneIcon').show());}function movechatbox(t,o){var a=document.getElementById("chatbox"),e=Math.abs(t-o)>10?5:1,n=o>t?1:-1,i=t+e*n;a.style.right=i.toString()+"0px",t!=o&&setTimeout("movechatbox("+i+", "+o+")",1)}<br><span style="color: #0000ff;">
// ]]></script>
</span><br /><span style="color: #0000ff;">/coccoc_alo.css</span>"&gt;<br /><span style="color: #0000ff;">/support.css</span>"&gt;<br />
<div id="coccoc-alo-phoneIcon" class="coccoc-alo-phone coccoc-alo-green coccoc-alo-show" style="position: fixed; right: 0px; bottom: 0px; display: block; transform: scale(1, 1); transform-origin: left top 0px;">
<div class="coccoc-alo-ph-circle-time"><img id="coccoc-alo-external-site-favicon" /> <span id="coccoc-alo-external-site-counter"></span></div>
<canvas id="stopwatch"></canvas>
<div class="coccoc-alo-ph-circle">&nbsp;</div>
<div class="coccoc-alo-ph-circle-fill">&nbsp;</div>
<div class="coccoc-alo-ph-img-circle coccoc-alo-ph-circle-shake">&nbsp;</div>
<div class="coccoc-alo-ph-circle-close">&nbsp;</div>
</div>
<br />
<div id="chatbox" style="right: -230px;"><br /> <br />
<div class="chatboxtab">&nbsp;</div>
<br />
<div class="chatboxcontent"><br />
<div style="width: 230px; height: auto; padding: 10px 20px; background: #FFF;"><br />
<h3>Hỗ trợ &amp; Tư vấn</h3>
<br />
<p style="color: #0672ec;"><strong>Hỗ trợ kinh doanh</strong></p>
<br />
<p style="font-size: 20px; color: #f5030e;">0914 46 42 44</p>
<br />
<p style="color: #0672ec;"><strong>Hỗ trợ kỹ thuật</strong></p>
<br />
<p style="font-size: 20px; color: #f5030e;">01652 833 656</p>
<p>&nbsp;</p>
</div>
</div>
<br /> <span style="color: #0000ff;">
<script>// <![CDATA[
</span>//showHidechatbox()<span style="color: #0000ff;">
// ]]></script>
</span></div>
</div>

Trong đoạn code trên có những đoạn text là thông tin liên hệ của website, do vậy bạn tìm và sửa những thông tin như số điện thoại, email... cho phù hợp với trang web của mình nha.

Sau khi thực hiện xong, hãy quay lại trang web của bạn và xem thành quả nào.

Chúc các bạn thành công!

Nguồn: Thiết kế web HCM