Back to Top With Scroll Spider Style - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Back to Top With Scroll Spider Style, we have prepared well for this article you read and download the information therein. hopefully fill posts Article jQuery, Article Snippet, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Back to Top With Scroll Spider Style
link : Back to Top With Scroll Spider Style

Back to Top With Scroll Spider Style

Mungkin di antara sekian banyak trik dan tutorial, salah satu tut yang sering dipaparkan adalah tentang back to top or scroll top Sangkin banyaknya selalu ada yang terus berinovasi dengan hal tersebut. Sehingga menghasilkan kreasi yg atraktif :D Sekarang AA akan berbagi info bagaimana membuat scroll to top dengan gaya memakai gambar laba-laba (Scroll Spider) Mungkin agak mirip dengan artikel sebelumnya make attractive back to top with cacing theme. Jika tutorial back to top menggunakan gambar cacing, si cacing akan keluar begitu kita melakukan scroll. Kalau sekarang si laba-laba akan mengikuti scroll keluarnya bro!

Trick berikut terintegrasi dengan jQuery script, sehingga pada template sobat sudah harus terpasang!

(function() {
window._scrollSpider = {

config : {
side : 'right',
offset : '10px',
tooltip : 'Squash..?',
image : 'GAMBAR LABA-LABA',
web : 'background-color:#000;width:2px;height:999em;position:absolute;right:42%;bottom:95%;'
},

// move the spider based on the percentage the document has been scrolled
move : function() {
_scrollSpider.spider.style.top = ((document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100) + '%';
},

// scroll the page to the top
goingUp : false,
toTop : function() {
if (!_scrollSpider.goingUp && (document.body.scrollTop || document.documentElement.scrollTop)) {
var body = document.body.scrollTop ? document.body : document.documentElement;

_scrollSpider.goingUp = true;
_scrollSpider.scroll = {
top : body.scrollTop, // cached scroll position
body : body,
by : (document.documentElement.scrollHeight - document.documentElement.clientHeight) / 100, // scroll by 1% of the total document height

// interval for scrolling the document ( and spider ) back to the top
window : window.setInterval(function() {
if (_scrollSpider.scroll.top > 0) {
_scrollSpider.scroll.body.scrollTop = _scrollSpider.scroll.top = _scrollSpider.scroll.top - _scrollSpider.scroll.by;
_scrollSpider.move();
} else {
window.clearInterval(_scrollSpider.scroll.window);
_scrollSpider.goingUp = false;
}
}, 10)
};

}
},

// offset the spider based on the height of the image
// this is so it's visible when the document is scrolled to 100%
applyOffset : function() {
var img = _scrollSpider.spider.getElementsByTagName('IMG')[0];

if (img && img.complete) {
_scrollSpider.spider.style.marginTop = '-' + img.height + 'px';
} else {
window.addEventListener('load', _scrollSpider.applyOffset);
}
},

// initial setup of the scrolling spider element
init : function() {
var spider = document.createElement('DIV');

spider.id = 'scrollSpider';
spider.innerHTML = '<div style="' + _scrollSpider.config.web + '"></div><img src="' + _scrollSpider.config.image + '" onclick="_scrollSpider.toTop();" style="cursor: pointer;" title="' + _scrollSpider.config.tooltip + '">';
spider.style.position = 'fixed';
spider.style[/left|right/i.test(_scrollSpider.config.side) ? _scrollSpider.config.side : 'right'] = _scrollSpider.config.offset;
spider.style.top = '0%';

document.body.appendChild(spider);

_scrollSpider.spider = spider;
_scrollSpider.move();
_scrollSpider.applyOffset();

window.addEventListener('scroll', _scrollSpider.move);
}

};

if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', _scrollSpider.init); // perform initialization when the DOM is loaded
}
}());

Gantikan GAMBAR LABA-LABA dengan image yah!DONE!

Jika sobat kepengen script yg sudah diminimaliskan dan gambar sudah berupa data-URI silahkan gunakan yg ini tinggal pakai broo...<script src='scroll-spider-min.js' type='text/javascript'></script>Source, detail and demo you can visit to github.com/SethClydesdale/scroll-spider!

Thus articles Back to Top With Scroll Spider Style

that is all articles Back to Top With Scroll Spider Style This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Back to Top With Scroll Spider Style with the link address https://autopostingblogspot.blogspot.com/2015/11/back-to-top-with-scroll-spider-style.html