This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Saturday, 19 May 2018

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 !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js