Witam. Próbuję zrobić prostą animację polegającą na pojawianiu się obiektów DOM dla określonej wysokości scroll.
function singleElement(config) {
if( !(this instanceof singleElement) ) {
return new singleElement(config);
}
if($(config.className).length) {
return c('juz jest');
}
this._config = this._extendOptions(config);
this._obj = this._setAttributes(config);
this._status = "hidden";
this._init = function(start, stop) {
// c('zakres od' + start + " do " + stop);
// c('zakres scrollTop =' + win.scrollTop());
if(win.scrollTop() > start && win.scrollTop() < stop){
if(this._obj.style.opacity == 0 && this._status == "hidden") {
this._status = "visable";
this._addToDOM(this._obj);
this._showElement("." + this._obj.className, this._obj.offsetX, this._obj.offsetY, this._obj.time);
}
} else if(this._status == "visable"){
this._status = "hidden";
this._removeElement();
}
}
}
(...)
win.on('scroll', function() {
new singleElement({
className: 'boxChild1',
height: '110px',
width: '110px',
top: '44%',
left: '47%',
bg: 'green',
animation: {
offsetX: 300,
offsetY: 200,
time: 100
}
})._init(1000, 1800);
})
tutaj fragment samego inicjowania, całość jest dość obszerna i jest tutaj https://codepen.io/bastej/pen/PaeBjR
Tworzę tutaj za pomocą konstruktora singleElement nową instancję(dodaje do DOM) jeżeli scroll będzie większy od 1000. Chciałbym żeby obiekt stworzył się tylko raz - żeby funkcja _init mogła wykonać się raz do pÓÓÓÓki box jest widoczny, a po zniknięciu znów mogła się wykonać. W tej chwili obiekt tworzy się za każdym razem kiedy window.scroll jest w podanym przedziale.
Dzięki za każdą wskazówkę
Ps. jeżeli to problem że linkuje do zewnętrznego serwisu przekleje kod tutaj ;)