cara membuat scrolling effect di template, theme blog atau website

Disini saya akan share tentang membuat scroll effect di template, theme blog atau website Anda menggunakan css dan JavaScript, mari simak contoh dibawah ini.

Example 1

Example 2

Example 3

Untuk membuatnya cukup mudah, pertama-tama Anda buat css terlebih dahulu, atau bisa lihat contoh css nya dibawah ini


/* Demo css classes */ html, body{ height: 100%; } :focus{ outline: none; } .img-custom{ position:relative; max-width:100%;} .sce { border: 1px solid #CCC; margin-top: 20px; display: inline-block; overflow: hidden; position: relative; height: 200px; /* set this height in percentage to test resizing */ width: 380px; } /* custom stylings */ .wrapper, .scroll-wrapper { padding: 5px; } .scroll-wrapper.mac + .scrollBarContainer{ background-color: transparent; } .scrollBarContainer.animate .scroll{ transition: 2s opacity ease; -ms-transition: 2s opacity ease; opacity: 0; } .scrollBarContainer:hover .scroll{ opacity: 0.5; transition: none; -ms-transition: none; } .unselectable { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; } .scroll{ border-radius: 10px; } .wrapper + .scrollBarContainer{ background-color: #eee9ee; } .scrollBar { background-color: #60F509; border-radius: 10px; opacity: 0.5; } .scroll-bar{ background-color: #14D1E0; }

Bila dirasa css sudah dibuat tinggal masukkan JavaScript. Jika sudah masukkan JavaScript nya dibawah ini

window.onload = function(){ if(!navigator.userAgent.match('Macintosh')){ var element = document.querySelectorAll('.sce'); // Apply slim scroll plugin var one = new slimScroll(element[0], { 'wrapperClass': 'scroll-wrapper unselectable mac', 'scrollBarContainerClass': 'scrollBarContainer', 'scrollBarContainerSpecialClass': 'animate', 'scrollBarClass': 'scroll', 'keepFocus': true }); var two = new slimScroll(element[1], { 'wrapperClass': 'wrapper', 'scrollBarContainerClass': 'scrollBarContainer', 'scrollBarClass': 'scrollBar' }); var three = new slimScroll(element[2], { 'wrapperClass': 'scroll-wrap', 'scrollBarContainerClass': 'scroll-bar-wrap', 'scrollBarClass': 'scroll-bar' }); // resize example // To make the resizing work, set the height of the container in PERCENTAGE window.onresize = function(){ one.resetValues(); two.resetValues(); three.resetValues(); } } else{ document.write("For Mac users, this custom slimscroll styles will not be applied"); } }

Kalau untuk tambahannya masukkan JavaScript pendukungnya juga dibawah ini

<script src='https://cdnjs.cloudflare.com/ajax/libs/slim-scroll/1.3.2/slimscroll.min.js' type='text/javascript'></script>
Sekian penjelasan tentang membuat scroll effect di template, theme blog atau website Anda dengan mudah. Apabila ada yang belum jelas bisa tinggalkan pesan Anda di kolom komentar