How to Smooth Scrolling Effect on a Blogger-based Website
Blogger - Actually adding a lot of scripts on your blog can increase your load time, friends, so before starting, you need to understand the impact, but if the effect is for convenience in surfing our website, let's just say our world.. so everyone visits each other's world. other people through the media blog..
because there are various kinds of thoughts like writing a book, so visitors have the right to stay or choose another place... Kheren Kan?
Blog Visitor Type
Yes, that's why sometimes to build a comfortable place for visitors to feel at home to visit our place, it's easy and difficult.. hehe, yes, because there are various types of visitors.. some are bored if the place is monotonous.. cook the world together. others the same...?
There are those who don't really like crowds.. they want something quick and simple, straight to the point.. there are also those who don't pay attention to it.. basically if they need something, they want a simple place, not crowded, or crowded.. they just enjoy it, what matters is what they do. want him to get.. ^_^
Well, sometimes we too, sometimes take the middle... so that many people can enter and thank God they are interested in visiting. The point is that the more crowded, the more resources needed, while the quieter it is, the fewer resources needed.
Crowded / Quiet
Crowded and Quiet is analogized as widgets and blog knick-knacks, including various effects embedded in the blog itself so that it becomes the distinctive feature of each blog.
Scrolling Effect on Blog
Likewise the effect that we are discussing, namely the Scrolling Effect, an effect that will be seen when the screen is scrolled up or down. Actually, we have already discussed what scrolling is and others in our previous post, which is about Smooth scrolling on the Automatic Table of Content, where the difference is that yesterday it appeared when clicked / onclicked, while this is normal scrolling..
So if the visitor reads past the end of the screen, the page will be in the scroll function.
So the image is a long web page that passes through the screen, it loads.. some use lazy load images, meaning that images that have not been reached by the screen display have not been automatically loaded, which will speed up loading times at the beginning of loading.
But this is just an image material, or a video too.. depending on the script used, while for the others it's still loaded.. well so actually the long web page is already loaded..
Smooth Scrolling
The function of this smooth scrolling is so that the up-down or down-up shift can be smooth, or not rough... so visitors think they can still read the text even though there is an upward movement, as if the movement is not very visible.
How to Give Smooth Scrolling Effect on Blogger-based Websites
At the core of this discussion, we immediately practice, friends, so you can immediately apply it on your website.
2. Please go to the Themes tab Click the Triangle icon down Edit HTML
3. After that, look for the body code ending like this </body>. To make it easier for you to search, please press Ctrl + F on your keyboard. Then type </body> in the search field.
4. If you have found it, the next step is to Copy / Ctrl + C script below and Paste / Ctrl + V just above the code </body>
here is the code
<script type="text/javascript">
/*<![CDATA[*/
// Script Smooth Scroll - Publish by RahmanCyber.NET
!function(){function e(){var e=!1;e&&c("keydown",r),v.keyboardSupport&&!e&&u("keydown",r)}function t(){if(document.body){var t=document.body,o=document.documentElement,n=window.innerHeight,r=t.scrollHeight;if(S=document.compatMode.indexOf("CSS")>=0?o:t,w=t,e(),x=!0,top!=self)y=!0;else if(r>n&&(t.offsetHeight<=n||o.offsetHeight<=n)){var a=!1,i=function(){a||o.scrollHeight==document.height||(a=!0,setTimeout(function(){o.style.height=document.height+"px",a=!1},500))};if(o.style.height="auto",setTimeout(i,10),S.offsetHeight<=n){var l=document.createElement("div");l.style.clear="both",t.appendChild(l)}}v.fixedBackground||b||(t.style.backgroundAttachment="scroll",o.style.backgroundAttachment="scroll")}}function o(e,t,o,n){if(n||(n=1e3),d(t,o),1!=v.accelerationMax){var r=+new Date,a=r-C;if(a<v.accelerationDelta){var i=(1+30/a)/2;i>1&&(i=Math.min(i,v.accelerationMax),t*=i,o*=i)}C=+new Date}if(M.push({x:t,y:o,lastX:0>t?.99:-.99,lastY:0>o?.99:-.99,start:+new Date}),!T){var l=e===document.body,u=function(){for(var r=+new Date,a=0,i=0,c=0;c<M.length;c++){var s=M[c],d=r-s.start,f=d>=v.animationTime,h=f?1:d/v.animationTime;v.pulseAlgorithm&&(h=p(h));var m=s.x*h-s.lastX>>0,w=s.y*h-s.lastY>>0;a+=m,i+=w,s.lastX+=m,s.lastY+=w,f&&(M.splice(c,1),c--)}l?window.scrollBy(a,i):(a&&(e.scrollLeft+=a),i&&(e.scrollTop+=i)),t||o||(M=[]),M.length?E(u,e,n/v.frameRate+1):T=!1};E(u,e,0),T=!0}}function n(e){x||t();var n=e.target,r=l(n);if(!r||e.defaultPrevented||s(w,"embed")||s(n,"embed")&&/.pdf/i.test(n.src))return!0;var a=e.wheelDeltaX||0,i=e.wheelDeltaY||0;return a||i||(i=e.wheelDelta||0),!v.touchpadSupport&&f(i)?!0:(Math.abs(a)>1.2&&(a*=v.stepSize/120),Math.abs(i)>1.2&&(i*=v.stepSize/120),o(r,-a,-i),void e.preventDefault())}function r(e){var t=e.target,n=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==H.spacebar;if(/input|textarea|select|embed/i.test(t.nodeName)||t.isContentEditable||e.defaultPrevented||n)return!0;if(s(t,"button")&&e.keyCode===H.spacebar)return!0;var r,a=0,i=0,u=l(w),c=u.clientHeight;switch(u==document.body&&(c=window.innerHeight),e.keyCode){case H.up:i=-v.arrowScroll;break;case H.down:i=v.arrowScroll;break;case H.spacebar:r=e.shiftKey?1:-1,i=-r*c*.9;break;case H.pageup:i=.9*-c;break;case H.pagedown:i=.9*c;break;case H.home:i=-u.scrollTop;break;case H.end:var d=u.scrollHeight-u.scrollTop-c;i=d>0?d+10:0;break;case H.left:a=-v.arrowScroll;break;case H.right:a=v.arrowScroll;break;default:return!0}o(u,a,i),e.preventDefault()}function a(e){w=e.target}function i(e,t){for(var o=e.length;o--;)z[N(e[o])]=t;return t}function l(e){var t=[],o=S.scrollHeight;do{var n=z[N(e)];if(n)return i(t,n);if(t.push(e),o===e.scrollHeight){if(!y||S.clientHeight+10<o)return i(t,document.body)}else if(e.clientHeight+10<e.scrollHeight&&(overflow=getComputedStyle(e,"").getPropertyValue("overflow-y"),"scroll"===overflow||"auto"===overflow))return i(t,e)}while(e=e.parentNode)}function u(e,t,o){window.addEventListener(e,t,o||!1)}function c(e,t,o){window.removeEventListener(e,t,o||!1)}function s(e,t){return(e.nodeName||"").toLowerCase()===t.toLowerCase()}function d(e,t){e=e>0?1:-1,t=t>0?1:-1,(k.x!==e||k.y!==t)&&(k.x=e,k.y=t,M=[],C=0)}function f(e){if(e){e=Math.abs(e),D.push(e),D.shift(),clearTimeout(A);var t=D[0]==D[1]&&D[1]==D[2],o=h(D[0],120)&&h(D[1],120)&&h(D[2],120);return!(t||o)}}function h(e,t){return Math.floor(e/t)==e/t}function m(e){var t,o,n;return e*=v.pulseScale,1>e?t=e-(1-Math.exp(-e)):(o=Math.exp(-1),e-=1,n=1-Math.exp(-e),t=o+n*(1-o)),t*v.pulseNormalize}function p(e){return e>=1?1:0>=e?0:(1==v.pulseNormalize&&(v.pulseNormalize/=m(1)),m(e))}var w,g={frameRate:150,animationTime:800,stepSize:120,pulseAlgorithm:!0,pulseScale:8,pulseNormalize:1,accelerationDelta:20,accelerationMax:1,keyboardSupport:!0,arrowScroll:50,touchpadSupport:!0,fixedBackground:!0,excluded:""},v=g,b=!1,y=!1,k={x:0,y:0},x=!1,S=document.documentElement,D=[120,120,120],H={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},v=g,M=[],T=!1,C=+new Date,z={};setInterval(function(){z={}},1e4);var A,N=function(){var e=0;return function(t){return t.uniqueID||(t.uniqueID=e++)}}(),E=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)}}(),K=/chrome/i.test(window.navigator.userAgent),L="onmousewheel"in document;L&&K&&(u("mousedown",a),u("mousewheel",n),u("load",t))}();
/*]]>*/
</script>
Okay, if so, the next step is..
5. Please save the template, then check if there is a difference?
That's how to install the Smooth Scrolling Effect Script on a Blogger-based Website, so if you're still not sure... in a state still in Edit Html, you Undo or CTRL + Z , then Save Template... This will return the display to the previous one..
After that repeat from step number 4, don't close this tutorial first, so it's easy to copy and paste..
Then if you have saved the template again
Then compare with the previous one .. is there a difference?
hehe
Closing Discussion Smooth Scrolling Effect
That's the smooth scrolling effect, friends, keep in mind the point.. if we add a script it will also increase the load time and the size of the loading file,
so if it's really necessary, then you can add.. but if it's actually the template that you use on the blog, it's already smooth for scrolling..
So no need to add this code again..
That's it.. Hopefully useful.
Jya...
F.N.A-RED
Post a Comment for "How to Smooth Scrolling Effect on a Blogger-based Website "