Một số hiệu ứng khi scroll chuột cho website

Trong bài viết này, hung1001 sẽ giới thiệu cho các bạn một vài hiệu ứng áp dụng khi có sự kiện người dùng cuộn chuột hoặc thay đổi vị trí thanh cuộn. Với việc sử dụng không quá nhiều js, chắc chắn sẽ tạo cho người dùng cảm giác thích thú mỗi khi vào trang của bạn

Bạn xem demo tại đây

 DEMO

1. Reading Progress Bar (phần trăm thanh cuộn ngang)

Viết CSS

#reading-progress{position:fixed;top:0;width:100%;height:3px;margin:0;left:0;z-index:99}
.bar{height:5px;background:#369fcf;position:fixed;top:0;z-index:99}

Cuối cùng chèn code sau trước thẻ đóng </body>

<div id='reading-progress'>
    <span id='progress-bar' class='bar'></span>
</div>
<script type='text/javascript'>//<![CDATA[
window.addEventListener("scroll",function(e){var s=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,body=document.body,html=document.documentElement,d=Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.scrollHeight,html.offsetHeight),c=window.innerHeight,position=s/(d-c)*100;document.getElementById("progress-bar").setAttribute("style","width: "+position+"%")});
//]]></script>

2. Scroll Percentage (phần trăm thanh cuộn dọc)

Viết CSS

#scroll{display:none;position:fixed;top:0;right:15px;z-index:500;padding:3px 8px;background-color:#369fcf;color:#fff;border-radius:3px;font-size:14px}
#scroll:after{content:"";position:absolute;top:50%;right:-10px;height:0;width:0;margin-top:-6px;border:6px solid transparent;border-left-color:#369fcf}

Cuối cùng chèn code sau trước thẻ đóng </body>

<div id='scroll'></div>
<script type='text/javascript'>//<![CDATA[
var scrollTimer=null;$(window).scroll(function(){var viewportHeight=$(this).height(),scrollbarHeight=viewportHeight/$(document).height()*viewportHeight,progress=$(this).scrollTop()/($(document).height()-viewportHeight),distance=progress*(viewportHeight-scrollbarHeight)+scrollbarHeight/2-$("#scroll").height()/2;$("#scroll").css("top",distance).text(" ("+Math.round(100*progress)+"%)").fadeIn(600),null!==scrollTimer&&clearTimeout(scrollTimer),scrollTimer=setTimeout(function(){$("#scroll").fadeOut(600)},1e3)});
//]]></script>

3. Smooth scrolling mouse (hiệu ứng cuộn chuột mượt mà)

Hiệu ứng này chỉ có tác dụng khi bạn dùng con lăn chuột, bình thường khi sử dụng con lăn chuột quá trình chuyển đổi diễn ra rất thô cứng, khi tích hợp tiện ích này bạn sẽ cảm thấy nó rất mượt mà trơn tru

Để tích hợp chỉ cần nhúng script sau

<!--Smooth scrolling mouse : https://cdnjs.com/libraries/smoothscroll-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js' type='text/javascript'></script>

Sau khi tích hợp xong tiến hành lưu mẫu để kiểm tra thành quả

Vậy thôi không có gì khó khăn cho 1 webmaster chuyên nghiệp. Hi vọng bài viết có ích cho bạn

Good Luck !