Window smooth scroll untuk blog dengan jQuery

Window smooth scroll dengan jquery yang saya maksud disini adalah menciptakan efek smooth(halus) saat window di scroll.

Sobat pernah mengeluh sama scroll bawaan browser yang tidak smooth? Kalau pernah maka beruntunglah sobat karena menemukan artikel ini, karena disini saya akan membagikan kode yang fungsinya untuk menciptakan efek smooth saat window di scroll. Saya mulai memiliki inisiatif untuk menulis artikel ini dimana saat saya berhasil menemukan kode ini di salah satu web setelah mencarinya berjam-jam. Entahlah, mungkin karena saya salah memasukkan keywordnya atau apalah.

Oke, langsung kita mulai cara memasangnya sob. Sebelumnya saya ingatkan lagi bahwa kode ini berbasis jquery jadi jika sobat belum memasang jquery, silahkan pasang terlebih dahulu. Setelah itu baru ikuti step-stepnya.

CARA PEMASANGAN

Lihat kode dibawah ini :

Uncompressed
Compressed


<script type='text/javascript'>
//<![CDATA[
(function($) {   
    jQuery.scrollSpeed = function(step, speed, easing) {
        var $document = $(document),
            $window = $(window),
            $body = $('html, body'),
            option = easing || 'default',
            root = 0,
            scroll = false,
            scrollY,
            scrollX,
            view;            
        if (window.navigator.msPointerEnabled)
            return false;
        $window.on('mousewheel DOMMouseScroll', function(e) {
            var deltaY = e.originalEvent.wheelDeltaY,
                detail = e.originalEvent.detail;
                scrollY = $document.height() > $window.height();
                scrollX = $document.width() > $window.width();
                scroll = true;
            if (scrollY) {
                view = $window.height();
                if (deltaY < 0 || detail > 0)
                    root = (root + view) >= $document.height() ? root : root += step;
                if (deltaY > 0 || detail < 0)
                    root = root <= 0 ? 0 : root -= step;
                $body.stop().animate({
                    scrollTop: root
                }, speed, option, function() {
                    scroll = false;
                });
            }
            if (scrollX) {
                view = $window.width();
                if (deltaY < 0 || detail > 0)
                    root = (root + view) >= $document.width() ? root : root += step;
                if (deltaY > 0 || detail < 0)
                    root = root <= 0 ? 0 : root -= step;
                $body.stop().animate({
                    scrollLeft: root
                }, speed, option, function() {
                    scroll = false;
                });
            }
            return false;
        }).on('scroll', function() {
            if (scrollY && !scroll) root = $window.scrollTop();
            if (scrollX && !scroll) root = $window.scrollLeft();
        }).on('resize', function() {
            if (scrollY && !scroll) view = $window.height();
            if (scrollX && !scroll) view = $window.width();
        });       
    };
    jQuery.easing.default = function (x,t,b,c,d) {
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    };
})(jQuery);
$(function() {  
    jQuery.scrollSpeed(180,900);
});
//]]>
</script>

<script type='text/javascript'>

//<![CDATA[

!function(e){jQuery.scrollSpeed=function(t,n,o){var i,l,r,u=e(document),c=e(window),h=e("html, body"),a=o||"default",d=0,s=!1;return window.navigator.msPointerEnabled?!1:void c.on("mousewheel DOMMouseScroll",function(e){var o=e.originalEvent.wheelDeltaY,f=e.originalEvent.detail;return i=u.height()>c.height(),l=u.width()>c.width(),s=!0,i&&(r=c.height(),(0>o||f>0)&&(d=d+r>=u.height()?d:d+=t),(o>0||0>f)&&(d=0>=d?0:d-=t),h.stop().animate({scrollTop:d},n,a,function(){s=!1})),l&&(r=c.width(),(0>o||f>0)&&(d=d+r>=u.width()?d:d+=t),(o>0||0>f)&&(d=0>=d?0:d-=t),h.stop().animate({scrollLeft:d},n,a,function(){s=!1})),!1}).on("scroll",function(){i&&!s&&(d=c.scrollTop()),l&&!s&&(d=c.scrollLeft())}).on("resize",function(){i&&!s&&(r=c.height()),l&&!s&&(r=c.width())})},jQuery.easing["default"]=function(e,t,n,o,i){return-o*((t=t/i-1)*t*t*t-1)+n}}(jQuery),$(function(){jQuery.scrollSpeed(180,900)});

//]]>

</script>

Diatas terdapat dua kode yaitu kode yang belum dikompres(uncompressed) dan kode yang sudah dikompres(compressed). Sobat pilih salah satunya saja, saya sarankan untuk menggunakan yang sudah dikompres, karena tidak memakan banyak ruang html template sobat. Kode yang belum dikompres saya sediakan sekedar untuk berjaga-jaga, jikalau ada dari beberapa sobat yang ingin menelaah lagi kodenya.

Sekarang lihat baris kode yang saya tandai, ganti angkanya sesuai keinginan sobat. Berikut detailnya :

180 : panjang gulungan satu kali scroll. semakin besar angkanya maka semakin panjang gulungannya ketika discroll.
900 : kecepatan animasi scroll tersebut. semakin besar angkanya maka semakin lambat animasinya.

Untuk demonya sobat bisa lihat dibawah ini :

Gimana sob mudah kan cara menerapkannya ?

Namun sayangnya kode diatas memiliki beberapa kekurangan. Pertama, efek smooth hanya akan terlihat saat scrolling dengan mouse saja. Ini ditunjukkan oleh event "mousewheel DOMMouseScroll". Kedua, Kode diatas tidak bekerja juga di internet explorer.

Sekian artikel sederhana tentang window smooth scroll untuk blog dengan jquery ini, semoga bermanfaat. Jika ada yang kurang jelas silahkan bertanya dikolom komentar.

Sumber : https://github.com/nathco/jQuery.scrollSpeed

Window smooth scroll untuk blog dengan jQuery - PintasanOKE

Wednesday 2 March 2016

Window smooth scroll untuk blog dengan jQuery

CARA PEMASANGAN