diff --git a/src/sunpower-banners-durability-300x250-v2/index.html b/src/sunpower-banners-durability-300x250-v2/index.html index c45377e..512cd6b 100644 --- a/src/sunpower-banners-durability-300x250-v2/index.html +++ b/src/sunpower-banners-durability-300x250-v2/index.html @@ -1,3 +1,23 @@ -sunpower-banners-durability-300x250 - - \ No newline at end of file + + + + + + + sunpower-banners-durability-300x250 + + + + + + + + + + + diff --git a/src/sunpower-banners-durability-300x250-v2/js/banner.animation.js b/src/sunpower-banners-durability-300x250-v2/js/banner.animation.js index d44ebad..ec1a9fc 100644 --- a/src/sunpower-banners-durability-300x250-v2/js/banner.animation.js +++ b/src/sunpower-banners-durability-300x250-v2/js/banner.animation.js @@ -1,263 +1,249 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/bg.jpg", - "images/bg2.png", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/copy9.png", - "images/copy10.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png", - "images/vig.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner - } - ), - this.vig=this.smartObject( { - id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner - } - ), - this.bg2=this.smartObject( { - id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.copy9=this.smartObject( { - id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner - } - ), - this.copy10=this.smartObject( { - id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", width: 75, height: 18, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 20 - } - ), - this.copy2.set( { - left: -10, top: 60 - } - ), - this.copy3.set( { - left: -10, top: 100 - } - ), - this.copy4.set( { - left: -10, top: 20 - } - ), - this.copy5.set( { - left: -10, top: 60 - } - ), - this.copy6.set( { - left: -10, top: 100 - } - ), - this.copy7.set( { - left: -10, top: 20 - } - ), - this.copy8.set( { - left: -10, top: 60 - } - ), - this.copy9.set( { - left: -10, top: 20 - } - ), - this.copy10.set( { - left: -10, top: 60 - } - ), - this.vig.set( { - bottom: 0 - } - ), - this.logo.set( { - left: 150, top: 216 - } - ), - this.tag.set( { - left: 150, top: 192 - } - ), - this.cta.set( { - left: 10, top: 216 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.bg.set( { - left: -61, bottom: -48, scale: .8 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/bg.jpg', + 'images/bg2.png', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/copy9.png', + 'images/copy10.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + 'images/vig.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + parent: this.banner + }); + + this.vig = this.smartObject({ + id: 'vig', + backgroundImage: 'images/vig.png', + top: 'none', + parent: this.banner + }); + + this.bg2 = this.smartObject({ + id: 'bg2', + backgroundImage: 'images/bg2.png', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.copy9 = this.smartObject({ + id: 'copy9', + backgroundImage: 'images/copy9.png', + parent: this.banner + }); + + this.copy10 = this.smartObject({ + id: 'copy10', + backgroundImage: 'images/copy10.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + width: 75, + height: 18, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 20 }); + this.copy2.set({ left: -10, top: 60 }); + this.copy3.set({ left: -10, top: 100 }); + this.copy4.set({ left: -10, top: 20 }); + this.copy5.set({ left: -10, top: 60 }); + this.copy6.set({ left: -10, top: 100 }); + this.copy7.set({ left: -10, top: 20 }); + this.copy8.set({ left: -10, top: 60 }); + this.copy9.set({ left: -10, top: 20 }); + this.copy10.set({ left: -10, top: 60 }); + this.vig.set({ bottom: 0 }); + this.logo.set({ left: 150, top: 216 }); + this.tag.set({ left: 150, top: 192 }); + this.cta.set({ left: 10, top: 216 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.bg.set({ left: -61, bottom: -48, scale: 0.8 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .staggerFrom([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'cta') + .to([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .staggerFrom([this.copy9, this.copy10], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .from(this.tag, 0.5, { autoAlpha: 0 }) + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], 0.5, { autoAlpha: 0 }) + .to(this.bg2, 0.5, { autoAlpha: 1 }); } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy4, this.copy5, this.copy6], .5, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy4, this.copy5, this.copy6], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").staggerFrom([this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeOut - } - , .1, "cta").to([this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").staggerFrom([this.copy9, this.copy10], .5, { - x: -300, ease: Power1.easeOut - } - , .1).from(this.tag, .5, { - autoAlpha: 0 - } - ).call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], .5, { - autoAlpha: 0 - } - ).to(this.bg2, .5, { - autoAlpha: 1 - } - )) - } - ), - this.timeline=new TimelineMax( { - repeat: 1, repeatDelay: 2 - } - ).staggerFrom([this.copy1, this.copy2, this.copy3], .5, { - x: -300, ease: Power1.easeOut - } - , .1, "frame1+=0.5").to([this.copy1, this.copy2, this.copy3], .5, { - x: -300, ease: Power1.easeIn - } - , "frame1+=3").to(this.bg2, 1, { - autoAlpha: 0 - } + }); - , "frame2-=1").add(this.copyAnimation.play(), "frame2"), - this.timeline.timeScale(1) -} -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - console.log(t), - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} + this.timeline = new TimelineMax({repeat: 1, repeatDelay: 2}) + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5') + .to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3') + .to(this.bg2, 1, { autoAlpha: 0 }) + .from(this.bg, this.copyAnimation._duration, { scale: 1 }, 'frame2-=1') + .from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1') + .add(this.copyAnimation.play(), 'frame2'); -; \ No newline at end of file + this.timeline.timeScale(1); +}; + +Banner.prototype.addEventListeners = function (_this) { + // var _this = this; + console.log(_this); + + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +}; diff --git a/src/sunpower-banners-durability-300x600-v2/index.html b/src/sunpower-banners-durability-300x600-v2/index.html index 61e001b..f62f58f 100644 --- a/src/sunpower-banners-durability-300x600-v2/index.html +++ b/src/sunpower-banners-durability-300x600-v2/index.html @@ -1,3 +1,23 @@ -sunpower-banners-durability-300x600 - - \ No newline at end of file + + + + + + + sunpower-banners-durability-300x600 + + + + + + + + + + + diff --git a/src/sunpower-banners-durability-300x600-v2/js/banner.animation.js b/src/sunpower-banners-durability-300x600-v2/js/banner.animation.js index 056619f..c9af6a0 100644 --- a/src/sunpower-banners-durability-300x600-v2/js/banner.animation.js +++ b/src/sunpower-banners-durability-300x600-v2/js/banner.animation.js @@ -1,305 +1,285 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/logo-big.png", - "images/bg.jpg", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/copy9.png", - "images/copy10.png", - "images/copy11.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.logoBig=this.smartObject( { - id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.copy9=this.smartObject( { - id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner - } - ), - this.copy10=this.smartObject( { - id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner - } - ), - this.copy11=this.smartObject( { - id: "copy11", backgroundImage: "images/copy11.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", backgroundImage: "images/cta-nrm.png", parent: this.banner - } - ), - this.ctaNrm2=this.smartObject( { - id: "ctaNrm2", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr2=this.smartObject( { - id: "ctaOvr2", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ), - this.cta2=this.smartObject( { - id: "cta", width: 118, height: 27, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta2 - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta2 - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 65 - } - ), - this.copy2.set( { - left: -10, top: 105 - } - ), - this.copy3.set( { - left: -10, top: 145 - } - ), - this.copy4.set( { - left: -10, top: 65 - } - ), - this.copy5.set( { - left: -10, top: 105 - } - ), - this.copy6.set( { - left: -10, top: 145 - } - ), - this.copy7.set( { - left: -10, top: 65 - } - ), - this.copy8.set( { - left: -10, top: 105 - } - ), - this.copy9.set( { - left: -10, top: 145 - } - ), - this.copy10.set( { - left: -10, top: 65 - } - ), - this.copy11.set( { - left: -10, top: 105 - } - ), - this.logo.set( { - left: 16, top: 564 - } - ), - this.logoBig.centerHorizontal(), - this.logoBig.set( { - top: 554 - } - ), - this.tag.centerHorizontal(), - this.tag.set( { - top: 510 - } - ), - this.cta.set( { - left: 169, top: 557 - } - ), - this.ctaOvr2.set( { - autoAlpha: 0 - } - ), - this.cta2.set( { - left: 14, top: 153 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.bg.set( { - right: 0, bottom: 0 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/logo-big.png', + 'images/bg.jpg', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/copy9.png', + 'images/copy10.png', + 'images/copy11.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + // 'images/vig.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta2.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + left: 'none', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.logoBig = this.smartObject({ + id: 'LOGO-BIG', + backgroundImage: 'images/logo-big.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.copy9 = this.smartObject({ + id: 'copy9', + backgroundImage: 'images/copy9.png', + parent: this.banner + }); + + this.copy10 = this.smartObject({ + id: 'copy10', + backgroundImage: 'images/copy10.png', + parent: this.banner + }); + + this.copy11 = this.smartObject({ + id: 'copy11', + backgroundImage: 'images/copy11.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + backgroundImage: 'images/cta-nrm.png', + parent: this.banner + }); + + this.ctaNrm2 = this.smartObject({ + id: 'ctaNrm2', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr2 = this.smartObject({ + id: 'ctaOvr2', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); + + this.cta2 = this.smartObject({ + id: 'cta', + width: 118, + height: 27, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta2 + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta2 + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 65 }); + this.copy2.set({ left: -10, top: 105 }); + this.copy3.set({ left: -10, top: 145 }); + this.copy4.set({ left: -10, top: 65 }); + this.copy5.set({ left: -10, top: 105 }); + this.copy6.set({ left: -10, top: 145 }); + this.copy7.set({ left: -10, top: 65 }); + this.copy8.set({ left: -10, top: 105 }); + this.copy9.set({ left: -10, top: 145 }); + this.copy10.set({ left: -10, top: 65 }); + this.copy11.set({ left: -10, top: 105 }); + this.logo.set({ left: 16, top: 564 }); + this.logoBig.centerHorizontal(); + this.logoBig.set({ top: 554 }); + this.tag.centerHorizontal(); + this.tag.set({ top: 510 }); + this.cta.set({ left: 169, top: 557 }); + this.ctaOvr2.set({ autoAlpha: 0 }); + this.cta2.set({ left: 14, top: 153 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.bg.set({ right: 0, bottom: 0 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + // this.timeLineCTA = new TimelineMax({ paused: true }) + // .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta'); + + this.cta2.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta2.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 0 }); + }); + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeIn }, '+=3') + .staggerFrom([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeIn }, '=+3') + .staggerFrom([this.copy7, this.copy8, this.copy9], 0.4, { x: -300, ease: Power1.easeOut }, 0.1, 'cta') + // .from(this.cta, 1, { autoAlpha: 0 }, 'cta') + .to([this.copy7, this.copy8, this.copy9], 0.4, { x: -300, ease: Power1.easeIn }, '=+2') + .to([this.logo, this.cta], 0.4, { autoAlpha: 0 }, 'swap') + .from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=0.5') + // .staggerFrom([this.copy10, this.copy11, this.cta2], 0.4, { autoAlpha: 0 }, 0.4, 'swap+=1') + .staggerFrom([this.copy10, this.copy11], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .from(this.cta2, 0.4, { autoAlpha: 0 }) + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], 0.5, { autoAlpha: 0 }) } - ) - } - ), - this.cta2.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr2, 1, { - autoAlpha: 1 - } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr2, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy1, this.copy2, this.copy3], .4, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy1, this.copy2, this.copy3], .4, { - x: -300, ease: Power1.easeIn - } - , "+=3").staggerFrom([this.copy4, this.copy5, this.copy6], .4, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy4, this.copy5, this.copy6], .4, { - x: -300, ease: Power1.easeIn - } - , "=+3").staggerFrom([this.copy7, this.copy8, this.copy9], .4, { - x: -300, ease: Power1.easeOut - } - , .1, "cta").to([this.copy7, this.copy8, this.copy9], .4, { - x: -300, ease: Power1.easeIn - } - , "=+2").to([this.logo, this.cta], .4, { - autoAlpha: 0 - } - , "swap").from([this.logoBig, this.tag], .5, { - autoAlpha: 0 - } - , "swap+=0.5").staggerFrom([this.copy10, this.copy11], .4, { - x: -300, ease: Power1.easeOut - } - , .1).from(this.cta2, .4, { - autoAlpha: 0 - } - ).call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], .5, { - autoAlpha: 0 - } - )) - } - ), - this.timeline=new TimelineMax( { - paused: !1, repeat: 1, repeatDelay: 1 - } - ).add(this.copyAnimation.play(), "frame2+=1").from( 13, { - x: 26, easing: Linear.easeNone, rotation: .01 - } - , "frame2+=1"), - this.timeline.timeScale(1) -} + }); -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - console.log(t), - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} -; \ No newline at end of file + this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1}) + .add(this.copyAnimation.play(), 'frame2+=1') + .from(this.bg, 13, { x: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2+=1'); + + this.timeline.timeScale(1); +}; + +Banner.prototype.addEventListeners = function (_this) { + // var _this = this; + console.log(_this); + + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +}; diff --git a/src/sunpower-banners-efficiency-300x250/index.html b/src/sunpower-banners-efficiency-300x250/index.html index 61e001b..9a01554 100644 --- a/src/sunpower-banners-efficiency-300x250/index.html +++ b/src/sunpower-banners-efficiency-300x250/index.html @@ -1,3 +1,22 @@ -sunpower-banners-durability-300x600 - - \ No newline at end of file + + + + + + + sunpower-banners-efficiency-300x250 + + + + + + + + + + diff --git a/src/sunpower-banners-efficiency-300x250/js/banner.animation.js b/src/sunpower-banners-efficiency-300x250/js/banner.animation.js index 7a32a9c..76788e5 100644 --- a/src/sunpower-banners-efficiency-300x250/js/banner.animation.js +++ b/src/sunpower-banners-efficiency-300x250/js/banner.animation.js @@ -1,271 +1,261 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/bg.jpg", - "images/bg2.png", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/copy9.png", - "images/copy10.png", - "images/copy11.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png", - "images/vig.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner - } - ), - this.vig=this.smartObject( { - id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner - } - ), - this.bg2=this.smartObject( { - id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.copy9=this.smartObject( { - id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner - } - ), - this.copy10=this.smartObject( { - id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner - } - ), - this.copy11=this.smartObject( { - id: "copy11", backgroundImage: "images/copy11.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", width: 75, height: 18, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 20 - } - ), - this.copy2.set( { - left: -10, top: 60 - } - ), - this.copy3.set( { - left: -10, top: 100 - } - ), - this.copy4.set( { - left: -10, top: 20 - } - ), - this.copy5.set( { - left: -10, top: 60 - } - ), - this.copy6.set( { - left: -10, top: 100 - } - ), - this.copy7.set( { - left: -10, top: 20 - } - ), - this.copy8.set( { - left: -10, top: 60 - } - ), - this.copy9.set( { - left: -10, top: 20 - } - ), - this.copy10.set( { - left: -10, top: 60 - } - ), - this.copy11.set( { - left: -10, top: 100 - } - ), - this.vig.set( { - bottom: 0 - } - ), - this.logo.set( { - left: 150, top: 216 - } - ), - this.tag.set( { - left: 150, top: 192 - } - ), - this.cta.set( { - left: 10, top: 216 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.bg.set( { - left: -51, bottom: -48, scale: 1 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/bg.jpg', + 'images/bg2.png', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/copy9.png', + 'images/copy10.png', + 'images/copy11.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + 'images/vig.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + parent: this.banner + }); + + this.vig = this.smartObject({ + id: 'vig', + backgroundImage: 'images/vig.png', + top: 'none', + parent: this.banner + }); + + this.bg2 = this.smartObject({ + id: 'bg2', + backgroundImage: 'images/bg2.png', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.copy9 = this.smartObject({ + id: 'copy9', + backgroundImage: 'images/copy9.png', + parent: this.banner + }); + + this.copy10 = this.smartObject({ + id: 'copy10', + backgroundImage: 'images/copy10.png', + parent: this.banner + }); + + this.copy11 = this.smartObject({ + id: 'copy11', + backgroundImage: 'images/copy11.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + width: 75, + height: 18, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 20 }); + this.copy2.set({ left: -10, top: 60 }); + this.copy3.set({ left: -10, top: 100 }); + this.copy4.set({ left: -10, top: 20 }); + this.copy5.set({ left: -10, top: 60 }); + this.copy6.set({ left: -10, top: 100 }); + this.copy7.set({ left: -10, top: 20 }); + this.copy8.set({ left: -10, top: 60 }); + this.copy9.set({ left: -10, top: 20 }); + this.copy10.set({ left: -10, top: 60 }); + this.copy11.set({ left: -10, top: 100 }); + this.vig.set({ bottom: 0 }); + this.logo.set({ left: 150, top: 216 }); + this.tag.set({ left: 150, top: 192 }); + this.cta.set({ left: 10, top: 216 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.bg.set({ left: -51, bottom: -48, scale: 1 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + // this.timeLineCTA = new TimelineMax({ paused: true }) + // .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta'); + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .staggerFrom([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'cta') + // .from(this.cta, 1, { autoAlpha: 0 }, 'cta') + .to([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .staggerFrom([this.copy9, this.copy10, this.copy11], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .from(this.tag, 0.5, { autoAlpha: 0 }) + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], 0.5, { autoAlpha: 0 }) + .to(this.bg2, 0.5, { autoAlpha: 1 }); } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy4, this.copy5, this.copy6], .5, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy4, this.copy5, this.copy6], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").staggerFrom([this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeOut - } - , .1, "cta").to([this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").staggerFrom([this.copy9, this.copy10, this.copy11], .5, { - x: -300, ease: Power1.easeOut - } - , .1).from(this.tag, .5, { - autoAlpha: 0 - } - ).call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], .5, { - autoAlpha: 0 - } - - )) - } - ), - this.timeline=new TimelineMax( { - repeat: 1, repeatDelay: 2 - } - ).staggerFrom([this.copy1, this.copy2, this.copy3], .5, { - x: -300, ease: Power1.easeOut - } - , .1, "frame1+=0.5").to([this.copy1, this.copy2, this.copy3], .5, { - x: -300, ease: Power1.easeIn - } - , "frame1+=3").to(this.bg2, 1, { - autoAlpha: 0 - } + }); - , "frame2-=1").add(this.copyAnimation.play(), "frame2"), - this.timeline.timeScale(1) -} + this.timeline = new TimelineMax({repeat: 1, repeatDelay: 2}) + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5') + .to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3') + .to(this.bg2, 1, { autoAlpha: 0 }) + .from(this.bg, this.copyAnimation._duration, { scale: 1.3 }, 'frame2-=1') + .from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1') + .add(this.copyAnimation.play(), 'frame2'); -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - console.log(t), - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} + this.timeline.timeScale(1); +}; -; \ No newline at end of file +Banner.prototype.addEventListeners = function (_this) { + // var _this = this; + console.log(_this); + + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +}; diff --git a/src/sunpower-banners-efficiency-300x600/index.html b/src/sunpower-banners-efficiency-300x600/index.html index fbb0717..29da279 100644 --- a/src/sunpower-banners-efficiency-300x600/index.html +++ b/src/sunpower-banners-efficiency-300x600/index.html @@ -1,3 +1,22 @@ -sunpower-banners-efficiency-300x600 - - \ No newline at end of file + + + + + + + sunpower-banners-efficiency-300x600 + + + + + + + + + + diff --git a/src/sunpower-banners-efficiency-300x600/js/banner.animation.js b/src/sunpower-banners-efficiency-300x600/js/banner.animation.js index 1abf499..7990d9f 100644 --- a/src/sunpower-banners-efficiency-300x600/js/banner.animation.js +++ b/src/sunpower-banners-efficiency-300x600/js/banner.animation.js @@ -1,313 +1,287 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/logo-big.png", - "images/bg.jpg", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/copy9.png", - "images/copy10.png", - "images/copy11.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png", - "images/vig.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner - } - ), - this.vig=this.smartObject( { - id: "vig", backgroundImage: "images/vig.png", top: "none", left: "none", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.logoBig=this.smartObject( { - id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.copy9=this.smartObject( { - id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner - } - ), - this.copy10=this.smartObject( { - id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner - } - ), - this.copy11=this.smartObject( { - id: "copy11", backgroundImage: "images/copy11.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", backgroundImage: "images/cta-nrm.png", parent: this.banner - } - ), - this.ctaNrm2=this.smartObject( { - id: "ctaNrm2", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr2=this.smartObject( { - id: "ctaOvr2", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ), - this.cta2=this.smartObject( { - id: "cta", width: 118, height: 27, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta2 - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta2 - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 45 - } - ), - this.copy2.set( { - left: -10, top: 86 - } - ), - this.copy3.set( { - left: -10, top: 126 - } - ), - this.copy4.set( { - left: -10, top: 45 - } - ), - this.copy5.set( { - left: -10, top: 86 - } - ), - this.copy6.set( { - left: -10, top: 126 - } - ), - this.copy7.set( { - left: -10, top: 45 - } - ), - this.copy8.set( { - left: -10, top: 86 - } - ), - this.copy9.set( { - left: -10, top: 45 - } - ), - this.copy10.set( { - left: -10, top: 86 - } - ), - this.copy11.set( { - left: -10, top: 126 - } - ), - this.logo.set( { - left: 16, top: 564 - } - ), - this.logoBig.centerHorizontal(), - this.logoBig.set( { - top: 554 - } - ), - this.tag.centerHorizontal(), - this.tag.set( { - top: 510 - } - ), - this.cta.set( { - left: 169, top: 557 - } - ), - this.ctaOvr2.set( { - autoAlpha: 0 - } - ), - this.cta2.set( { - left: 14, top: 173 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.bg.set( { - right: 0, bottom: 0 - } - ), - this.vig.set( { - right: 0, bottom: 0 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/logo-big.png', + 'images/bg.jpg', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/copy9.png', + 'images/copy10.png', + 'images/copy11.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + 'images/vig.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta2.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + left: 'none', + parent: this.banner + }); + + this.vig = this.smartObject({ + id: 'vig', + backgroundImage: 'images/vig.png', + top: 'none', + left: 'none', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.logoBig = this.smartObject({ + id: 'LOGO-BIG', + backgroundImage: 'images/logo-big.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.copy9 = this.smartObject({ + id: 'copy9', + backgroundImage: 'images/copy9.png', + parent: this.banner + }); + + this.copy10 = this.smartObject({ + id: 'copy10', + backgroundImage: 'images/copy10.png', + parent: this.banner + }); + + this.copy11 = this.smartObject({ + id: 'copy11', + backgroundImage: 'images/copy11.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + backgroundImage: 'images/cta-nrm.png', + parent: this.banner + }); + + this.ctaNrm2 = this.smartObject({ + id: 'ctaNrm2', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr2 = this.smartObject({ + id: 'ctaOvr2', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); + + this.cta2 = this.smartObject({ + id: 'cta', + width: 118, + height: 27, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta2 + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta2 + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 45 }); + this.copy2.set({ left: -10, top: 86 }); + this.copy3.set({ left: -10, top: 126 }); + this.copy4.set({ left: -10, top: 45 }); + this.copy5.set({ left: -10, top: 86 }); + this.copy6.set({ left: -10, top: 126 }); + this.copy7.set({ left: -10, top: 45 }); + this.copy8.set({ left: -10, top: 86 }); + this.copy9.set({ left: -10, top: 45 }); + this.copy10.set({ left: -10, top: 86 }); + this.copy11.set({ left: -10, top: 126 }); + this.logo.set({ left: 16, top: 564 }); + this.logoBig.centerHorizontal(); + this.logoBig.set({ top: 554 }); + this.tag.centerHorizontal(); + this.tag.set({ top: 510 }); + this.cta.set({ left: 169, top: 557 }); + this.ctaOvr2.set({ autoAlpha: 0 }); + this.cta2.set({ left: 14, top: 173 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.bg.set({ right: 0, bottom: 0}); + this.vig.set({ right: 0, bottom: 0 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + this.cta2.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta2.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 0 }); + }); + + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeIn }, '+=3') + .staggerFrom([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeIn }, '=+3') + .staggerFrom([this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeOut }, 0.1, 'cta') + .to([this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeIn }, '=+2') + .to([this.logo, this.cta], 0.4, { autoAlpha: 0 }, 'swap') + .from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=0.5') + .staggerFrom([this.copy9, this.copy10, this.copy11], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .from(this.cta2, 0.4, { autoAlpha: 0 }) + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], 0.5, { autoAlpha: 0 }); } - ) - } - ), - this.cta2.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr2, 1, { - autoAlpha: 1 - } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr2, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy1, this.copy2, this.copy3], .4, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy1, this.copy2, this.copy3], .4, { - x: -300, ease: Power1.easeIn - } - , "+=3").staggerFrom([this.copy4, this.copy5, this.copy6], .4, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy4, this.copy5, this.copy6], .4, { - x: -300, ease: Power1.easeIn - } - , "=+3").staggerFrom([this.copy7, this.copy8], .4, { - x: -300, ease: Power1.easeOut - } - , .1, "cta").to([this.copy7, this.copy8], .4, { - x: -300, ease: Power1.easeIn - } - , "=+2").to([this.logo, this.cta], .4, { - autoAlpha: 0 - } - , "swap").from([this.logoBig, this.tag], .5, { - autoAlpha: 0 - } - , "swap+=0.5").staggerFrom([this.copy9, this.copy10, this.copy11], .4, { - x: -300, ease: Power1.easeOut - } - , .1).from(this.cta2, .4, { - autoAlpha: 0 - } - ).call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], .5, { - autoAlpha: 0 - } - )) - } - ), - this.timeline=new TimelineMax( { - paused: !1, repeat: 1, repeatDelay: 1 - } - ).add(this.copyAnimation.play(), "frame2+=1").from([this.vig], 13, { - y: 26, easing: Linear.easeNone, rotation: .01 - } - , "frame2+=1"), - this.timeline.timeScale(1) -} + }); -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} -; \ No newline at end of file + this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1}) + .add(this.copyAnimation.play(), 'frame2+=1') + .from([this.bg, this.vig], 13, { y: 26, easing:Linear.easeNone , rotation:0.01}, 'frame2+=1'); + + this.timeline.timeScale(1); +}; + +Banner.prototype.addEventListeners = function (_this) { + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +}; diff --git a/src/sunpower-banners-equinoxdesign-300x250/index.html b/src/sunpower-banners-equinoxdesign-300x250/index.html index 5e0eacf..698c5c6 100644 --- a/src/sunpower-banners-equinoxdesign-300x250/index.html +++ b/src/sunpower-banners-equinoxdesign-300x250/index.html @@ -1,3 +1,22 @@ -sunpower-banners-equinoxdesign-300x250 - - \ No newline at end of file + + + + + + + sunpower-banners-equinoxdesign-300x250 + + + + + + + + + + diff --git a/src/sunpower-banners-equinoxdesign-300x250/js/banner.animation.js b/src/sunpower-banners-equinoxdesign-300x250/js/banner.animation.js index b668fc2..aac4dad 100644 --- a/src/sunpower-banners-equinoxdesign-300x250/js/banner.animation.js +++ b/src/sunpower-banners-equinoxdesign-300x250/js/banner.animation.js @@ -1,264 +1,253 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/bg.jpg", - "images/bg2.png", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/copy9.png", - "images/copy10.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png", - "images/vig.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner - } - ), - this.vig=this.smartObject( { - id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner - } - ), - this.bg2=this.smartObject( { - id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.copy9=this.smartObject( { - id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner - } - ), - this.copy10=this.smartObject( { - id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", width: 75, height: 18, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 20 - } - ), - this.copy2.set( { - left: -10, top: 60 - } - ), - this.copy3.set( { - left: -10, top: 100 - } - ), - this.copy4.set( { - left: -10, top: 20 - } - ), - this.copy5.set( { - left: -10, top: 60 - } - ), - this.copy6.set( { - left: -10, top: 20 - } - ), - this.copy7.set( { - left: -10, top: 60 - } - ), - this.copy8.set( { - left: -10, top: 100 - } - ), - this.copy9.set( { - left: -10, top: 20 - } - ), - this.copy10.set( { - left: -10, top: 60 - } - ), - this.vig.set( { - bottom: 0 - } - ), - this.logo.set( { - left: 150, top: 216 - } - ), - this.tag.set( { - left: 150, top: 192 - } - ), - this.cta.set( { - left: 10, top: 216 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.bg.set( { - left: -36, bottom: -241, scale: .85 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/bg.jpg', + 'images/bg2.png', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/copy9.png', + 'images/copy10.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + 'images/vig.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + parent: this.banner + }); + + this.vig = this.smartObject({ + id: 'vig', + backgroundImage: 'images/vig.png', + top: 'none', + parent: this.banner + }); + + this.bg2 = this.smartObject({ + id: 'bg2', + backgroundImage: 'images/bg2.png', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.copy9 = this.smartObject({ + id: 'copy9', + backgroundImage: 'images/copy9.png', + parent: this.banner + }); + + this.copy10 = this.smartObject({ + id: 'copy10', + backgroundImage: 'images/copy10.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + width: 75, + height: 18, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 20 }); + this.copy2.set({ left: -10, top: 60 }); + this.copy3.set({ left: -10, top: 100 }); + this.copy4.set({ left: -10, top: 20 }); + this.copy5.set({ left: -10, top: 60 }); + this.copy6.set({ left: -10, top: 20 }); + this.copy7.set({ left: -10, top: 60 }); + this.copy8.set({ left: -10, top: 100 }); + this.copy9.set({ left: -10, top: 20 }); + this.copy10.set({ left: -10, top: 60 }); + this.vig.set({ bottom: 0 }); + this.logo.set({ left: 150, top: 216 }); + this.tag.set({ left: 150, top: 192 }); + this.cta.set({ left: 10, top: 216 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.bg.set({ left: -36, bottom: -241, scale: 0.85 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + // this.timeLineCTA = new TimelineMax({ paused: true }) + // .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta'); + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'cta') + // .from(this.cta, 1, { autoAlpha: 0 }, 'cta') + .to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .staggerFrom([this.copy9, this.copy10], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .from(this.tag, 0.5, { autoAlpha: 0 }) + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], 0.5, { autoAlpha: 0 }) + .to(this.bg2, 0.5, { autoAlpha: 1 }); } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy4, this.copy5], .5, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy4, this.copy5], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").staggerFrom([this.copy6, this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeOut - } - , .1, "cta").to([this.copy6, this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").staggerFrom([this.copy9, this.copy10], .5, { - x: -300, ease: Power1.easeOut - } - , .1).from(this.tag, .5, { - autoAlpha: 0 - } - ).call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], .5, { - autoAlpha: 0 - } - ).to(this.bg2, .5, { - autoAlpha: 1 - } - )) - } - ), - this.timeline=new TimelineMax( { - repeat: 1, repeatDelay: 2 - } - ).staggerFrom([this.copy1, this.copy2, this.copy3], .5, { - x: -300, ease: Power1.easeOut - } - , .1, "frame1+=0.5").to([this.copy1, this.copy2, this.copy3], .5, { - x: -300, ease: Power1.easeIn - } - , "frame1+=3").to(this.bg2, 1, { - autoAlpha: 0 - } + }); - , "frame2-=1").add(this.copyAnimation.play(), "frame2"), - this.timeline.timeScale(1) -} + this.timeline = new TimelineMax({repeat: 1, repeatDelay: 2}) + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5') + .to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3') + .to(this.bg2, 1, { autoAlpha: 0 }) + .from(this.bg, this.copyAnimation._duration, { scale: 1 }, 'frame2-=1') + .from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1') + .add(this.copyAnimation.play(), 'frame2'); -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - console.log(t), - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} + this.timeline.timeScale(1); +}; -; \ No newline at end of file +Banner.prototype.addEventListeners = function (_this) { + // var _this = this; + console.log(_this); + + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +}; diff --git a/src/sunpower-banners-equinoxdesign-300x600/index.html b/src/sunpower-banners-equinoxdesign-300x600/index.html index bf1e60c..c4a8793 100644 --- a/src/sunpower-banners-equinoxdesign-300x600/index.html +++ b/src/sunpower-banners-equinoxdesign-300x600/index.html @@ -1 +1,22 @@ -sunpower-banners-equinoxdesign-300x600 \ No newline at end of file + + + + + + + sunpower-banners-equinoxdesign-300x600 + + + + + + + + + + diff --git a/src/sunpower-banners-equinoxdesign-300x600/js/banner.animation.js b/src/sunpower-banners-equinoxdesign-300x600/js/banner.animation.js index bce85b0..60b9ed0 100644 --- a/src/sunpower-banners-equinoxdesign-300x600/js/banner.animation.js +++ b/src/sunpower-banners-equinoxdesign-300x600/js/banner.animation.js @@ -1,287 +1,265 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/logo-big.png", - "images/bg.jpg", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/copy9.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.logoBig=this.smartObject( { - id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.copy9=this.smartObject( { - id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", backgroundImage: "images/cta-nrm.png", parent: this.banner - } - ), - this.ctaNrm2=this.smartObject( { - id: "ctaNrm2", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr2=this.smartObject( { - id: "ctaOvr2", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ), - this.cta2=this.smartObject( { - id: "cta", width: 118, height: 27, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta2 - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta2 - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 65 - } - ), - this.copy2.set( { - left: -10, top: 105 - } - ), - this.copy3.set( { - left: -10, top: 145 - } - ), - this.copy4.set( { - left: -10, top: 65 - } - ), - this.copy5.set( { - left: -10, top: 65 - } - ), - this.copy6.set( { - left: -10, top: 105 - } - ), - this.copy7.set( { - left: -10, top: 145 - } - ), - this.copy8.set( { - left: -10, top: 65 - } - ), - this.copy9.set( { - left: -10, top: 105 - } - ), - this.logo.set( { - left: 16, top: 564 - } - ), - this.logoBig.centerHorizontal(), - this.logoBig.set( { - top: 554 - } - ), - this.tag.centerHorizontal(), - this.tag.set( { - top: 510 - } - ), - this.cta.set( { - left: 169, top: 557 - } - ), - this.ctaOvr2.set( { - autoAlpha: 0 - } - ), - this.cta2.set( { - left: 14, top: 153 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.bg.set( { - right: 0, bottom: 0 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/logo-big.png', + 'images/bg.jpg', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/copy9.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + // 'images/vig.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta2.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + left: 'none', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.logoBig = this.smartObject({ + id: 'LOGO-BIG', + backgroundImage: 'images/logo-big.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.copy9 = this.smartObject({ + id: 'copy9', + backgroundImage: 'images/copy9.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + backgroundImage: 'images/cta-nrm.png', + parent: this.banner + }); + + this.ctaNrm2 = this.smartObject({ + id: 'ctaNrm2', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr2 = this.smartObject({ + id: 'ctaOvr2', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); + + this.cta2 = this.smartObject({ + id: 'cta', + width: 118, + height: 27, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta2 + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta2 + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 65 }); + this.copy2.set({ left: -10, top: 105 }); + this.copy3.set({ left: -10, top: 145 }); + this.copy4.set({ left: -10, top: 65 }); + this.copy5.set({ left: -10, top: 65 }); + this.copy6.set({ left: -10, top: 105 }); + this.copy7.set({ left: -10, top: 145 }); + this.copy8.set({ left: -10, top: 65 }); + this.copy9.set({ left: -10, top: 105 }); + this.logo.set({ left: 16, top: 564 }); + this.logoBig.centerHorizontal(); + this.logoBig.set({ top: 554 }); + this.tag.centerHorizontal(); + this.tag.set({ top: 510 }); + this.cta.set({ left: 169, top: 557 }); + this.ctaOvr2.set({ autoAlpha: 0 }); + this.cta2.set({ left: 14, top: 153 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.bg.set({ right: 0, bottom: 0 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + this.cta2.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta2.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 0 }); + }); + + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeIn }, '+=3') + .from(this.copy4, 0.4, { x: -300, ease: Power1.easeOut }) + .to(this.copy4, 0.4, { x: -300, ease: Power1.easeIn }, '=+3') + .staggerFrom([this.copy5, this.copy6, this.copy7], 0.4, { x: -300, ease: Power1.easeOut }, 0.1, 'cta') + .to([this.copy5, this.copy6, this.copy7], 0.4, { x: -300, ease: Power1.easeIn }, '=+2') + .to([this.logo, this.cta], 0.4, { autoAlpha: 0 }, 'swap') + .from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=0.5') + .staggerFrom([this.copy8, this.copy9], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .from(this.cta2, 0.4, { autoAlpha: 0 }) + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], 0.5, { autoAlpha: 0 }) } - ) - } - ), - this.cta2.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr2, 1, { - autoAlpha: 1 - } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr2, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy1, this.copy2, this.copy3], .4, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy1, this.copy2, this.copy3], .4, { - x: -300, ease: Power1.easeIn - } - , "+=3").from(this.copy4, .4, { - x: -300, ease: Power1.easeOut - } - ).to(this.copy4, .4, { - x: -300, ease: Power1.easeIn - } - , "=+3").staggerFrom([this.copy5, this.copy6, this.copy7], .4, { - x: -300, ease: Power1.easeOut - } - , .1, "cta").to([this.copy5, this.copy6, this.copy7], .4, { - x: -300, ease: Power1.easeIn - } - , "=+2").to([this.logo, this.cta], .4, { - autoAlpha: 0 - } - , "swap").from([this.logoBig, this.tag], .5, { - autoAlpha: 0 - } - , "swap+=0.5").staggerFrom([this.copy8, this.copy9], .4, { - x: -300, ease: Power1.easeOut - } - , .1).from(this.cta2, .4, { - autoAlpha: 0 - } - ).call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], .5, { - autoAlpha: 0 - } - )) - } - ), - this.timeline=new TimelineMax( { - paused: !1, repeat: 1, repeatDelay: 1 - } - ).add(this.copyAnimation.play(), "frame2+=1").from( 13, { - x: 26, easing: Linear.easeNone, rotation: .01 - } - , "frame2+=1"), - this.timeline.timeScale(1) -} + }); -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - console.log(t), - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} -; \ No newline at end of file + this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1}) + .add(this.copyAnimation.play(), 'frame2+=1') + .from(this.bg, 13, { x: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2+=1'); + + this.timeline.timeScale(1); +}; + +Banner.prototype.addEventListeners = function (_this) { + // var _this = this; + console.log(_this); + + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +}; diff --git a/src/sunpower-banners-equinoxrevolution-300x250/index.html b/src/sunpower-banners-equinoxrevolution-300x250/index.html index 236ff3f..a9ccd66 100644 --- a/src/sunpower-banners-equinoxrevolution-300x250/index.html +++ b/src/sunpower-banners-equinoxrevolution-300x250/index.html @@ -1 +1,22 @@ -sunpower-banners-equinoxrevolution-300x250 \ No newline at end of file + + + + + + + sunpower-banners-equinoxrevolution-300x250 + + + + + + + + + + diff --git a/src/sunpower-banners-equinoxrevolution-300x250/js/banner.animation.js b/src/sunpower-banners-equinoxrevolution-300x250/js/banner.animation.js index 9c7cb74..8d1e66c 100644 --- a/src/sunpower-banners-equinoxrevolution-300x250/js/banner.animation.js +++ b/src/sunpower-banners-equinoxrevolution-300x250/js/banner.animation.js @@ -1,264 +1,253 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/bg.jpg", - "images/bg2.png", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/copy9.png", - "images/copy10.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png", - "images/vig.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner - } - ), - this.vig=this.smartObject( { - id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner - } - ), - this.bg2=this.smartObject( { - id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.copy9=this.smartObject( { - id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner - } - ), - this.copy10=this.smartObject( { - id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", width: 75, height: 18, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 20 - } - ), - this.copy2.set( { - left: -10, top: 60 - } - ), - this.copy3.set( { - left: -10, top: 100 - } - ), - this.copy4.set( { - left: -10, top: 20 - } - ), - this.copy5.set( { - left: -10, top: 60 - } - ), - this.copy6.set( { - left: -10, top: 20 - } - ), - this.copy7.set( { - left: -10, top: 60 - } - ), - this.copy8.set( { - left: -10, top: 100 - } - ), - this.copy9.set( { - left: -10, top: 20 - } - ), - this.copy10.set( { - left: -10, top: 60 - } - ), - this.vig.set( { - bottom: 0 - } - ), - this.logo.set( { - left: 150, top: 216 - } - ), - this.tag.set( { - left: 150, top: 192 - } - ), - this.cta.set( { - left: 10, top: 216 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.bg.set( { - left: -61, bottom: -23, scale: .9 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/bg.jpg', + 'images/bg2.png', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/copy9.png', + 'images/copy10.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + 'images/vig.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + parent: this.banner + }); + + this.vig = this.smartObject({ + id: 'vig', + backgroundImage: 'images/vig.png', + top: 'none', + parent: this.banner + }); + + this.bg2 = this.smartObject({ + id: 'bg2', + backgroundImage: 'images/bg2.png', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.copy9 = this.smartObject({ + id: 'copy9', + backgroundImage: 'images/copy9.png', + parent: this.banner + }); + + this.copy10 = this.smartObject({ + id: 'copy10', + backgroundImage: 'images/copy10.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + width: 75, + height: 18, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 20 }); + this.copy2.set({ left: -10, top: 60 }); + this.copy3.set({ left: -10, top: 100 }); + this.copy4.set({ left: -10, top: 20 }); + this.copy5.set({ left: -10, top: 60 }); + this.copy6.set({ left: -10, top: 20 }); + this.copy7.set({ left: -10, top: 60 }); + this.copy8.set({ left: -10, top: 100 }); + this.copy9.set({ left: -10, top: 20 }); + this.copy10.set({ left: -10, top: 60 }); + this.vig.set({ bottom: 0 }); + this.logo.set({ left: 150, top: 216 }); + this.tag.set({ left: 150, top: 192 }); + this.cta.set({ left: 10, top: 216 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.bg.set({ left: -61, bottom: -23, scale: 0.9 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + // this.timeLineCTA = new TimelineMax({ paused: true }) + // .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta'); + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'cta') + // .from(this.cta, 1, { autoAlpha: 0 }, 'cta') + .to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .staggerFrom([this.copy9, this.copy10], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .from(this.tag, 0.5, { autoAlpha: 0 }) + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], 0.5, { autoAlpha: 0 }) + .to(this.bg2, 0.5, { autoAlpha: 1 }); } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy4, this.copy5], .5, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy4, this.copy5], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").staggerFrom([this.copy6, this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeOut - } - , .1, "cta").to([this.copy6, this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").staggerFrom([this.copy9, this.copy10], .5, { - x: -300, ease: Power1.easeOut - } - , .1).from(this.tag, .5, { - autoAlpha: 0 - } - ).call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], .5, { - autoAlpha: 0 - } - ).to(this.bg2, .5, { - autoAlpha: 1 - } - )) - } - ), - this.timeline=new TimelineMax( { - repeat: 1, repeatDelay: 2 - } - ).staggerFrom([this.copy1, this.copy2, this.copy3], .5, { - x: -300, ease: Power1.easeOut - } - , .1, "frame1+=0.5").to([this.copy1, this.copy2, this.copy3], .5, { - x: -300, ease: Power1.easeIn - } - , "frame1+=3").to(this.bg2, 1, { - autoAlpha: 0 - } + }); - , "frame2-=1").add(this.copyAnimation.play(), "frame2"), - this.timeline.timeScale(1) -} + this.timeline = new TimelineMax({repeat: 1, repeatDelay: 2}) + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5') + .to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3') + .to(this.bg2, 1, { autoAlpha: 0 }) + .from(this.bg, this.copyAnimation._duration, { scale: 1.3 }, 'frame2-=1') + .from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1') + .add(this.copyAnimation.play(), 'frame2'); -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - console.log(t), - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} + this.timeline.timeScale(1); +}; -; \ No newline at end of file +Banner.prototype.addEventListeners = function (_this) { + // var _this = this; + console.log(_this); + + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +}; diff --git a/src/sunpower-banners-equinoxrevolution-300x600/index.html b/src/sunpower-banners-equinoxrevolution-300x600/index.html index 5aee6ba..0517e59 100644 --- a/src/sunpower-banners-equinoxrevolution-300x600/index.html +++ b/src/sunpower-banners-equinoxrevolution-300x600/index.html @@ -1 +1,22 @@ -sunpower-banners-equinoxrevolution-300x600 \ No newline at end of file + + + + + + + sunpower-banners-equinoxrevolution-300x600 + + + + + + + + + + diff --git a/src/sunpower-banners-equinoxrevolution-300x600/js/banner.animation.js b/src/sunpower-banners-equinoxrevolution-300x600/js/banner.animation.js index 2232e58..5d70e33 100644 --- a/src/sunpower-banners-equinoxrevolution-300x600/js/banner.animation.js +++ b/src/sunpower-banners-equinoxrevolution-300x600/js/banner.animation.js @@ -1,296 +1,272 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/logo-big.png", - "images/bg.jpg", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/copy9.png", - "images/copy10.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.logoBig=this.smartObject( { - id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.copy9=this.smartObject( { - id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner - } - ), - this.copy10=this.smartObject( { - id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", backgroundImage: "images/cta-nrm.png", parent: this.banner - } - ), - this.ctaNrm2=this.smartObject( { - id: "ctaNrm2", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr2=this.smartObject( { - id: "ctaOvr2", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ), - this.cta2=this.smartObject( { - id: "cta", width: 118, height: 27, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta2 - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta2 - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 65 - } - ), - this.copy2.set( { - left: -10, top: 105 - } - ), - this.copy3.set( { - left: -10, top: 145 - } - ), - this.copy4.set( { - left: -10, top: 65 - } - ), - this.copy5.set( { - left: -10, top: 105 - } - ), - this.copy6.set( { - left: 23, top: 80 - } - ), - this.copy7.set( { - left: -10, top: 105 - } - ), - this.copy8.set( { - left: -10, top: 145 - } - ), - this.copy9.set( { - left: -10, top: 65 - } - ), - this.copy10.set( { - left: -10, top: 105 - } - ), - this.logo.set( { - left: 16, top: 564 - } - ), - this.logoBig.centerHorizontal(), - this.logoBig.set( { - top: 554 - } - ), - this.tag.centerHorizontal(), - this.tag.set( { - top: 510 - } - ), - this.cta.set( { - left: 169, top: 557 - } - ), - this.ctaOvr2.set( { - autoAlpha: 0 - } - ), - this.cta2.set( { - left: 14, top: 153 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.bg.set( { - right: 0, bottom: 0 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/logo-big.png', + 'images/bg.jpg', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/copy9.png', + 'images/copy10.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta2.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + left: 'none', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.logoBig = this.smartObject({ + id: 'LOGO-BIG', + backgroundImage: 'images/logo-big.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.copy9 = this.smartObject({ + id: 'copy9', + backgroundImage: 'images/copy9.png', + parent: this.banner + }); + + this.copy10 = this.smartObject({ + id: 'copy10', + backgroundImage: 'images/copy10.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + backgroundImage: 'images/cta-nrm.png', + parent: this.banner + }); + + this.ctaNrm2 = this.smartObject({ + id: 'ctaNrm2', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr2 = this.smartObject({ + id: 'ctaOvr2', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); + + this.cta2 = this.smartObject({ + id: 'cta', + width: 118, + height: 27, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta2 + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta2 + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 65 }); + this.copy2.set({ left: -10, top: 105 }); + this.copy3.set({ left: -10, top: 145 }); + this.copy4.set({ left: -10, top: 65 }); + this.copy5.set({ left: -10, top: 105 }); + this.copy6.set({ left: 23, top: 80 }); + this.copy7.set({ left: -10, top: 105 }); + this.copy8.set({ left: -10, top: 145 }); + this.copy9.set({ left: -10, top: 65 }); + this.copy10.set({ left: -10, top: 105 }); + this.logo.set({ left: 16, top: 564 }); + this.logoBig.centerHorizontal(); + this.logoBig.set({ top: 554 }); + this.tag.centerHorizontal(); + this.tag.set({ top: 510 }); + this.cta.set({ left: 169, top: 557 }); + this.ctaOvr2.set({ autoAlpha: 0 }); + this.cta2.set({ left: 14, top: 153 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.bg.set({ right: 0, bottom: 0 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + this.cta2.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta2.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 0 }); + }); + + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeIn }, '+=3') + .staggerFrom([this.copy4, this.copy5], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy4, this.copy5], 0.4, { x: -300, ease: Power1.easeIn }, '=+3') + .staggerFrom([this.copy6, this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeOut }, 0.1, 'cta') + .to([this.copy6, this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeIn }, '=+2') + .to([this.logo, this.cta], 0.4, { autoAlpha: 0 }, 'swap') + .from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=0.5') + .staggerFrom([this.copy9, this.copy10], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .from(this.cta2, 0.4, { autoAlpha: 0 }) + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], 0.5, { autoAlpha: 0 }) } - ) - } - ), - this.cta2.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr2, 1, { - autoAlpha: 1 - } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr2, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy1, this.copy2, this.copy3], .4, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy1, this.copy2, this.copy3], .4, { - x: -300, ease: Power1.easeIn - } - , "+=3").staggerFrom([this.copy4, this.copy5], .4, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy4, this.copy5], .4, { - x: -300, ease: Power1.easeIn - } - , "=+3").staggerFrom([this.copy6, this.copy7, this.copy8], .4, { - x: -300, ease: Power1.easeOut - } - , .1, "cta").to([this.copy6, this.copy7, this.copy8], .4, { - x: -300, ease: Power1.easeIn - } - , "=+2").to([this.logo, this.cta], .4, { - autoAlpha: 0 - } - , "swap").from([this.logoBig, this.tag], .5, { - autoAlpha: 0 - } - , "swap+=0.5").staggerFrom([this.copy9, this.copy10], .4, { - x: -300, ease: Power1.easeOut - } - , .1).from(this.cta2, .4, { - autoAlpha: 0 - } - ).call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], .5, { - autoAlpha: 0 - } - )) - } - ), - this.timeline=new TimelineMax( { - paused: !1, repeat: 1, repeatDelay: 1 - } - ).add(this.copyAnimation.play(), "frame2+=1").from(13, { - x: 26, easing: Linear.easeNone, rotation: .01 - } - , "frame2+=1"), - this.timeline.timeScale(1) -} + }); -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - console.log(t), - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} -; \ No newline at end of file + this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1}) + .add(this.copyAnimation.play(), 'frame2+=1') + .from(this.bg, 13, { x: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2+=1'); + + this.timeline.timeScale(1); +}; + +Banner.prototype.addEventListeners = function (_this) { + // var _this = this; + console.log(_this); + + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +}; diff --git a/src/sunpower-banners-savings-300x250/index.html b/src/sunpower-banners-savings-300x250/index.html index fc24b14..d984138 100644 --- a/src/sunpower-banners-savings-300x250/index.html +++ b/src/sunpower-banners-savings-300x250/index.html @@ -1 +1,22 @@ -sunpower-banners-savings-300x250 \ No newline at end of file + + + + + + + sunpower-banners-savings-300x250 + + + + + + + + + + diff --git a/src/sunpower-banners-savings-300x250/js/banner.animation.js b/src/sunpower-banners-savings-300x250/js/banner.animation.js index e6c3a22..8261f4c 100644 --- a/src/sunpower-banners-savings-300x250/js/banner.animation.js +++ b/src/sunpower-banners-savings-300x250/js/banner.animation.js @@ -1,263 +1,253 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/bg.jpg", - "images/bg2.png", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/copy9.png", - "images/copy10.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png", - "images/vig.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner - } - ), - this.vig=this.smartObject( { - id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner - } - ), - this.bg2=this.smartObject( { - id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.copy9=this.smartObject( { - id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner - } - ), - this.copy10=this.smartObject( { - id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", width: 75, height: 18, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 20 - } - ), - this.copy2.set( { - left: -10, top: 60 - } - ), - this.copy3.set( { - left: -10, top: 100 - } - ), - this.copy4.set( { - left: -10, top: 20 - } - ), - this.copy5.set( { - left: -10, top: 60 - } - ), - this.copy6.set( { - left: -10, top: 100 - } - ), - this.copy7.set( { - left: -10, top: 20 - } - ), - this.copy8.set( { - left: -10, top: 60 - } - ), - this.copy9.set( { - left: -10, top: 20 - } - ), - this.copy10.set( { - left: -10, top: 60 - } - ), - this.vig.set( { - bottom: 0 - } - ), - this.logo.set( { - left: 150, top: 216 - } - ), - this.tag.set( { - left: 150, top: 192 - } - ), - this.cta.set( { - left: 10, top: 216 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.bg.set( { - left: -51, bottom: -42, scale: .75 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/bg.jpg', + 'images/bg2.png', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/copy9.png', + 'images/copy10.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + 'images/vig.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + parent: this.banner + }); + + this.vig = this.smartObject({ + id: 'vig', + backgroundImage: 'images/vig.png', + top: 'none', + parent: this.banner + }); + + this.bg2 = this.smartObject({ + id: 'bg2', + backgroundImage: 'images/bg2.png', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.copy9 = this.smartObject({ + id: 'copy9', + backgroundImage: 'images/copy9.png', + parent: this.banner + }); + + this.copy10 = this.smartObject({ + id: 'copy10', + backgroundImage: 'images/copy10.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + width: 75, + height: 18, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 20 }); + this.copy2.set({ left: -10, top: 60 }); + this.copy3.set({ left: -10, top: 100 }); + this.copy4.set({ left: -10, top: 20 }); + this.copy5.set({ left: -10, top: 60 }); + this.copy6.set({ left: -10, top: 100 }); + this.copy7.set({ left: -10, top: 20 }); + this.copy8.set({ left: -10, top: 60 }); + this.copy9.set({ left: -10, top: 20 }); + this.copy10.set({ left: -10, top: 60 }); + this.vig.set({ bottom: 0 }); + this.logo.set({ left: 150, top: 216 }); + this.tag.set({ left: 150, top: 192 }); + this.cta.set({ left: 10, top: 216 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.bg.set({ left: -51, bottom: -42, scale: 0.75 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + // this.timeLineCTA = new TimelineMax({ paused: true }) + // .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta'); + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .staggerFrom([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'cta') + // .from(this.cta, 1, { autoAlpha: 0 }, 'cta') + .to([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .staggerFrom([this.copy9, this.copy10], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .from(this.tag, 0.5, { autoAlpha: 0 }) + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], 0.5, { autoAlpha: 0 }) + .to(this.bg2, 0.5, { autoAlpha: 1 }); } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy4, this.copy5, this.copy6], .5, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy4, this.copy5, this.copy6], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").staggerFrom([this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeOut - } - , .1, "cta").to([this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").staggerFrom([this.copy9, this.copy10], .5, { - x: -300, ease: Power1.easeOut - } - , .1).from(this.tag, .5, { - autoAlpha: 0 - } - ).call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], .5, { - autoAlpha: 0 - } - ).to(this.bg2, .5, { - autoAlpha: 1 - } - )) - } - ), - this.timeline=new TimelineMax( { - repeat: 1, repeatDelay: 2 - } - ).staggerFrom([this.copy1, this.copy2, this.copy3], .5, { - x: -300, ease: Power1.easeOut - } - , .1, "frame1+=0.5").to([this.copy1, this.copy2, this.copy3], .5, { - x: -300, ease: Power1.easeIn - } - , "frame1+=3").to(this.bg2, 1, { - autoAlpha: 0 - } + }); - , "frame2-=1").add(this.copyAnimation.play(), "frame2"), - this.timeline.timeScale(1) -} -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - console.log(t), - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} + this.timeline = new TimelineMax({repeat: 1, repeatDelay: 2}) + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5') + .to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3') + .to(this.bg2, 1, { autoAlpha: 0 }) + .from(this.bg, this.copyAnimation._duration, { scale: 1 }, 'frame2-=1') + .from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1') + .add(this.copyAnimation.play(), 'frame2'); -; \ No newline at end of file + this.timeline.timeScale(1); +}; + +Banner.prototype.addEventListeners = function (_this) { + // var _this = this; + console.log(_this); + + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +}; diff --git a/src/sunpower-banners-savings-300x600/index.html b/src/sunpower-banners-savings-300x600/index.html index fc59181..278e2e4 100644 --- a/src/sunpower-banners-savings-300x600/index.html +++ b/src/sunpower-banners-savings-300x600/index.html @@ -1 +1,22 @@ -sunpower-banners-savings-300x600 \ No newline at end of file + + + + + + + sunpower-banners-savings-300x600 + + + + + + + + + + diff --git a/src/sunpower-banners-savings-300x600/js/banner.animation.js b/src/sunpower-banners-savings-300x600/js/banner.animation.js index 70767df..c4f3ed1 100644 --- a/src/sunpower-banners-savings-300x600/js/banner.animation.js +++ b/src/sunpower-banners-savings-300x600/js/banner.animation.js @@ -1,305 +1,282 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/logo-big.png", - "images/bg.jpg", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/copy9.png", - "images/copy10.png", - "images/copy11.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.logoBig=this.smartObject( { - id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.copy9=this.smartObject( { - id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner - } - ), - this.copy10=this.smartObject( { - id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner - } - ), - this.copy11=this.smartObject( { - id: "copy11", backgroundImage: "images/copy11.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", backgroundImage: "images/cta-nrm.png", parent: this.banner - } - ), - this.ctaNrm2=this.smartObject( { - id: "ctaNrm2", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr2=this.smartObject( { - id: "ctaOvr2", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ), - this.cta2=this.smartObject( { - id: "cta", width: 118, height: 27, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta2 - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta2 - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 25 - } - ), - this.copy2.set( { - left: -10, top: 65 - } - ), - this.copy3.set( { - left: -10, top: 105 - } - ), - this.copy4.set( { - left: -10, top: 25 - } - ), - this.copy5.set( { - left: -10, top: 65 - } - ), - this.copy6.set( { - left: -10, top: 105 - } - ), - this.copy7.set( { - left: -10, top: 25 - } - ), - this.copy8.set( { - left: -10, top: 65 - } - ), - this.copy9.set( { - left: -10, top: 25 - } - ), - this.copy10.set( { - left: -10, top: 65 - } - ), - this.copy11.set( { - left: -10, top: 105 - } - ), - this.logo.set( { - left: 16, top: 564 - } - ), - this.logoBig.centerHorizontal(), - this.logoBig.set( { - top: 554 - } - ), - this.tag.centerHorizontal(), - this.tag.set( { - top: 510 - } - ), - this.cta.set( { - left: 169, top: 557 - } - ), - this.ctaOvr2.set( { - autoAlpha: 0 - } - ), - this.cta2.set( { - left: 14, top: 149 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.bg.set( { - right: 0, bottom: 0 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/logo-big.png', + 'images/bg.jpg', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/copy9.png', + 'images/copy10.png', + 'images/copy11.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta2.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + left: 'none', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.logoBig = this.smartObject({ + id: 'LOGO-BIG', + backgroundImage: 'images/logo-big.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.copy9 = this.smartObject({ + id: 'copy9', + backgroundImage: 'images/copy9.png', + parent: this.banner + }); + + this.copy10 = this.smartObject({ + id: 'copy10', + backgroundImage: 'images/copy10.png', + parent: this.banner + }); + + this.copy11 = this.smartObject({ + id: 'copy11', + backgroundImage: 'images/copy11.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + backgroundImage: 'images/cta-nrm.png', + parent: this.banner + }); + + this.ctaNrm2 = this.smartObject({ + id: 'ctaNrm2', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr2 = this.smartObject({ + id: 'ctaOvr2', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); + + this.cta2 = this.smartObject({ + id: 'cta', + width: 118, + height: 27, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta2 + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta2 + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 25 }); + this.copy2.set({ left: -10, top: 65 }); + this.copy3.set({ left: -10, top: 105 }); + this.copy4.set({ left: -10, top: 25 }); + this.copy5.set({ left: -10, top: 65 }); + this.copy6.set({ left: -10, top: 105 }); + this.copy7.set({ left: -10, top: 25 }); + this.copy8.set({ left: -10, top: 65 }); + this.copy9.set({ left: -10, top: 25 }); + this.copy10.set({ left: -10, top: 65 }); + this.copy11.set({ left: -10, top: 105 }); + this.logo.set({ left: 16, top: 564 }); + this.logoBig.centerHorizontal(); + this.logoBig.set({ top: 554 }); + this.tag.centerHorizontal(); + this.tag.set({ top: 510 }); + this.cta.set({ left: 169, top: 557 }); + this.ctaOvr2.set({ autoAlpha: 0 }); + this.cta2.set({ left: 14, top: 149 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.bg.set({ right: 0, bottom: 0 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + this.cta2.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta2.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 0 }); + }); + + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeIn }, '+=3') + .staggerFrom([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeIn }, '=+3') + .staggerFrom([this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeOut }, 0.1, 'cta') + // .from(this.cta, 1, { autoAlpha: 0 }, 'cta') + .to([this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeIn }, '=+2') + .to([this.logo, this.cta], 0.4, { autoAlpha: 0 }, 'swap') + .from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=0.5') + // .staggerFrom([this.copy10, this.copy11, this.cta2], 0.4, { autoAlpha: 0 }, 0.4, 'swap+=1') + .staggerFrom([this.copy9, this.copy10, this.copy11], 0.4, { x: -300, ease: Power1.easeOut }, 0.1) + .from(this.cta2, 0.4, { autoAlpha: 0 }) + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.copy9, this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], 0.5, { autoAlpha: 0 }) } - ) - } - ), - this.cta2.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr2, 1, { - autoAlpha: 1 - } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr2, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy1, this.copy2, this.copy3], .4, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy1, this.copy2, this.copy3], .4, { - x: -300, ease: Power1.easeIn - } - , "+=3").staggerFrom([this.copy4, this.copy5, this.copy6], .4, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy4, this.copy5, this.copy6], .4, { - x: -300, ease: Power1.easeIn - } - , "=+3").staggerFrom([this.copy7, this.copy8], .4, { - x: -300, ease: Power1.easeOut - } - , .1, "cta").to([this.copy7, this.copy8], .4, { - x: -300, ease: Power1.easeIn - } - , "=+2").to([this.logo, this.cta], .4, { - autoAlpha: 0 - } - , "swap").from([this.logoBig, this.tag], .5, { - autoAlpha: 0 - } - , "swap+=0.5").staggerFrom([this.copy9, this.copy10, this.copy11], .4, { - x: -300, ease: Power1.easeOut - } - , .1).from(this.cta2, .4, { - autoAlpha: 0 - } - ).call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], .5, { - autoAlpha: 0 - } - )) - } - ), - this.timeline=new TimelineMax( { - paused: !1, repeat: 1, repeatDelay: 1 - } - ).add(this.copyAnimation.play(), "frame2+=1").from(13, { - x: 26, easing: Linear.easeNone, rotation: .01 - } - , "frame2+=1"), - this.timeline.timeScale(1) -} + }); -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - console.log(t), - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} -; \ No newline at end of file + this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1}) + .add(this.copyAnimation.play(), 'frame2+=1') + .from(this.bg, 13, { x: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2+=1'); + + this.timeline.timeScale(1); +}; + +Banner.prototype.addEventListeners = function (_this) { + // var _this = this; + console.log(_this); + + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +}; diff --git a/src/sunpower-banners-warranty-300x250-v2/index.html b/src/sunpower-banners-warranty-300x250-v2/index.html index 94f3360..8c2585c 100644 --- a/src/sunpower-banners-warranty-300x250-v2/index.html +++ b/src/sunpower-banners-warranty-300x250-v2/index.html @@ -1 +1,23 @@ -sunpower-banners-warranty-300x250 \ No newline at end of file + + + + + + + sunpower-banners-warranty-300x250 + + + + + + + + + + + diff --git a/src/sunpower-banners-warranty-300x250-v2/js/banner.animation.js b/src/sunpower-banners-warranty-300x250-v2/js/banner.animation.js index 672cefd..392bbf3 100644 --- a/src/sunpower-banners-warranty-300x250-v2/js/banner.animation.js +++ b/src/sunpower-banners-warranty-300x250-v2/js/banner.animation.js @@ -1,251 +1,244 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/badge.png", - "images/bg.jpg", - "images/bg2.png", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png", - "images/vig.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner - } - ), - this.vig=this.smartObject( { - id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner - } - ), - this.bg2=this.smartObject( { - id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.badge=this.smartObject( { - id: "badge", backgroundImage: "images/badge.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", width: 75, height: 18, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 20 - } - ), - this.copy2.set( { - left: -10, top: 60 - } - ), - this.copy3.set( { - left: -10, top: 20 - } - ), - this.copy4.set( { - left: -10, top: 60 - } - ), - this.copy5.set( { - left: -10, top: 100 - } - ), - this.copy6.set( { - left: -10, top: 20 - } - ), - this.copy7.set( { - left: -10, top: 60 - } - ), - this.copy8.set( { - left: -10, top: 100 - } - ), - this.vig.set( { - bottom: 0 - } - ), - this.logo.set( { - left: 150, top: 216 - } - ), - this.tag.set( { - left: 150, top: 192 - } - ), - this.cta.set( { - left: 10, top: 216 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.badge.set( { - left: 159, top: 0 - } - ), - this.bg.set( { - left: -61, bottom: -48, scale: .8 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/badge.png', + 'images/bg.jpg', + 'images/bg2.png', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + 'images/vig.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + parent: this.banner + }); + + this.vig = this.smartObject({ + id: 'vig', + backgroundImage: 'images/vig.png', + top: 'none', + parent: this.banner + }); + + this.bg2 = this.smartObject({ + id: 'bg2', + backgroundImage: 'images/bg2.png', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.badge = this.smartObject({ + id: 'badge', + backgroundImage: 'images/badge.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + width: 75, + height: 18, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 20 }); + this.copy2.set({ left: -10, top: 60 }); + this.copy3.set({ left: -10, top: 20 }); + this.copy4.set({ left: -10, top: 60 }); + this.copy5.set({ left: -10, top: 100 }); + this.copy6.set({ left: -10, top: 20 }); + this.copy7.set({ left: -10, top: 60 }); + this.copy8.set({ left: -10, top: 100 }); + this.vig.set({ bottom: 0 }); + this.logo.set({ left: 150, top: 216 }); + this.tag.set({ left: 150, top: 192 }); + this.cta.set({ left: 10, top: 216 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.badge.set({ left: 159, top: 0 }); + this.bg.set({ left: -61, bottom: -48, scale: 0.8 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + // this.timeLineCTA = new TimelineMax({ paused: true }) + // .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta'); + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeIn }, '=+3') + .staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + // .from(this.cta, 1, { autoAlpha: 0 }) + .to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+3') + .staggerFrom([this.badge, this.tag], 0.5, { autoAlpha: 0 }, 0.5) + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.badge, this.tag, this.cta], 0.5, { autoAlpha: 0 }) + .to(this.bg2, 0.5, { autoAlpha: 1 }); } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy3, this.copy4, this.copy5], .5, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy3, this.copy4, this.copy5], .5, { - x: -300, ease: Power1.easeIn - } - , "=+3").staggerFrom([this.copy6, this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy6, this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeIn - } - , "=+3").staggerFrom([this.badge, this.tag], .5, { - autoAlpha: 0 - } - , .5).call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.badge, this.tag, this.cta], .5, { - autoAlpha: 0 - } - ).to(this.bg2, .5, { - autoAlpha: 1 - } - )) - } - ), - this.timeline=new TimelineMax( { - paused: !1, repeat: 1, repeatDelay: 1 - } - ).staggerFrom([this.copy1, this.copy2], .5, { - x: -300, ease: Power1.easeOut - } - , .1, "frame1+=0.5").to([this.copy1, this.copy2], .5, { - x: -300, ease: Power1.easeIn - } - , "frame1+=3").to(this.bg2, 1, { - autoAlpha: 0 - } - - , "frame2-=1").add(this.copyAnimation.play(), "frame2"), - this.timeline.timeScale(1) -} + }); -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - console.log(t), - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} -; \ No newline at end of file + this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1}) + .staggerFrom([this.copy1, this.copy2], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5') + .to([this.copy1, this.copy2], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3') + .to(this.bg2, 1, { autoAlpha: 0 }) + .from(this.bg, this.copyAnimation._duration, { scale: 1 }, 'frame2-=1') + .from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1') + .add(this.copyAnimation.play(), 'frame2'); + + this.timeline.timeScale(1); +}; + +Banner.prototype.addEventListeners = function (_this) { + // var _this = this; + console.log(_this); + + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +}; diff --git a/src/sunpower-banners-warranty-300x600-v2/index.html b/src/sunpower-banners-warranty-300x600-v2/index.html index a116882..865b271 100644 --- a/src/sunpower-banners-warranty-300x600-v2/index.html +++ b/src/sunpower-banners-warranty-300x600-v2/index.html @@ -1 +1,23 @@ -sunpower-banners-warranty-300x600 \ No newline at end of file + + + + + + + sunpower-banners-warranty-300x600 + + + + + + + + + + + diff --git a/src/sunpower-banners-warranty-300x600-v2/js/banner.animation.js b/src/sunpower-banners-warranty-300x600-v2/js/banner.animation.js index 312ccb5..9e378d7 100644 --- a/src/sunpower-banners-warranty-300x600-v2/js/banner.animation.js +++ b/src/sunpower-banners-warranty-300x600-v2/js/banner.animation.js @@ -1,263 +1,246 @@ -"use strict"; -Banner.prototype.start=function() { - this.banner=document.querySelector(".banner"), - this.bannerWidth=this.banner.offsetWidth, - this.bannerHeight=this.banner.offsetHeight, - this.images=["images/logo.png", - "images/logo-big.png", - "images/badge.png", - "images/bg.jpg", - "images/vig.png", - "images/copy1.png", - "images/copy2.png", - "images/copy3.png", - "images/copy4.png", - "images/copy5.png", - "images/copy6.png", - "images/copy7.png", - "images/copy8.png", - "images/cta-nrm.png", - "images/cta-ovr.png", - "images/tag.png"]; - var t=this; - this.preloadImages(this.images, function() { - t.createElements(), t.setup(), t.hidePreloader(), t.animate() - } - ) -} +'use strict'; -, -Banner.prototype.createElements=function() { - this.bg=this.smartObject( { - id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner - } - ), - this.vig=this.smartObject( { - id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner - } - ), - this.logo=this.smartObject( { - id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner - } - ), - this.logoBig=this.smartObject( { - id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner - } - ), - this.copy1=this.smartObject( { - id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner - } - ), - this.copy2=this.smartObject( { - id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner - } - ), - this.copy3=this.smartObject( { - id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner - } - ), - this.copy4=this.smartObject( { - id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner - } - ), - this.copy5=this.smartObject( { - id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner - } - ), - this.copy6=this.smartObject( { - id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner - } - ), - this.copy7=this.smartObject( { - id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner - } - ), - this.copy8=this.smartObject( { - id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner - } - ), - this.badge=this.smartObject( { - id: "badge", backgroundImage: "images/badge.png", parent: this.banner - } - ), - this.tag=this.smartObject( { - id: "tag", backgroundImage: "images/tag.png", parent: this.banner - } - ), - this.cta=this.smartObject( { - id: "cta", width: 118, height: 27, parent: this.banner - } - ), - this.ctaNrm=this.smartObject( { - id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta - } - ), - this.ctaOvr=this.smartObject( { - id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta - } - ) -} +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); -, -Banner.prototype.setup=function() { - this.copy1.set( { - left: -10, top: 62 - } - ), - this.copy2.set( { - left: -10, top: 102 - } - ), - this.copy3.set( { - left: -10, top: 62 - } - ), - this.copy4.set( { - left: -10, top: 102 - } - ), - this.copy5.set( { - left: -10, top: 142 - } - ), - this.copy6.set( { - left: -10, top: 62 - } - ), - this.copy7.set( { - left: -10, top: 102 - } - ), - this.copy8.set( { - left: -10, top: 142 - } - ), - this.logo.set( { - left: 16, top: 564 - } - ), - this.logoBig.centerHorizontal(), - this.logoBig.set( { - top: 507 - } - ), - this.tag.centerHorizontal(), - this.tag.set( { - top: 468 - } - ), - this.cta.set( { - left: 169, top: 557 - } - ), - this.ctaOvr.set( { - autoAlpha: 0 - } - ), - this.badge.centerHorizontal(), - this.badge.set( { - top: 0 - } - ), - this.bg.set( { - right: 0, bottom: 0 - } - ), - this.vig.set( { - bottom: 0 - } - ) -} + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; -, -Banner.prototype.hidePreloader=function() { - TweenLite.to(".preloader", 1, { - autoAlpha: 0 - } - ) -} + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/logo-big.png', + 'images/badge.png', + 'images/bg.jpg', + 'images/vig.png', + 'images/copy1.png', + 'images/copy2.png', + 'images/copy3.png', + 'images/copy4.png', + 'images/copy5.png', + 'images/copy6.png', + 'images/copy7.png', + 'images/copy8.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', + 'images/tag.png', + ]; -, -Banner.prototype.animate=function() { - var t=this, - e=this, - a=0; - this.cta.addEventListener("mouseover", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 1 + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + }); +}; + +/** + * Create dom elements. + */ +Banner.prototype.createElements = function () { + this.bg = this.smartObject({ + id: 'bg', + backgroundImage: 'images/bg.jpg', + top: 'none', + left: 'none', + parent: this.banner + }); + + this.vig = this.smartObject({ + id: 'vig', + backgroundImage: 'images/vig.png', + top: 'none', + parent: this.banner + }); + + this.logo = this.smartObject({ + id: 'LOGO', + backgroundImage: 'images/logo.png', + parent: this.banner + }); + + this.logoBig = this.smartObject({ + id: 'LOGO-BIG', + backgroundImage: 'images/logo-big.png', + parent: this.banner + }); + + this.copy1 = this.smartObject({ + id: 'copy1', + backgroundImage: 'images/copy1.png', + parent: this.banner + }); + + this.copy2 = this.smartObject({ + id: 'copy2', + backgroundImage: 'images/copy2.png', + parent: this.banner + }); + + this.copy3 = this.smartObject({ + id: 'copy3', + backgroundImage: 'images/copy3.png', + parent: this.banner + }); + + this.copy4 = this.smartObject({ + id: 'copy4', + backgroundImage: 'images/copy4.png', + parent: this.banner + }); + + this.copy5 = this.smartObject({ + id: 'copy5', + backgroundImage: 'images/copy5.png', + parent: this.banner + }); + + this.copy6 = this.smartObject({ + id: 'copy6', + backgroundImage: 'images/copy6.png', + parent: this.banner + }); + + this.copy7 = this.smartObject({ + id: 'copy7', + backgroundImage: 'images/copy7.png', + parent: this.banner + }); + + this.copy8 = this.smartObject({ + id: 'copy8', + backgroundImage: 'images/copy8.png', + parent: this.banner + }); + + this.badge = this.smartObject({ + id: 'badge', + backgroundImage: 'images/badge.png', + parent: this.banner + }); + + this.tag = this.smartObject({ + id: 'tag', + backgroundImage: 'images/tag.png', + parent: this.banner + }); + + this.cta = this.smartObject({ + id: 'cta', + width: 118, + height: 27, + parent: this.banner + }); + + this.ctaNrm = this.smartObject({ + id: 'ctaNrm', + backgroundImage: 'images/cta-nrm.png', + parent: this.cta + }); + + this.ctaOvr = this.smartObject({ + id: 'ctaOvr', + backgroundImage: 'images/cta-ovr.png', + parent: this.cta + }); +}; + +/** + * Setup initial element states. + */ +Banner.prototype.setup = function () { + this.copy1.set({ left: -10, top: 62 }); + this.copy2.set({ left: -10, top: 102 }); + this.copy3.set({ left: -10, top: 62 }); + this.copy4.set({ left: -10, top: 102 }); + this.copy5.set({ left: -10, top: 142 }); + this.copy6.set({ left: -10, top: 62 }); + this.copy7.set({ left: -10, top: 102 }); + this.copy8.set({ left: -10, top: 142 }); + this.logo.set({ left: 16, top: 564 }); + this.logoBig.centerHorizontal(); + this.logoBig.set({ top: 507 }); + this.tag.centerHorizontal(); + this.tag.set({ top: 468 }); + this.cta.set({ left: 169, top: 557 }); + this.ctaOvr.set({ autoAlpha: 0 }); + this.badge.centerHorizontal(); + this.badge.set({ top: 0 }); + this.bg.set({ right: 0, bottom: 0 }); + this.vig.set({ bottom: 0 }); +}; + +/** + * Hide the preloader. + */ +Banner.prototype.hidePreloader = function () { + TweenLite.to('.preloader', 1, { autoAlpha: 0 }); +}; + +/** + * Animation timeline. + */ +Banner.prototype.animate = function () { + var _this = this; + var loop = 0; + + this.cta.addEventListener('mouseover', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 }); + }); + + this.cta.addEventListener('mouseout', () => { + TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 }); + }); + + this.copyAnimation = new TimelineMax({paused: true}) + .staggerFrom([this.copy1, this.copy2], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy1, this.copy2], 0.5, { x: -300, ease: Power1.easeIn }, '+=2') + .staggerFrom([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1) + .to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2') + .to(this.logo, 0.5, { autoAlpha: 0 }, 'swap') + .to(this.cta, 0.5, { x: -80 }, 'swap') + .from(this.badge, 0.5, { autoAlpha: 0 }, 'end') + .from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=1') + .call(function(){ + loop++ + console.log('loop: ', loop); + if (loop >= 2){ + console.log('if') + _this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]); + } else { + console.log('else') + _this.copyAnimation.to([this.badge, this.tag, this.cta], 0.5, { autoAlpha: 0 }) } - ) - } - ), - this.cta.addEventListener("mouseout", function() { - TweenLite.to(t.ctaOvr, 1, { - autoAlpha: 0 - } - ) - } - ), - this.copyAnimation=new TimelineMax( { - paused: !0 - } - ).staggerFrom([this.copy1, this.copy2], .5, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy1, this.copy2], .5, { - x: -300, ease: Power1.easeIn - } - , "+=2").staggerFrom([this.copy3, this.copy4, this.copy5], .5, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy3, this.copy4, this.copy5], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").staggerFrom([this.copy6, this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeOut - } - , .1).to([this.copy6, this.copy7, this.copy8], .5, { - x: -300, ease: Power1.easeIn - } - , "=+2").to(this.logo, .5, { - autoAlpha: 0 - } - , "swap").to(this.cta, .5, { - x: -80 - } - , "swap").from(this.badge, .5, { - autoAlpha: 0 - } - , "end").from([this.logoBig, this.tag], .5, { - autoAlpha: 0 - } - , "swap+=1").call(function() { - a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.badge, this.tag, this.cta], .5, { - autoAlpha: 0 - } - )) - } - ), - this.timeline=new TimelineMax( { - paused: !1, repeat: 1, repeatDelay: 1 - } - ).add(this.copyAnimation.play(), "frame2+=1").from([this.vig], 13, { - y: 26, easing: Linear.easeNone, rotation: .01 - } - , "frame2+=1"), - this.timeline.timeScale(1) -} + }); -, -Banner.prototype.addEventListeners=function(t) { - function e() { - t.timeLineCTA.play() - } - function a() { - t.timeLineCTA.reverse(), - t.timeLineCTA.timeScale(2) - } - console.log(t), - t.banner.addEventListener("mouseover", e), - t.banner.addEventListener("mouseout", a) -} -; \ No newline at end of file + this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1}) + .add(this.copyAnimation.play(), 'frame2+=1') + .from([this.bg, this.vig], 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2+=1'); + + + this.timeline.timeScale(1); +}; + +Banner.prototype.addEventListeners = function (_this) { + // var _this = this; + console.log(_this); + + _this.banner.addEventListener( 'mouseover', rollover ); + _this.banner.addEventListener( 'mouseout', rollout ); + + function rollover() { + _this.timeLineCTA.play(); + } + + function rollout() { + _this.timeLineCTA.reverse(); + _this.timeLineCTA.timeScale(2); + } +};