Skip to content

Instantly share code, notes, and snippets.

@codedcontainer
Created January 25, 2018 17:34
Show Gist options
  • Save codedcontainer/4d72183debef24a61c696298e01891d1 to your computer and use it in GitHub Desktop.
Save codedcontainer/4d72183debef24a61c696298e01891d1 to your computer and use it in GitHub Desktop.
Parallax with TypeScript
class parallax {
private _backgroundElement:string;
private _containerElement:string;
set containerElement(name: string){
this._containerElement = name;
}
set backgroundElement(name: string){
this._backgroundElement = name;
}
constructor() {
this.onTimeout();
}
private onTimeout(){
setTimeout(()=>{
this.onScroll();
}, 0);
}
private onScroll(){
$(window).scroll(()=>{
let elementOffset:number = $(this._containerElement).offset().top;
let scrollYOffset:number = pageYOffset;
let elementHeight:number = $(this._containerElement).height();
let elementBottomOffset:number = scrollYOffset + elementHeight;
if ( scrollYOffset < elementBottomOffset){
let elementScrollOffset:number = elementOffset - scrollYOffset;
console.log(this._backgroundElement);
$(this._backgroundElement).css({'background-position-y': elementScrollOffset / 3 });
}
});
}
}
let parallaxInstance = new parallax();
parallaxInstance.backgroundElement= ".spacer2";
parallaxInstance.containerElement = ".prices";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment