diff --git a/src/index.html b/src/index.html index 3fc14fb..fd3428a 100644 --- a/src/index.html +++ b/src/index.html @@ -9,15 +9,27 @@
diff --git a/src/sunpower-banners-durability-300x250-v2/images/bg.jpg b/src/sunpower-banners-durability-300x250-v2/images/bg.jpg new file mode 100644 index 0000000..1c2b660 Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/bg.jpg differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/bg2.png b/src/sunpower-banners-durability-300x250-v2/images/bg2.png new file mode 100644 index 0000000..7adaf67 Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/bg2.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/copy1.png b/src/sunpower-banners-durability-300x250-v2/images/copy1.png new file mode 100644 index 0000000..641a3ad Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/copy1.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/copy10.png b/src/sunpower-banners-durability-300x250-v2/images/copy10.png new file mode 100644 index 0000000..ea0a00e Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/copy10.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/copy2.png b/src/sunpower-banners-durability-300x250-v2/images/copy2.png new file mode 100644 index 0000000..86e6c58 Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/copy2.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/copy3.png b/src/sunpower-banners-durability-300x250-v2/images/copy3.png new file mode 100644 index 0000000..07b6ef3 Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/copy3.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/copy4.png b/src/sunpower-banners-durability-300x250-v2/images/copy4.png new file mode 100644 index 0000000..6ba057e Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/copy4.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/copy5.png b/src/sunpower-banners-durability-300x250-v2/images/copy5.png new file mode 100644 index 0000000..9213c3d Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/copy5.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/copy6.png b/src/sunpower-banners-durability-300x250-v2/images/copy6.png new file mode 100644 index 0000000..f251585 Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/copy6.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/copy7.png b/src/sunpower-banners-durability-300x250-v2/images/copy7.png new file mode 100644 index 0000000..e252fca Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/copy7.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/copy8.png b/src/sunpower-banners-durability-300x250-v2/images/copy8.png new file mode 100644 index 0000000..a7ff7e8 Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/copy8.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/copy9.png b/src/sunpower-banners-durability-300x250-v2/images/copy9.png new file mode 100644 index 0000000..11834e6 Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/copy9.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/cta-nrm.png b/src/sunpower-banners-durability-300x250-v2/images/cta-nrm.png new file mode 100644 index 0000000..25d1205 Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/cta-nrm.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/cta-ovr.png b/src/sunpower-banners-durability-300x250-v2/images/cta-ovr.png new file mode 100644 index 0000000..b713f66 Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/cta-ovr.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/logo.png b/src/sunpower-banners-durability-300x250-v2/images/logo.png new file mode 100644 index 0000000..32aea1d Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/logo.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/tag.png b/src/sunpower-banners-durability-300x250-v2/images/tag.png new file mode 100644 index 0000000..4d1eeb8 Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/tag.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/images/vig.png b/src/sunpower-banners-durability-300x250-v2/images/vig.png new file mode 100644 index 0000000..592b8b9 Binary files /dev/null and b/src/sunpower-banners-durability-300x250-v2/images/vig.png differ diff --git a/src/sunpower-banners-durability-300x250-v2/index.html b/src/sunpower-banners-durability-300x250-v2/index.html new file mode 100644 index 0000000..512cd6b --- /dev/null +++ b/src/sunpower-banners-durability-300x250-v2/index.html @@ -0,0 +1,23 @@ + + + + + + + sunpower-banners-durability-300x250 + + + + + + + + + + + diff --git a/src/sunpower-banners-durability-300x250-v2/js/CustomEase.min.js b/src/sunpower-banners-durability-300x250-v2/js/CustomEase.min.js new file mode 100644 index 0000000..d404e01 --- /dev/null +++ b/src/sunpower-banners-durability-300x250-v2/js/CustomEase.min.js @@ -0,0 +1,12 @@ +/*! + * VERSION: 0.2.2 + * DATE: 2017-06-19 + * UPDATES AND DOCS AT: http://greensock.com + * + * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. + * This work is subject to the terms at http://greensock.com/standard-license or for + * Club GreenSock members, the software agreement that was issued with your membership. + * + * @author: Jack Doyle, jack@greensock.com + **/ +var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.CustomEase",["easing.Ease"],function(a){var b=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,c=/[achlmqstvz]|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,d=/[\+\-]?\d*\.?\d+e[\+\-]?\d+/gi,e=/[cLlsS]/g,f="CustomEase only accepts Cubic Bezier data.",g=function(a,b,c,d,e,f,h,i,j,k,l){var m,n=(a+c)/2,o=(b+d)/2,p=(c+e)/2,q=(d+f)/2,r=(e+h)/2,s=(f+i)/2,t=(n+p)/2,u=(o+q)/2,v=(p+r)/2,w=(q+s)/2,x=(t+v)/2,y=(u+w)/2,z=h-a,A=i-b,B=Math.abs((c-h)*A-(d-i)*z),C=Math.abs((e-h)*A-(f-i)*z);return k||(k=[{x:a,y:b},{x:h,y:i}],l=1),k.splice(l||k.length-1,0,{x:x,y:y}),(B+C)*(B+C)>j*(z*z+A*A)&&(m=k.length,g(a,b,n,o,t,u,x,y,j,k,l),g(x,y,v,w,r,s,h,i,j,k,l+1+(k.length-m))),k},h=function(a){var b,e,g,h,i,j,k,l,m,n,o,p=(a+"").replace(d,function(a){var b=+a;return 1e-4>b&&b>-1e-4?0:b}).match(c)||[],q=[],r=0,s=0,t=p.length,u=2;for(b=0;t>b;b++)if(m=h,isNaN(p[b])?(h=p[b].toUpperCase(),i=h!==p[b]):b--,e=+p[b+1],g=+p[b+2],i&&(e+=r,g+=s),b||(k=e,l=g),"M"===h)j&&j.length<8&&(q.length-=1,u=0),r=k=e,s=l=g,j=[e,g],u=2,q.push(j),b+=2,h="L";else if("C"===h)j||(j=[0,0]),j[u++]=e,j[u++]=g,i||(r=s=0),j[u++]=r+1*p[b+3],j[u++]=s+1*p[b+4],j[u++]=r+=1*p[b+5],j[u++]=s+=1*p[b+6],b+=6;else if("S"===h)"C"===m||"S"===m?(n=r-j[u-4],o=s-j[u-3],j[u++]=r+n,j[u++]=s+o):(j[u++]=r,j[u++]=s),j[u++]=e,j[u++]=g,i||(r=s=0),j[u++]=r+=1*p[b+3],j[u++]=s+=1*p[b+4],b+=4;else{if("L"!==h&&"Z"!==h)throw f;"Z"===h&&(e=k,g=l,j.closed=!0),("L"===h||Math.abs(r-e)>.5||Math.abs(s-g)>.5)&&(j[u++]=r+(e-r)/3,j[u++]=s+(g-s)/3,j[u++]=r+2*(e-r)/3,j[u++]=s+2*(g-s)/3,j[u++]=e,j[u++]=g,"L"===h&&(b+=2)),r=e,s=g}return q[0]},i=function(a){var b,c=a.length,d=999999999999;for(b=1;c>b;b+=6)+a[b]d;d+=2)a[d]=(+a[d]+e)*h,a[d+1]=(+a[d+1]+f)*j},k=function(a){var b=this.lookup[a*this.l|0]||this.lookup[this.l-1];return b.nx=r,(e.test(a)||-1!==a.indexOf("M")&&-1===a.indexOf("C"))&&(s=h(a)),d=s.length,4===d)s.unshift(0,0),s.push(1,1),d=8;else if((d-2)%6)throw f;for((0!==+s[0]||1!==+s[d-2])&&j(s,c.height,c.originY),this.rawBezier=s,l=2;d>l;l+=6)i={x:+s[l-2],y:+s[l-1]},k={x:+s[l+4],y:+s[l+5]},u.push(i,k),g(i.x,i.y,+s[l],+s[l+1],+s[l+2],+s[l+3],k.x,k.y,1/(2e5*r),u,u.length-1);for(d=u.length,l=0;d>l;l++)o=u[l],p=u[l-1]||o,o.x>p.x||p.y!==o.y&&p.x===o.x||o===p?(p.cx=o.x-p.x,p.cy=o.y-p.y,p.n=o,p.nx=o.x,this.fast&&l>1&&Math.abs(p.cy/p.cx-u[l-2].cy/u[l-2].cx)>2&&(this.fast=!1),p.cxl;l++)q=l*m,o.nxl;l++)o.nxf;f+=2)d.push(((q+b.rawBezier[f]*o)*n|0)/n+","+((r+b.rawBezier[f+1]*-p)*n|0)/n);d[0]="M"+d[0],d[1]="C"+d[1]}else for(d=["M"+q+","+r],j=Math.max(5,200*(c.precision||1)),g=1/j,j+=2,k=5/j,l=((q+g*o)*n|0)/n,m=((r+b.getRatio(g)*-p)*n|0)/n,e=(m-r)/(l-q),f=2;j>f;f++)h=((q+f*g*o)*n|0)/n,i=((r+b.getRatio(f*g)*-p)*n|0)/n,(Math.abs((i-m)/(h-l)-e)>k||f===j-1)&&(d.push(l+","+m),e=(i-m)/(h-l)),l=h,m=i;return s&&("string"==typeof s?document.querySelector(s):s).setAttribute("d",d.join(" ")),d.join(" ")},l},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()(),function(a){"use strict";var b=function(){return(_gsScope.GreenSockGlobals||_gsScope)[a]};"undefined"!=typeof module&&module.exports?(require("../TweenLite.min.js"),module.exports=b()):"function"==typeof define&&define.amd&&define(["TweenLite"],b)}("CustomEase"); \ No newline at end of file diff --git a/src/sunpower-banners-durability-300x250-v2/js/banner.animation.js b/src/sunpower-banners-durability-300x250-v2/js/banner.animation.js new file mode 100644 index 0000000..6695dd5 --- /dev/null +++ b/src/sunpower-banners-durability-300x250-v2/js/banner.animation.js @@ -0,0 +1,244 @@ +'use strict'; + +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); + + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; + + // 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', + ]; + + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + _this.bindEvents(); + }); +}; + +/** + * 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.timeLineCTA = new TimelineMax({ paused: true }) + .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta'); + + 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.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.copy9, this.copy10, this.tag, this.cta], 0.5, { autoAlpha: 0 }) + .to(this.bg2, 0.5, { autoAlpha: 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') + .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') + .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-durability-300x250-v2/js/banner.js b/src/sunpower-banners-durability-300x250-v2/js/banner.js new file mode 100644 index 0000000..0c67b72 --- /dev/null +++ b/src/sunpower-banners-durability-300x250-v2/js/banner.js @@ -0,0 +1,218 @@ +'use strict'; + +var Banner = function () { + this.loader(); + this.imageCache = {}; +}; + +Banner.prototype.onInit = function () { + console.log('Banner initialised'); +}; + +Banner.prototype.onPolite = function () { + console.log('Polite loading scripts'); +}; + +/** + * Polite load scripts and trigger the + */ +Banner.prototype.onVisible = function () { + var _this = this; + + this.politeLoad([ + 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js', + ], function () { + _this.start(); + }); +}; + +/** + * Set up smart object method. + */ +Banner.prototype.smartObject = function (_settings) { + var _this = this; + + var settings = _settings || {}; + settings.type = settings.type || 'div'; + settings.position = settings.position || 'absolute'; + settings.left = settings.left || '0'; + settings.top = settings.top || '0'; + + var element = document.createElement(settings.type); + element._settings = settings.constructor(); + for (var key in settings) { + element._settings[key] = settings[key]; + } + + switch (settings.type) { + case 'canvas' : + element.width = settings.width; + element.height = settings.height; + break; + case 'video' : + if (settings.autoplay) { element.autoplay = settings.autoplay; } + if (settings.loop) { element.loop = settings.loop; } + if (settings.controls) { element.controls = settings.controls; } + if (settings.muted) { element.muted = settings.muted; } + if (settings.poster) { element.poster = settings.poster; } + if (settings.preload) { element.preload = settings.preload; } + break; + } + + if (settings.sources) { + var sources = settings.sources; + var fragment = document.createDocumentFragment(); + for (var i = 0; i < sources.length; i++) { + var sourceTag = document.createElement('source'); + sourceTag.src = sources[i].url; + sourceTag.type = sources[i].type; + fragment.appendChild(sourceTag); + } + element.appendChild(fragment); + } + + function applySettings() { + if (settings.id) { + element.id = settings.id; + } + if (settings.parent) { + settings.parent.appendChild(element); + } + if (settings.innerHTML) { + element.innerHTML = settings.innerHTML; + } + delete settings.innerHTML; + delete settings.retina; + delete settings.parent; + delete settings.id; + delete settings.type; + delete settings.autoplay; + delete settings.loop; + delete settings.controls; + delete settings.muted; + delete settings.poster; + delete settings.preload; + delete settings.sources; + TweenLite.set(element, settings); + } + + function setImage() { + var isSVG = this.src.slice(-4) === '.svg'; + if (isSVG) { + document.body.appendChild(this); + } + settings.width = Math.round(settings.width || (settings.retina ? this.width / 2 : this.width)); + settings.height = Math.round(settings.height || (settings.retina ? this.height / 2 : this.height)); + settings.backgroundImage = 'url(' + this.src + ')'; + applySettings(); + if (isSVG) { + document.body.removeChild(this); + } + } + + function loadImg(src, setImg) { + var img = _this.imageCache[src]; + if (img) { + if (setImg) { + setImage.apply(img); + } + } else { + img = document.createElement('img'); + img.src = src; + if (setImg) { + img.onload = setImage; + } + _this.imageCache[src] = img; + } + } + + if (settings.backgroundImage) { + element.style.backgroundSize = settings.backgroundSize || '100% 100%'; + element.style.backgroundPosition = settings.backgroundPosition || 'center'; + element.style.backgroundRepeat = settings.backgroundRepeat || 'no-repeat'; + + if (Object.prototype.toString.call(settings.backgroundImage) === '[object Array]') { + element.images = settings.backgroundImage; + for (var j = 0; j < element.images.length; ++j) { + loadImg(element.images[j], j === 0); + } + } else { + loadImg(settings.backgroundImage, true); + } + } else { + applySettings(); + } + + // Helper functions + element.appendChildren = function (children) { + var fragment = document.createDocumentFragment(); + for (var i = 0; i < children.length; i++) { + fragment.appendChild(children[i]); + } + this.appendChild(fragment); + }; + + element.set = function (settings) { + TweenLite.set(this, settings); + }; + + element.to = function (time, settings) { + TweenLite.to(this, time, settings); + }; + + element.from = function (time, settings) { + TweenLite.from(this, time, settings); + }; + + element.fromTo = function (time, from, to) { + TweenLite.fromTo(this, time, from, to); + }; + + element.get = function (property) { + return ((this._gsTransform && this._gsTransform[property]) || (this._gsTransform && this._gsTransform[property] === 0)) ? this._gsTransform[property] : (this.style[property].slice(-2) === 'px') ? parseFloat(this.style[property]) : this.style[property]; + }; + + element.center = function () { + TweenLite.set(this, { top: '50%', marginTop: -this.offsetHeight / 2, left: '50%', marginLeft: -this.offsetWidth / 2 }); + }; + + element.centerHorizontal = function () { + TweenLite.set(this, { left: '50%', marginLeft: -this.offsetWidth / 2 }); + }; + + element.centerVertical = function () { + TweenLite.set(this, { top: '50%', marginTop: -this.offsetHeight / 2 }); + }; + + element.getOriginal = function (property) { + return element._settings[property] || 0; + }; + + return element; +}; + +/** + * Preload images method. + */ +Banner.prototype.preloadImages = function (images, callback, scope) { + var _this = this; + var l = images.length; + var loaded = 0; + var img = null; + + for (var i = 0; i < l; ++i) { + img = document.createElement('img'); + img.src = img.microSrc = images[i]; + img.onload = function () { + _this.imageCache[this.microSrc] = this; + loaded++; + if (loaded === l) { + if (scope) { + callback.call(scope); + } else { + callback(); + } + } + }; + } +}; diff --git a/src/sunpower-banners-durability-300x250-v2/js/banner.loader.js b/src/sunpower-banners-durability-300x250-v2/js/banner.loader.js new file mode 100644 index 0000000..1704d0e --- /dev/null +++ b/src/sunpower-banners-durability-300x250-v2/js/banner.loader.js @@ -0,0 +1,89 @@ +'use strict'; + +/** + * Load events - similar to jQuery window load and dom ready. + */ +Banner.prototype.loader = function () { + var _this = this; + + function addEvent(elem, event, fn) { + if (elem.addEventListener) { + elem.addEventListener(event, fn, false); + } else { + elem.attachEvent('on' + event, function () { + return (fn.call(elem, window.event)); + }); + } + } + addEvent(document, 'DOMContentLoaded', function () { + _this.onPolite(); + }); + addEvent(window, 'load', function () { + _this.onVisible(); + + }); +}; + +/** + * Polite load scripts. + */ +Banner.prototype.politeLoad = function (urls, onComplete) { + var loaded = 0; + var checkProgress = function () { + if (++loaded === urls.length && onComplete) { + onComplete(); + } + }; + for (var i = 0; i < urls.length; i++) { + this.loadScript(urls[i], checkProgress); + } +}; + +/** + * Load script method. + */ +Banner.prototype.loadScript = function (url, callback) { + var script = document.createElement('script'); + script.type = 'text/javascript'; + if (script.readyState) { + script.onreadystatechange = function () { + if (script.readyState === 'loaded' || script.readyState === 'complete') { + script.onreadystatechange = null; + callback(); + } + }; + } else { + script.onload = function () { + callback(); + }; + } + script.src = url; + document.getElementsByTagName('head')[0].appendChild(script); +}; + +/** + * Bind iAB standard clicktag events. + */ +Banner.prototype.bindEvents = function () { + var getUriParams = (function () { + var queryString = {}; + var query = window.location.search.substring(1); + var parmsArray = query.split('&'); + if (parmsArray.length <= 0) { + return queryString; + } + for (var i = 0; i < parmsArray.length; i++) { + var pair = parmsArray[i].split('='); + var val = decodeURIComponent(pair[1]); + if (val !== '"' && pair[0] !== '"') { + queryString[pair[0]] = val; + } + } + return queryString; + })(); + var clickTag = getUriParams.clicktag; + + this.banner.addEventListener('click', function () { + window.open(clickTag); + }); +}; diff --git a/src/sunpower-banners-durability-300x250-v2/styles/base/_banner.scss b/src/sunpower-banners-durability-300x250-v2/styles/base/_banner.scss new file mode 100644 index 0000000..d0ec458 --- /dev/null +++ b/src/sunpower-banners-durability-300x250-v2/styles/base/_banner.scss @@ -0,0 +1,28 @@ +$banner-width: 300px; +$banner-height: 250px; + +.banner { + background: #fff; + cursor: pointer; + height: $banner-height; + left: 50%; + margin-left: -$banner-width / 2; + margin-top: -$banner-height / 2; + overflow: hidden; + position: relative; + position: absolute; + top: 50%; + width: $banner-width; + + .border { + border: 1px solid #ccc; + display: block; + height: $banner-height - 2; + left: 0; + pointer-events: none; + position: absolute; + top: 0; + width: $banner-width - 2; + z-index: 999; + } +} diff --git a/src/sunpower-banners-durability-300x250-v2/styles/base/_preloader.scss b/src/sunpower-banners-durability-300x250-v2/styles/base/_preloader.scss new file mode 100644 index 0000000..e6de46b --- /dev/null +++ b/src/sunpower-banners-durability-300x250-v2/styles/base/_preloader.scss @@ -0,0 +1,32 @@ +$preloader-size: 20px; +$preloader-width: 5px; + +.preloader { + background: #fff; + height: 100%; + width: 100%; + + .circle { + border: $preloader-width solid #ddd; + border-bottom-color: #333; + border-radius: 50%; + height: $preloader-size; + left: 50%; + margin-left: -($preloader-size + $preloader-width) / 2; + margin-top: -($preloader-size + $preloader-width) / 2; + position: absolute; + top: 50%; + transition: all 0.7s ease-in-out; + animation: spin 0.5s linear infinite; + width: $preloader-size; + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/sunpower-banners-durability-300x250-v2/styles/style.scss b/src/sunpower-banners-durability-300x250-v2/styles/style.scss new file mode 100755 index 0000000..3411f98 --- /dev/null +++ b/src/sunpower-banners-durability-300x250-v2/styles/style.scss @@ -0,0 +1,2 @@ +@import 'base/banner'; +@import 'base/preloader'; diff --git a/src/sunpower-banners-durability-300x250/images/copy1.png b/src/sunpower-banners-durability-300x250/images/copy1.png index 5a61638..641a3ad 100644 Binary files a/src/sunpower-banners-durability-300x250/images/copy1.png and b/src/sunpower-banners-durability-300x250/images/copy1.png differ diff --git a/src/sunpower-banners-durability-300x250/images/copy10.png b/src/sunpower-banners-durability-300x250/images/copy10.png index 3181db6..ea0a00e 100644 Binary files a/src/sunpower-banners-durability-300x250/images/copy10.png and b/src/sunpower-banners-durability-300x250/images/copy10.png differ diff --git a/src/sunpower-banners-durability-300x250/images/copy2.png b/src/sunpower-banners-durability-300x250/images/copy2.png index 80de1bd..86e6c58 100644 Binary files a/src/sunpower-banners-durability-300x250/images/copy2.png and b/src/sunpower-banners-durability-300x250/images/copy2.png differ diff --git a/src/sunpower-banners-durability-300x250/images/copy3.png b/src/sunpower-banners-durability-300x250/images/copy3.png index 38d7c04..07b6ef3 100644 Binary files a/src/sunpower-banners-durability-300x250/images/copy3.png and b/src/sunpower-banners-durability-300x250/images/copy3.png differ diff --git a/src/sunpower-banners-durability-300x250/images/copy4.png b/src/sunpower-banners-durability-300x250/images/copy4.png index 16936f2..6ba057e 100644 Binary files a/src/sunpower-banners-durability-300x250/images/copy4.png and b/src/sunpower-banners-durability-300x250/images/copy4.png differ diff --git a/src/sunpower-banners-durability-300x250/images/copy5.png b/src/sunpower-banners-durability-300x250/images/copy5.png index 1a44f73..9213c3d 100644 Binary files a/src/sunpower-banners-durability-300x250/images/copy5.png and b/src/sunpower-banners-durability-300x250/images/copy5.png differ diff --git a/src/sunpower-banners-durability-300x250/images/copy6.png b/src/sunpower-banners-durability-300x250/images/copy6.png index 6ebfa72..f251585 100644 Binary files a/src/sunpower-banners-durability-300x250/images/copy6.png and b/src/sunpower-banners-durability-300x250/images/copy6.png differ diff --git a/src/sunpower-banners-durability-300x250/images/copy7.png b/src/sunpower-banners-durability-300x250/images/copy7.png index e1d3c1e..e252fca 100644 Binary files a/src/sunpower-banners-durability-300x250/images/copy7.png and b/src/sunpower-banners-durability-300x250/images/copy7.png differ diff --git a/src/sunpower-banners-durability-300x250/images/copy8.png b/src/sunpower-banners-durability-300x250/images/copy8.png index 40a5baa..a7ff7e8 100644 Binary files a/src/sunpower-banners-durability-300x250/images/copy8.png and b/src/sunpower-banners-durability-300x250/images/copy8.png differ diff --git a/src/sunpower-banners-durability-300x250/images/copy9.png b/src/sunpower-banners-durability-300x250/images/copy9.png index 7aeb46b..11834e6 100644 Binary files a/src/sunpower-banners-durability-300x250/images/copy9.png and b/src/sunpower-banners-durability-300x250/images/copy9.png differ diff --git a/src/sunpower-banners-durability-300x250/images/cta-nrm.png b/src/sunpower-banners-durability-300x250/images/cta-nrm.png index c961f9f..25d1205 100644 Binary files a/src/sunpower-banners-durability-300x250/images/cta-nrm.png and b/src/sunpower-banners-durability-300x250/images/cta-nrm.png differ diff --git a/src/sunpower-banners-durability-300x250/images/cta-ovr.png b/src/sunpower-banners-durability-300x250/images/cta-ovr.png index 641d7b1..b713f66 100644 Binary files a/src/sunpower-banners-durability-300x250/images/cta-ovr.png and b/src/sunpower-banners-durability-300x250/images/cta-ovr.png differ diff --git a/src/sunpower-banners-durability-300x250/index.html b/src/sunpower-banners-durability-300x250/index.html index 060fdd4..512cd6b 100644 --- a/src/sunpower-banners-durability-300x250/index.html +++ b/src/sunpower-banners-durability-300x250/index.html @@ -8,6 +8,7 @@ + diff --git a/src/sunpower-banners-durability-300x250/js/banner.animation.js b/src/sunpower-banners-durability-300x250/js/banner.animation.js index e00152b..129379b 100644 --- a/src/sunpower-banners-durability-300x250/js/banner.animation.js +++ b/src/sunpower-banners-durability-300x250/js/banner.animation.js @@ -160,16 +160,16 @@ Banner.prototype.createElements = function () { * Setup initial element states. */ Banner.prototype.setup = function () { - this.copy1.set({ left: 0, top: 20 }); - this.copy2.set({ left: 0, top: 60 }); - this.copy3.set({ left: 0, top: 100 }); - this.copy4.set({ left: 0, top: 20 }); - this.copy5.set({ left: 0, top: 60 }); - this.copy6.set({ left: 0, top: 100 }); - this.copy7.set({ left: 0, top: 20 }); - this.copy8.set({ left: 0, top: 60 }); - this.copy9.set({ left: 0, top: 20 }); - this.copy10.set({ left: 0, top: 60 }); + 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 }); @@ -196,11 +196,11 @@ Banner.prototype.animate = function () { .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta'); this.copyAnimation = new TimelineMax({paused: true}) - .staggerFrom([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Back.easeOut }, 0.5) - .to([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Back.easeIn }, '=+2') - .staggerFrom([this.copy7, this.copy8], 0.5, { x: -300, ease: Back.easeOut }, 0.5, 'cta') - .from(this.cta, 1, { autoAlpha: 0 }, 'cta') - .to([this.copy7, this.copy8], 0.5, { x: -300, ease: Back.easeIn }, '=+2') + .staggerFrom([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1) + .to([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, '=+2') + .staggerFrom([this.copy7, this.copy8], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1, 'cta') + // .from(this.cta, 1, { autoAlpha: 0 }, 'cta') + .to([this.copy7, this.copy8], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, '=+2') .staggerFrom([this.copy9, this.copy10, this.tag], 0.5, { autoAlpha: 0 }, 0.5) .call(function(){ loop++ @@ -217,8 +217,8 @@ Banner.prototype.animate = function () { this.timeline = new TimelineMax({repeat: 1, repeatDelay: 2}) - .staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Back.easeOut }, 0.5, 'frame1') - .to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Back.easeIn }, 'frame1+=3') + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1, 'frame1') + .to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, 'frame1+=3') .to(this.bg2, 1, { autoAlpha: 0 }) .from(this.bg, this.copyAnimation._duration, { scale: 1 }, 'frame2-=1') .add(this.copyAnimation.play(), 'frame2'); diff --git a/src/sunpower-banners-durability-300x600-v2/images/bg.jpg b/src/sunpower-banners-durability-300x600-v2/images/bg.jpg new file mode 100644 index 0000000..8966d02 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/bg.jpg differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/bg2.png b/src/sunpower-banners-durability-300x600-v2/images/bg2.png new file mode 100644 index 0000000..9cec787 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/bg2.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/copy1.png b/src/sunpower-banners-durability-300x600-v2/images/copy1.png new file mode 100644 index 0000000..675e616 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/copy1.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/copy10.png b/src/sunpower-banners-durability-300x600-v2/images/copy10.png new file mode 100644 index 0000000..6036fe6 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/copy10.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/copy11.png b/src/sunpower-banners-durability-300x600-v2/images/copy11.png new file mode 100644 index 0000000..c4b0d02 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/copy11.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/copy2.png b/src/sunpower-banners-durability-300x600-v2/images/copy2.png new file mode 100644 index 0000000..5a30ded Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/copy2.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/copy3.png b/src/sunpower-banners-durability-300x600-v2/images/copy3.png new file mode 100644 index 0000000..54583e6 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/copy3.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/copy4.png b/src/sunpower-banners-durability-300x600-v2/images/copy4.png new file mode 100644 index 0000000..bbba8ee Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/copy4.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/copy5.png b/src/sunpower-banners-durability-300x600-v2/images/copy5.png new file mode 100644 index 0000000..65867b4 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/copy5.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/copy6.png b/src/sunpower-banners-durability-300x600-v2/images/copy6.png new file mode 100644 index 0000000..45efe65 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/copy6.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/copy7.png b/src/sunpower-banners-durability-300x600-v2/images/copy7.png new file mode 100644 index 0000000..192b7a9 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/copy7.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/copy8.png b/src/sunpower-banners-durability-300x600-v2/images/copy8.png new file mode 100644 index 0000000..d6f6596 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/copy8.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/copy9.png b/src/sunpower-banners-durability-300x600-v2/images/copy9.png new file mode 100644 index 0000000..f89ca88 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/copy9.png differ diff --git a/src/sunpower-banners-durability-300x600/images/cta.png b/src/sunpower-banners-durability-300x600-v2/images/cta-nrm.png similarity index 100% rename from src/sunpower-banners-durability-300x600/images/cta.png rename to src/sunpower-banners-durability-300x600-v2/images/cta-nrm.png diff --git a/src/sunpower-banners-durability-300x600-v2/images/cta-ovr.png b/src/sunpower-banners-durability-300x600-v2/images/cta-ovr.png new file mode 100644 index 0000000..57c43c8 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/cta-ovr.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/logo-big.png b/src/sunpower-banners-durability-300x600-v2/images/logo-big.png new file mode 100644 index 0000000..d9d9b3f Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/logo-big.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/logo.png b/src/sunpower-banners-durability-300x600-v2/images/logo.png new file mode 100644 index 0000000..c8494ca Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/logo.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/tag.png b/src/sunpower-banners-durability-300x600-v2/images/tag.png new file mode 100644 index 0000000..b1ac789 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/tag.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/images/vig.png b/src/sunpower-banners-durability-300x600-v2/images/vig.png new file mode 100644 index 0000000..f244d95 Binary files /dev/null and b/src/sunpower-banners-durability-300x600-v2/images/vig.png differ diff --git a/src/sunpower-banners-durability-300x600-v2/index.html b/src/sunpower-banners-durability-300x600-v2/index.html new file mode 100644 index 0000000..f62f58f --- /dev/null +++ b/src/sunpower-banners-durability-300x600-v2/index.html @@ -0,0 +1,23 @@ + + + + + + + sunpower-banners-durability-300x600 + + + + + + + + + + + diff --git a/src/sunpower-banners-durability-300x600-v2/js/CustomEase.min.js b/src/sunpower-banners-durability-300x600-v2/js/CustomEase.min.js new file mode 100644 index 0000000..d404e01 --- /dev/null +++ b/src/sunpower-banners-durability-300x600-v2/js/CustomEase.min.js @@ -0,0 +1,12 @@ +/*! + * VERSION: 0.2.2 + * DATE: 2017-06-19 + * UPDATES AND DOCS AT: http://greensock.com + * + * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. + * This work is subject to the terms at http://greensock.com/standard-license or for + * Club GreenSock members, the software agreement that was issued with your membership. + * + * @author: Jack Doyle, jack@greensock.com + **/ +var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.CustomEase",["easing.Ease"],function(a){var b=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,c=/[achlmqstvz]|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,d=/[\+\-]?\d*\.?\d+e[\+\-]?\d+/gi,e=/[cLlsS]/g,f="CustomEase only accepts Cubic Bezier data.",g=function(a,b,c,d,e,f,h,i,j,k,l){var m,n=(a+c)/2,o=(b+d)/2,p=(c+e)/2,q=(d+f)/2,r=(e+h)/2,s=(f+i)/2,t=(n+p)/2,u=(o+q)/2,v=(p+r)/2,w=(q+s)/2,x=(t+v)/2,y=(u+w)/2,z=h-a,A=i-b,B=Math.abs((c-h)*A-(d-i)*z),C=Math.abs((e-h)*A-(f-i)*z);return k||(k=[{x:a,y:b},{x:h,y:i}],l=1),k.splice(l||k.length-1,0,{x:x,y:y}),(B+C)*(B+C)>j*(z*z+A*A)&&(m=k.length,g(a,b,n,o,t,u,x,y,j,k,l),g(x,y,v,w,r,s,h,i,j,k,l+1+(k.length-m))),k},h=function(a){var b,e,g,h,i,j,k,l,m,n,o,p=(a+"").replace(d,function(a){var b=+a;return 1e-4>b&&b>-1e-4?0:b}).match(c)||[],q=[],r=0,s=0,t=p.length,u=2;for(b=0;t>b;b++)if(m=h,isNaN(p[b])?(h=p[b].toUpperCase(),i=h!==p[b]):b--,e=+p[b+1],g=+p[b+2],i&&(e+=r,g+=s),b||(k=e,l=g),"M"===h)j&&j.length<8&&(q.length-=1,u=0),r=k=e,s=l=g,j=[e,g],u=2,q.push(j),b+=2,h="L";else if("C"===h)j||(j=[0,0]),j[u++]=e,j[u++]=g,i||(r=s=0),j[u++]=r+1*p[b+3],j[u++]=s+1*p[b+4],j[u++]=r+=1*p[b+5],j[u++]=s+=1*p[b+6],b+=6;else if("S"===h)"C"===m||"S"===m?(n=r-j[u-4],o=s-j[u-3],j[u++]=r+n,j[u++]=s+o):(j[u++]=r,j[u++]=s),j[u++]=e,j[u++]=g,i||(r=s=0),j[u++]=r+=1*p[b+3],j[u++]=s+=1*p[b+4],b+=4;else{if("L"!==h&&"Z"!==h)throw f;"Z"===h&&(e=k,g=l,j.closed=!0),("L"===h||Math.abs(r-e)>.5||Math.abs(s-g)>.5)&&(j[u++]=r+(e-r)/3,j[u++]=s+(g-s)/3,j[u++]=r+2*(e-r)/3,j[u++]=s+2*(g-s)/3,j[u++]=e,j[u++]=g,"L"===h&&(b+=2)),r=e,s=g}return q[0]},i=function(a){var b,c=a.length,d=999999999999;for(b=1;c>b;b+=6)+a[b]d;d+=2)a[d]=(+a[d]+e)*h,a[d+1]=(+a[d+1]+f)*j},k=function(a){var b=this.lookup[a*this.l|0]||this.lookup[this.l-1];return b.nx=r,(e.test(a)||-1!==a.indexOf("M")&&-1===a.indexOf("C"))&&(s=h(a)),d=s.length,4===d)s.unshift(0,0),s.push(1,1),d=8;else if((d-2)%6)throw f;for((0!==+s[0]||1!==+s[d-2])&&j(s,c.height,c.originY),this.rawBezier=s,l=2;d>l;l+=6)i={x:+s[l-2],y:+s[l-1]},k={x:+s[l+4],y:+s[l+5]},u.push(i,k),g(i.x,i.y,+s[l],+s[l+1],+s[l+2],+s[l+3],k.x,k.y,1/(2e5*r),u,u.length-1);for(d=u.length,l=0;d>l;l++)o=u[l],p=u[l-1]||o,o.x>p.x||p.y!==o.y&&p.x===o.x||o===p?(p.cx=o.x-p.x,p.cy=o.y-p.y,p.n=o,p.nx=o.x,this.fast&&l>1&&Math.abs(p.cy/p.cx-u[l-2].cy/u[l-2].cx)>2&&(this.fast=!1),p.cxl;l++)q=l*m,o.nxl;l++)o.nxf;f+=2)d.push(((q+b.rawBezier[f]*o)*n|0)/n+","+((r+b.rawBezier[f+1]*-p)*n|0)/n);d[0]="M"+d[0],d[1]="C"+d[1]}else for(d=["M"+q+","+r],j=Math.max(5,200*(c.precision||1)),g=1/j,j+=2,k=5/j,l=((q+g*o)*n|0)/n,m=((r+b.getRatio(g)*-p)*n|0)/n,e=(m-r)/(l-q),f=2;j>f;f++)h=((q+f*g*o)*n|0)/n,i=((r+b.getRatio(f*g)*-p)*n|0)/n,(Math.abs((i-m)/(h-l)-e)>k||f===j-1)&&(d.push(l+","+m),e=(i-m)/(h-l)),l=h,m=i;return s&&("string"==typeof s?document.querySelector(s):s).setAttribute("d",d.join(" ")),d.join(" ")},l},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()(),function(a){"use strict";var b=function(){return(_gsScope.GreenSockGlobals||_gsScope)[a]};"undefined"!=typeof module&&module.exports?(require("../TweenLite.min.js"),module.exports=b()):"function"==typeof define&&define.amd&&define(["TweenLite"],b)}("CustomEase"); \ No newline at end of file diff --git a/src/sunpower-banners-durability-300x600-v2/js/banner.animation.js b/src/sunpower-banners-durability-300x600-v2/js/banner.animation.js new file mode 100644 index 0000000..a049a05 --- /dev/null +++ b/src/sunpower-banners-durability-300x600-v2/js/banner.animation.js @@ -0,0 +1,270 @@ +'use strict'; + +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); + + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; + + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/logo-big.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 _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + _this.bindEvents(); + }); +}; + +/** + * 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', + // 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.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.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.ctaOvr.set({ autoAlpha: 0 }); + this.cta2.set({ left: 14, top: 153 }); + 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.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') + .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 }) + .to(this.bg2, 0.5, { autoAlpha: 1 }); + } + }); + + + this.timeline = new TimelineMax({repeat: 1, repeatDelay: 1}) + .add(this.copyAnimation.play(), 'frame2') + // .to(this.bg2, 1, { autoAlpha: 0 }) + .from(this.bg, this.copyAnimation._duration, { x: 30 }, '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-durability-300x600-v2/js/banner.js b/src/sunpower-banners-durability-300x600-v2/js/banner.js new file mode 100644 index 0000000..0c67b72 --- /dev/null +++ b/src/sunpower-banners-durability-300x600-v2/js/banner.js @@ -0,0 +1,218 @@ +'use strict'; + +var Banner = function () { + this.loader(); + this.imageCache = {}; +}; + +Banner.prototype.onInit = function () { + console.log('Banner initialised'); +}; + +Banner.prototype.onPolite = function () { + console.log('Polite loading scripts'); +}; + +/** + * Polite load scripts and trigger the + */ +Banner.prototype.onVisible = function () { + var _this = this; + + this.politeLoad([ + 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js', + ], function () { + _this.start(); + }); +}; + +/** + * Set up smart object method. + */ +Banner.prototype.smartObject = function (_settings) { + var _this = this; + + var settings = _settings || {}; + settings.type = settings.type || 'div'; + settings.position = settings.position || 'absolute'; + settings.left = settings.left || '0'; + settings.top = settings.top || '0'; + + var element = document.createElement(settings.type); + element._settings = settings.constructor(); + for (var key in settings) { + element._settings[key] = settings[key]; + } + + switch (settings.type) { + case 'canvas' : + element.width = settings.width; + element.height = settings.height; + break; + case 'video' : + if (settings.autoplay) { element.autoplay = settings.autoplay; } + if (settings.loop) { element.loop = settings.loop; } + if (settings.controls) { element.controls = settings.controls; } + if (settings.muted) { element.muted = settings.muted; } + if (settings.poster) { element.poster = settings.poster; } + if (settings.preload) { element.preload = settings.preload; } + break; + } + + if (settings.sources) { + var sources = settings.sources; + var fragment = document.createDocumentFragment(); + for (var i = 0; i < sources.length; i++) { + var sourceTag = document.createElement('source'); + sourceTag.src = sources[i].url; + sourceTag.type = sources[i].type; + fragment.appendChild(sourceTag); + } + element.appendChild(fragment); + } + + function applySettings() { + if (settings.id) { + element.id = settings.id; + } + if (settings.parent) { + settings.parent.appendChild(element); + } + if (settings.innerHTML) { + element.innerHTML = settings.innerHTML; + } + delete settings.innerHTML; + delete settings.retina; + delete settings.parent; + delete settings.id; + delete settings.type; + delete settings.autoplay; + delete settings.loop; + delete settings.controls; + delete settings.muted; + delete settings.poster; + delete settings.preload; + delete settings.sources; + TweenLite.set(element, settings); + } + + function setImage() { + var isSVG = this.src.slice(-4) === '.svg'; + if (isSVG) { + document.body.appendChild(this); + } + settings.width = Math.round(settings.width || (settings.retina ? this.width / 2 : this.width)); + settings.height = Math.round(settings.height || (settings.retina ? this.height / 2 : this.height)); + settings.backgroundImage = 'url(' + this.src + ')'; + applySettings(); + if (isSVG) { + document.body.removeChild(this); + } + } + + function loadImg(src, setImg) { + var img = _this.imageCache[src]; + if (img) { + if (setImg) { + setImage.apply(img); + } + } else { + img = document.createElement('img'); + img.src = src; + if (setImg) { + img.onload = setImage; + } + _this.imageCache[src] = img; + } + } + + if (settings.backgroundImage) { + element.style.backgroundSize = settings.backgroundSize || '100% 100%'; + element.style.backgroundPosition = settings.backgroundPosition || 'center'; + element.style.backgroundRepeat = settings.backgroundRepeat || 'no-repeat'; + + if (Object.prototype.toString.call(settings.backgroundImage) === '[object Array]') { + element.images = settings.backgroundImage; + for (var j = 0; j < element.images.length; ++j) { + loadImg(element.images[j], j === 0); + } + } else { + loadImg(settings.backgroundImage, true); + } + } else { + applySettings(); + } + + // Helper functions + element.appendChildren = function (children) { + var fragment = document.createDocumentFragment(); + for (var i = 0; i < children.length; i++) { + fragment.appendChild(children[i]); + } + this.appendChild(fragment); + }; + + element.set = function (settings) { + TweenLite.set(this, settings); + }; + + element.to = function (time, settings) { + TweenLite.to(this, time, settings); + }; + + element.from = function (time, settings) { + TweenLite.from(this, time, settings); + }; + + element.fromTo = function (time, from, to) { + TweenLite.fromTo(this, time, from, to); + }; + + element.get = function (property) { + return ((this._gsTransform && this._gsTransform[property]) || (this._gsTransform && this._gsTransform[property] === 0)) ? this._gsTransform[property] : (this.style[property].slice(-2) === 'px') ? parseFloat(this.style[property]) : this.style[property]; + }; + + element.center = function () { + TweenLite.set(this, { top: '50%', marginTop: -this.offsetHeight / 2, left: '50%', marginLeft: -this.offsetWidth / 2 }); + }; + + element.centerHorizontal = function () { + TweenLite.set(this, { left: '50%', marginLeft: -this.offsetWidth / 2 }); + }; + + element.centerVertical = function () { + TweenLite.set(this, { top: '50%', marginTop: -this.offsetHeight / 2 }); + }; + + element.getOriginal = function (property) { + return element._settings[property] || 0; + }; + + return element; +}; + +/** + * Preload images method. + */ +Banner.prototype.preloadImages = function (images, callback, scope) { + var _this = this; + var l = images.length; + var loaded = 0; + var img = null; + + for (var i = 0; i < l; ++i) { + img = document.createElement('img'); + img.src = img.microSrc = images[i]; + img.onload = function () { + _this.imageCache[this.microSrc] = this; + loaded++; + if (loaded === l) { + if (scope) { + callback.call(scope); + } else { + callback(); + } + } + }; + } +}; diff --git a/src/sunpower-banners-durability-300x600-v2/js/banner.loader.js b/src/sunpower-banners-durability-300x600-v2/js/banner.loader.js new file mode 100644 index 0000000..1704d0e --- /dev/null +++ b/src/sunpower-banners-durability-300x600-v2/js/banner.loader.js @@ -0,0 +1,89 @@ +'use strict'; + +/** + * Load events - similar to jQuery window load and dom ready. + */ +Banner.prototype.loader = function () { + var _this = this; + + function addEvent(elem, event, fn) { + if (elem.addEventListener) { + elem.addEventListener(event, fn, false); + } else { + elem.attachEvent('on' + event, function () { + return (fn.call(elem, window.event)); + }); + } + } + addEvent(document, 'DOMContentLoaded', function () { + _this.onPolite(); + }); + addEvent(window, 'load', function () { + _this.onVisible(); + + }); +}; + +/** + * Polite load scripts. + */ +Banner.prototype.politeLoad = function (urls, onComplete) { + var loaded = 0; + var checkProgress = function () { + if (++loaded === urls.length && onComplete) { + onComplete(); + } + }; + for (var i = 0; i < urls.length; i++) { + this.loadScript(urls[i], checkProgress); + } +}; + +/** + * Load script method. + */ +Banner.prototype.loadScript = function (url, callback) { + var script = document.createElement('script'); + script.type = 'text/javascript'; + if (script.readyState) { + script.onreadystatechange = function () { + if (script.readyState === 'loaded' || script.readyState === 'complete') { + script.onreadystatechange = null; + callback(); + } + }; + } else { + script.onload = function () { + callback(); + }; + } + script.src = url; + document.getElementsByTagName('head')[0].appendChild(script); +}; + +/** + * Bind iAB standard clicktag events. + */ +Banner.prototype.bindEvents = function () { + var getUriParams = (function () { + var queryString = {}; + var query = window.location.search.substring(1); + var parmsArray = query.split('&'); + if (parmsArray.length <= 0) { + return queryString; + } + for (var i = 0; i < parmsArray.length; i++) { + var pair = parmsArray[i].split('='); + var val = decodeURIComponent(pair[1]); + if (val !== '"' && pair[0] !== '"') { + queryString[pair[0]] = val; + } + } + return queryString; + })(); + var clickTag = getUriParams.clicktag; + + this.banner.addEventListener('click', function () { + window.open(clickTag); + }); +}; diff --git a/src/sunpower-banners-durability-300x600-v2/styles/base/_banner.scss b/src/sunpower-banners-durability-300x600-v2/styles/base/_banner.scss new file mode 100644 index 0000000..9cb1a11 --- /dev/null +++ b/src/sunpower-banners-durability-300x600-v2/styles/base/_banner.scss @@ -0,0 +1,28 @@ +$banner-width: 300px; +$banner-height: 600px; + +.banner { + background: #fff; + cursor: pointer; + height: $banner-height; + left: 50%; + margin-left: -$banner-width / 2; + margin-top: -$banner-height / 2; + overflow: hidden; + position: relative; + position: absolute; + top: 50%; + width: $banner-width; + + .border { + border: 1px solid #ccc; + display: block; + height: $banner-height - 2; + left: 0; + pointer-events: none; + position: absolute; + top: 0; + width: $banner-width - 2; + z-index: 999; + } +} diff --git a/src/sunpower-banners-durability-300x600-v2/styles/base/_preloader.scss b/src/sunpower-banners-durability-300x600-v2/styles/base/_preloader.scss new file mode 100644 index 0000000..e6de46b --- /dev/null +++ b/src/sunpower-banners-durability-300x600-v2/styles/base/_preloader.scss @@ -0,0 +1,32 @@ +$preloader-size: 20px; +$preloader-width: 5px; + +.preloader { + background: #fff; + height: 100%; + width: 100%; + + .circle { + border: $preloader-width solid #ddd; + border-bottom-color: #333; + border-radius: 50%; + height: $preloader-size; + left: 50%; + margin-left: -($preloader-size + $preloader-width) / 2; + margin-top: -($preloader-size + $preloader-width) / 2; + position: absolute; + top: 50%; + transition: all 0.7s ease-in-out; + animation: spin 0.5s linear infinite; + width: $preloader-size; + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/sunpower-banners-durability-300x600-v2/styles/style.scss b/src/sunpower-banners-durability-300x600-v2/styles/style.scss new file mode 100755 index 0000000..3411f98 --- /dev/null +++ b/src/sunpower-banners-durability-300x600-v2/styles/style.scss @@ -0,0 +1,2 @@ +@import 'base/banner'; +@import 'base/preloader'; diff --git a/src/sunpower-banners-durability-300x600/images/bg.jpg b/src/sunpower-banners-durability-300x600/images/bg.jpg index 95b8dc5..8966d02 100644 Binary files a/src/sunpower-banners-durability-300x600/images/bg.jpg and b/src/sunpower-banners-durability-300x600/images/bg.jpg differ diff --git a/src/sunpower-banners-durability-300x600/images/copy1.png b/src/sunpower-banners-durability-300x600/images/copy1.png index b8f35f6..675e616 100644 Binary files a/src/sunpower-banners-durability-300x600/images/copy1.png and b/src/sunpower-banners-durability-300x600/images/copy1.png differ diff --git a/src/sunpower-banners-durability-300x600/images/copy10.png b/src/sunpower-banners-durability-300x600/images/copy10.png index 4118556..6036fe6 100644 Binary files a/src/sunpower-banners-durability-300x600/images/copy10.png and b/src/sunpower-banners-durability-300x600/images/copy10.png differ diff --git a/src/sunpower-banners-durability-300x600/images/copy11.png b/src/sunpower-banners-durability-300x600/images/copy11.png index 3c17e10..c4b0d02 100644 Binary files a/src/sunpower-banners-durability-300x600/images/copy11.png and b/src/sunpower-banners-durability-300x600/images/copy11.png differ diff --git a/src/sunpower-banners-durability-300x600/images/copy2.png b/src/sunpower-banners-durability-300x600/images/copy2.png index 8ca1318..5a30ded 100644 Binary files a/src/sunpower-banners-durability-300x600/images/copy2.png and b/src/sunpower-banners-durability-300x600/images/copy2.png differ diff --git a/src/sunpower-banners-durability-300x600/images/copy3.png b/src/sunpower-banners-durability-300x600/images/copy3.png index 747b7cc..54583e6 100644 Binary files a/src/sunpower-banners-durability-300x600/images/copy3.png and b/src/sunpower-banners-durability-300x600/images/copy3.png differ diff --git a/src/sunpower-banners-durability-300x600/images/copy4.png b/src/sunpower-banners-durability-300x600/images/copy4.png index 48aad45..bbba8ee 100644 Binary files a/src/sunpower-banners-durability-300x600/images/copy4.png and b/src/sunpower-banners-durability-300x600/images/copy4.png differ diff --git a/src/sunpower-banners-durability-300x600/images/copy5.png b/src/sunpower-banners-durability-300x600/images/copy5.png index d7ac5e5..65867b4 100644 Binary files a/src/sunpower-banners-durability-300x600/images/copy5.png and b/src/sunpower-banners-durability-300x600/images/copy5.png differ diff --git a/src/sunpower-banners-durability-300x600/images/copy6.png b/src/sunpower-banners-durability-300x600/images/copy6.png index 952abc1..45efe65 100644 Binary files a/src/sunpower-banners-durability-300x600/images/copy6.png and b/src/sunpower-banners-durability-300x600/images/copy6.png differ diff --git a/src/sunpower-banners-durability-300x600/images/copy7.png b/src/sunpower-banners-durability-300x600/images/copy7.png index f1722d2..192b7a9 100644 Binary files a/src/sunpower-banners-durability-300x600/images/copy7.png and b/src/sunpower-banners-durability-300x600/images/copy7.png differ diff --git a/src/sunpower-banners-durability-300x600/images/copy8.png b/src/sunpower-banners-durability-300x600/images/copy8.png index 380eaff..d6f6596 100644 Binary files a/src/sunpower-banners-durability-300x600/images/copy8.png and b/src/sunpower-banners-durability-300x600/images/copy8.png differ diff --git a/src/sunpower-banners-durability-300x600/images/copy9.png b/src/sunpower-banners-durability-300x600/images/copy9.png index 4a2ac21..f89ca88 100644 Binary files a/src/sunpower-banners-durability-300x600/images/copy9.png and b/src/sunpower-banners-durability-300x600/images/copy9.png differ diff --git a/src/sunpower-banners-durability-300x600/images/cta-nrm.png b/src/sunpower-banners-durability-300x600/images/cta-nrm.png index c961f9f..6d19d86 100644 Binary files a/src/sunpower-banners-durability-300x600/images/cta-nrm.png and b/src/sunpower-banners-durability-300x600/images/cta-nrm.png differ diff --git a/src/sunpower-banners-durability-300x600/images/cta-ovr.png b/src/sunpower-banners-durability-300x600/images/cta-ovr.png index 641d7b1..57c43c8 100644 Binary files a/src/sunpower-banners-durability-300x600/images/cta-ovr.png and b/src/sunpower-banners-durability-300x600/images/cta-ovr.png differ diff --git a/src/sunpower-banners-durability-300x600/images/vig.png b/src/sunpower-banners-durability-300x600/images/vig.png index 592b8b9..f244d95 100644 Binary files a/src/sunpower-banners-durability-300x600/images/vig.png and b/src/sunpower-banners-durability-300x600/images/vig.png differ diff --git a/src/sunpower-banners-durability-300x600/index.html b/src/sunpower-banners-durability-300x600/index.html index 9a285c1..f62f58f 100644 --- a/src/sunpower-banners-durability-300x600/index.html +++ b/src/sunpower-banners-durability-300x600/index.html @@ -8,6 +8,7 @@ + diff --git a/src/sunpower-banners-durability-300x600/js/banner.animation.js b/src/sunpower-banners-durability-300x600/js/banner.animation.js index 36e1534..d35eedf 100644 --- a/src/sunpower-banners-durability-300x600/js/banner.animation.js +++ b/src/sunpower-banners-durability-300x600/js/banner.animation.js @@ -26,8 +26,10 @@ Banner.prototype.start = function () { 'images/copy9.png', 'images/copy10.png', 'images/copy11.png', - 'images/cta.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', 'images/tag.png', + // 'images/vig.png', ]; var _this = this; @@ -52,11 +54,17 @@ Banner.prototype.createElements = function () { parent: this.banner }); - this.bg2 = this.smartObject({ - id: 'bg2', - backgroundImage: 'images/bg2.png', - parent: this.banner - }); + // this.vig = this.smartObject({ + // id: 'vig', + // backgroundImage: 'images/vig.png', + // parent: this.banner + // }); + + // this.bg2 = this.smartObject({ + // id: 'bg2', + // backgroundImage: 'images/bg2.png', + // parent: this.banner + // }); this.logo = this.smartObject({ id: 'LOGO', @@ -144,38 +152,52 @@ Banner.prototype.createElements = function () { this.cta = this.smartObject({ id: 'cta', - backgroundImage: 'images/cta.png', + backgroundImage: 'images/cta-nrm.png', parent: this.banner - }); + }); this.cta2 = this.smartObject({ - id: 'cta2', - backgroundImage: 'images/cta.png', + 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: 0, top: 65 }); - this.copy2.set({ left: 0, top: 105 }); - this.copy3.set({ left: 0, top: 145 }); - this.copy4.set({ left: 0, top: 65 }); - this.copy5.set({ left: 0, top: 105 }); - this.copy6.set({ left: 0, top: 145 }); - this.copy7.set({ left: 0, top: 65 }); - this.copy8.set({ left: 0, top: 105 }); - this.copy9.set({ left: 0, top: 145 }); - this.copy10.set({ left: 0, top: 65 }); - this.copy11.set({ left: 0, top: 105 }); + 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.ctaOvr.set({ autoAlpha: 0 }); this.cta2.set({ left: 14, top: 153 }); this.bg.set({ right: 0, bottom: 0 }); }; @@ -195,14 +217,16 @@ Banner.prototype.animate = function () { var loop = 0; this.timeLineCTA = new TimelineMax({ paused: true }) - .to(this.cta2, 1, { autoAlpha: 0.7 }, 'cta'); + .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta'); this.copyAnimation = new TimelineMax({paused: true}) - .staggerFrom([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Back.easeOut }, 0.4) - .to([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Back.easeIn }, '=+2') - .staggerFrom([this.copy7, this.copy8, this.copy9], 0.4, { x: -300, ease: Back.easeOut }, 0.4, 'cta') - .from(this.cta, 1, { autoAlpha: 0 }, 'cta') - .to([this.copy7, this.copy8, this.copy9], 0.4, { x: -300, ease: Back.easeIn }, '=+2') + .staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1) + .to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, '+=3') + .staggerFrom([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1) + .to([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, '=+3') + .staggerFrom([this.copy7, this.copy8, this.copy9], 0.4, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1, 'cta') + // .from(this.cta, 1, { autoAlpha: 0 }, 'cta') + .to([this.copy7, this.copy8, this.copy9], 0.4, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, '=+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') @@ -221,11 +245,9 @@ Banner.prototype.animate = function () { this.timeline = new TimelineMax({repeat: 1, repeatDelay: 1}) - .staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Back.easeOut }, 0.4, 'frame1') - .to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Back.easeIn }, 'frame1+=3') - .to(this.bg2, 1, { autoAlpha: 0 }) - .from(this.bg, this.copyAnimation._duration, { x: 30 }, 'frame2-=1') - .add(this.copyAnimation.play(), 'frame2'); + .add(this.copyAnimation.play(), 'frame2') + // .to(this.bg2, 1, { autoAlpha: 0 }) + .from(this.bg, this.copyAnimation._duration, { x: 30 }, 'frame2-=1'); this.timeline.timeScale(1); }; diff --git a/src/sunpower-banners-warranty-300x250-v2/images/badge.png b/src/sunpower-banners-warranty-300x250-v2/images/badge.png new file mode 100644 index 0000000..2b2ab0b Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/badge.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/bg.jpg b/src/sunpower-banners-warranty-300x250-v2/images/bg.jpg new file mode 100644 index 0000000..949f166 Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/bg.jpg differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/bg2.png b/src/sunpower-banners-warranty-300x250-v2/images/bg2.png new file mode 100644 index 0000000..7adaf67 Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/bg2.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/copy1.png b/src/sunpower-banners-warranty-300x250-v2/images/copy1.png new file mode 100644 index 0000000..bdae5c4 Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/copy1.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/copy2.png b/src/sunpower-banners-warranty-300x250-v2/images/copy2.png new file mode 100644 index 0000000..1035eb8 Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/copy2.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/copy3.png b/src/sunpower-banners-warranty-300x250-v2/images/copy3.png new file mode 100644 index 0000000..501df6c Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/copy3.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/copy4.png b/src/sunpower-banners-warranty-300x250-v2/images/copy4.png new file mode 100644 index 0000000..6d320ed Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/copy4.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/copy5.png b/src/sunpower-banners-warranty-300x250-v2/images/copy5.png new file mode 100644 index 0000000..60329ca Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/copy5.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/copy6.png b/src/sunpower-banners-warranty-300x250-v2/images/copy6.png new file mode 100644 index 0000000..9222516 Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/copy6.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/copy7.png b/src/sunpower-banners-warranty-300x250-v2/images/copy7.png new file mode 100644 index 0000000..0be4411 Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/copy7.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/copy8.png b/src/sunpower-banners-warranty-300x250-v2/images/copy8.png new file mode 100644 index 0000000..5f6e800 Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/copy8.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/cta-nrm.png b/src/sunpower-banners-warranty-300x250-v2/images/cta-nrm.png new file mode 100644 index 0000000..25d1205 Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/cta-nrm.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/cta-ovr.png b/src/sunpower-banners-warranty-300x250-v2/images/cta-ovr.png new file mode 100644 index 0000000..b713f66 Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/cta-ovr.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/logo.png b/src/sunpower-banners-warranty-300x250-v2/images/logo.png new file mode 100644 index 0000000..32aea1d Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/logo.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/tag.png b/src/sunpower-banners-warranty-300x250-v2/images/tag.png new file mode 100644 index 0000000..4d1eeb8 Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/tag.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/images/vig.png b/src/sunpower-banners-warranty-300x250-v2/images/vig.png new file mode 100644 index 0000000..592b8b9 Binary files /dev/null and b/src/sunpower-banners-warranty-300x250-v2/images/vig.png differ diff --git a/src/sunpower-banners-warranty-300x250-v2/index.html b/src/sunpower-banners-warranty-300x250-v2/index.html new file mode 100644 index 0000000..8c2585c --- /dev/null +++ b/src/sunpower-banners-warranty-300x250-v2/index.html @@ -0,0 +1,23 @@ + + + + + + + sunpower-banners-warranty-300x250 + + + + + + + + + + + diff --git a/src/sunpower-banners-warranty-300x250-v2/js/CustomEase.min.js b/src/sunpower-banners-warranty-300x250-v2/js/CustomEase.min.js new file mode 100644 index 0000000..d404e01 --- /dev/null +++ b/src/sunpower-banners-warranty-300x250-v2/js/CustomEase.min.js @@ -0,0 +1,12 @@ +/*! + * VERSION: 0.2.2 + * DATE: 2017-06-19 + * UPDATES AND DOCS AT: http://greensock.com + * + * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. + * This work is subject to the terms at http://greensock.com/standard-license or for + * Club GreenSock members, the software agreement that was issued with your membership. + * + * @author: Jack Doyle, jack@greensock.com + **/ +var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.CustomEase",["easing.Ease"],function(a){var b=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,c=/[achlmqstvz]|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,d=/[\+\-]?\d*\.?\d+e[\+\-]?\d+/gi,e=/[cLlsS]/g,f="CustomEase only accepts Cubic Bezier data.",g=function(a,b,c,d,e,f,h,i,j,k,l){var m,n=(a+c)/2,o=(b+d)/2,p=(c+e)/2,q=(d+f)/2,r=(e+h)/2,s=(f+i)/2,t=(n+p)/2,u=(o+q)/2,v=(p+r)/2,w=(q+s)/2,x=(t+v)/2,y=(u+w)/2,z=h-a,A=i-b,B=Math.abs((c-h)*A-(d-i)*z),C=Math.abs((e-h)*A-(f-i)*z);return k||(k=[{x:a,y:b},{x:h,y:i}],l=1),k.splice(l||k.length-1,0,{x:x,y:y}),(B+C)*(B+C)>j*(z*z+A*A)&&(m=k.length,g(a,b,n,o,t,u,x,y,j,k,l),g(x,y,v,w,r,s,h,i,j,k,l+1+(k.length-m))),k},h=function(a){var b,e,g,h,i,j,k,l,m,n,o,p=(a+"").replace(d,function(a){var b=+a;return 1e-4>b&&b>-1e-4?0:b}).match(c)||[],q=[],r=0,s=0,t=p.length,u=2;for(b=0;t>b;b++)if(m=h,isNaN(p[b])?(h=p[b].toUpperCase(),i=h!==p[b]):b--,e=+p[b+1],g=+p[b+2],i&&(e+=r,g+=s),b||(k=e,l=g),"M"===h)j&&j.length<8&&(q.length-=1,u=0),r=k=e,s=l=g,j=[e,g],u=2,q.push(j),b+=2,h="L";else if("C"===h)j||(j=[0,0]),j[u++]=e,j[u++]=g,i||(r=s=0),j[u++]=r+1*p[b+3],j[u++]=s+1*p[b+4],j[u++]=r+=1*p[b+5],j[u++]=s+=1*p[b+6],b+=6;else if("S"===h)"C"===m||"S"===m?(n=r-j[u-4],o=s-j[u-3],j[u++]=r+n,j[u++]=s+o):(j[u++]=r,j[u++]=s),j[u++]=e,j[u++]=g,i||(r=s=0),j[u++]=r+=1*p[b+3],j[u++]=s+=1*p[b+4],b+=4;else{if("L"!==h&&"Z"!==h)throw f;"Z"===h&&(e=k,g=l,j.closed=!0),("L"===h||Math.abs(r-e)>.5||Math.abs(s-g)>.5)&&(j[u++]=r+(e-r)/3,j[u++]=s+(g-s)/3,j[u++]=r+2*(e-r)/3,j[u++]=s+2*(g-s)/3,j[u++]=e,j[u++]=g,"L"===h&&(b+=2)),r=e,s=g}return q[0]},i=function(a){var b,c=a.length,d=999999999999;for(b=1;c>b;b+=6)+a[b]d;d+=2)a[d]=(+a[d]+e)*h,a[d+1]=(+a[d+1]+f)*j},k=function(a){var b=this.lookup[a*this.l|0]||this.lookup[this.l-1];return b.nx=r,(e.test(a)||-1!==a.indexOf("M")&&-1===a.indexOf("C"))&&(s=h(a)),d=s.length,4===d)s.unshift(0,0),s.push(1,1),d=8;else if((d-2)%6)throw f;for((0!==+s[0]||1!==+s[d-2])&&j(s,c.height,c.originY),this.rawBezier=s,l=2;d>l;l+=6)i={x:+s[l-2],y:+s[l-1]},k={x:+s[l+4],y:+s[l+5]},u.push(i,k),g(i.x,i.y,+s[l],+s[l+1],+s[l+2],+s[l+3],k.x,k.y,1/(2e5*r),u,u.length-1);for(d=u.length,l=0;d>l;l++)o=u[l],p=u[l-1]||o,o.x>p.x||p.y!==o.y&&p.x===o.x||o===p?(p.cx=o.x-p.x,p.cy=o.y-p.y,p.n=o,p.nx=o.x,this.fast&&l>1&&Math.abs(p.cy/p.cx-u[l-2].cy/u[l-2].cx)>2&&(this.fast=!1),p.cxl;l++)q=l*m,o.nxl;l++)o.nxf;f+=2)d.push(((q+b.rawBezier[f]*o)*n|0)/n+","+((r+b.rawBezier[f+1]*-p)*n|0)/n);d[0]="M"+d[0],d[1]="C"+d[1]}else for(d=["M"+q+","+r],j=Math.max(5,200*(c.precision||1)),g=1/j,j+=2,k=5/j,l=((q+g*o)*n|0)/n,m=((r+b.getRatio(g)*-p)*n|0)/n,e=(m-r)/(l-q),f=2;j>f;f++)h=((q+f*g*o)*n|0)/n,i=((r+b.getRatio(f*g)*-p)*n|0)/n,(Math.abs((i-m)/(h-l)-e)>k||f===j-1)&&(d.push(l+","+m),e=(i-m)/(h-l)),l=h,m=i;return s&&("string"==typeof s?document.querySelector(s):s).setAttribute("d",d.join(" ")),d.join(" ")},l},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()(),function(a){"use strict";var b=function(){return(_gsScope.GreenSockGlobals||_gsScope)[a]};"undefined"!=typeof module&&module.exports?(require("../TweenLite.min.js"),module.exports=b()):"function"==typeof define&&define.amd&&define(["TweenLite"],b)}("CustomEase"); \ No newline at end of file diff --git a/src/sunpower-banners-warranty-300x250-v2/js/banner.animation.js b/src/sunpower-banners-warranty-300x250-v2/js/banner.animation.js new file mode 100644 index 0000000..dd05241 --- /dev/null +++ b/src/sunpower-banners-warranty-300x250-v2/js/banner.animation.js @@ -0,0 +1,236 @@ +'use strict'; + +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); + + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; + + // 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', + ]; + + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + _this.bindEvents(); + }); +}; + +/** + * 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.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.timeline = new TimelineMax({repeat: 1, repeatDelay: 1}) + .staggerFrom([this.copy1, this.copy2], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1') + .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') + .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-300x250-v2/js/banner.js b/src/sunpower-banners-warranty-300x250-v2/js/banner.js new file mode 100644 index 0000000..0c67b72 --- /dev/null +++ b/src/sunpower-banners-warranty-300x250-v2/js/banner.js @@ -0,0 +1,218 @@ +'use strict'; + +var Banner = function () { + this.loader(); + this.imageCache = {}; +}; + +Banner.prototype.onInit = function () { + console.log('Banner initialised'); +}; + +Banner.prototype.onPolite = function () { + console.log('Polite loading scripts'); +}; + +/** + * Polite load scripts and trigger the + */ +Banner.prototype.onVisible = function () { + var _this = this; + + this.politeLoad([ + 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js', + ], function () { + _this.start(); + }); +}; + +/** + * Set up smart object method. + */ +Banner.prototype.smartObject = function (_settings) { + var _this = this; + + var settings = _settings || {}; + settings.type = settings.type || 'div'; + settings.position = settings.position || 'absolute'; + settings.left = settings.left || '0'; + settings.top = settings.top || '0'; + + var element = document.createElement(settings.type); + element._settings = settings.constructor(); + for (var key in settings) { + element._settings[key] = settings[key]; + } + + switch (settings.type) { + case 'canvas' : + element.width = settings.width; + element.height = settings.height; + break; + case 'video' : + if (settings.autoplay) { element.autoplay = settings.autoplay; } + if (settings.loop) { element.loop = settings.loop; } + if (settings.controls) { element.controls = settings.controls; } + if (settings.muted) { element.muted = settings.muted; } + if (settings.poster) { element.poster = settings.poster; } + if (settings.preload) { element.preload = settings.preload; } + break; + } + + if (settings.sources) { + var sources = settings.sources; + var fragment = document.createDocumentFragment(); + for (var i = 0; i < sources.length; i++) { + var sourceTag = document.createElement('source'); + sourceTag.src = sources[i].url; + sourceTag.type = sources[i].type; + fragment.appendChild(sourceTag); + } + element.appendChild(fragment); + } + + function applySettings() { + if (settings.id) { + element.id = settings.id; + } + if (settings.parent) { + settings.parent.appendChild(element); + } + if (settings.innerHTML) { + element.innerHTML = settings.innerHTML; + } + delete settings.innerHTML; + delete settings.retina; + delete settings.parent; + delete settings.id; + delete settings.type; + delete settings.autoplay; + delete settings.loop; + delete settings.controls; + delete settings.muted; + delete settings.poster; + delete settings.preload; + delete settings.sources; + TweenLite.set(element, settings); + } + + function setImage() { + var isSVG = this.src.slice(-4) === '.svg'; + if (isSVG) { + document.body.appendChild(this); + } + settings.width = Math.round(settings.width || (settings.retina ? this.width / 2 : this.width)); + settings.height = Math.round(settings.height || (settings.retina ? this.height / 2 : this.height)); + settings.backgroundImage = 'url(' + this.src + ')'; + applySettings(); + if (isSVG) { + document.body.removeChild(this); + } + } + + function loadImg(src, setImg) { + var img = _this.imageCache[src]; + if (img) { + if (setImg) { + setImage.apply(img); + } + } else { + img = document.createElement('img'); + img.src = src; + if (setImg) { + img.onload = setImage; + } + _this.imageCache[src] = img; + } + } + + if (settings.backgroundImage) { + element.style.backgroundSize = settings.backgroundSize || '100% 100%'; + element.style.backgroundPosition = settings.backgroundPosition || 'center'; + element.style.backgroundRepeat = settings.backgroundRepeat || 'no-repeat'; + + if (Object.prototype.toString.call(settings.backgroundImage) === '[object Array]') { + element.images = settings.backgroundImage; + for (var j = 0; j < element.images.length; ++j) { + loadImg(element.images[j], j === 0); + } + } else { + loadImg(settings.backgroundImage, true); + } + } else { + applySettings(); + } + + // Helper functions + element.appendChildren = function (children) { + var fragment = document.createDocumentFragment(); + for (var i = 0; i < children.length; i++) { + fragment.appendChild(children[i]); + } + this.appendChild(fragment); + }; + + element.set = function (settings) { + TweenLite.set(this, settings); + }; + + element.to = function (time, settings) { + TweenLite.to(this, time, settings); + }; + + element.from = function (time, settings) { + TweenLite.from(this, time, settings); + }; + + element.fromTo = function (time, from, to) { + TweenLite.fromTo(this, time, from, to); + }; + + element.get = function (property) { + return ((this._gsTransform && this._gsTransform[property]) || (this._gsTransform && this._gsTransform[property] === 0)) ? this._gsTransform[property] : (this.style[property].slice(-2) === 'px') ? parseFloat(this.style[property]) : this.style[property]; + }; + + element.center = function () { + TweenLite.set(this, { top: '50%', marginTop: -this.offsetHeight / 2, left: '50%', marginLeft: -this.offsetWidth / 2 }); + }; + + element.centerHorizontal = function () { + TweenLite.set(this, { left: '50%', marginLeft: -this.offsetWidth / 2 }); + }; + + element.centerVertical = function () { + TweenLite.set(this, { top: '50%', marginTop: -this.offsetHeight / 2 }); + }; + + element.getOriginal = function (property) { + return element._settings[property] || 0; + }; + + return element; +}; + +/** + * Preload images method. + */ +Banner.prototype.preloadImages = function (images, callback, scope) { + var _this = this; + var l = images.length; + var loaded = 0; + var img = null; + + for (var i = 0; i < l; ++i) { + img = document.createElement('img'); + img.src = img.microSrc = images[i]; + img.onload = function () { + _this.imageCache[this.microSrc] = this; + loaded++; + if (loaded === l) { + if (scope) { + callback.call(scope); + } else { + callback(); + } + } + }; + } +}; diff --git a/src/sunpower-banners-warranty-300x250-v2/js/banner.loader.js b/src/sunpower-banners-warranty-300x250-v2/js/banner.loader.js new file mode 100644 index 0000000..1704d0e --- /dev/null +++ b/src/sunpower-banners-warranty-300x250-v2/js/banner.loader.js @@ -0,0 +1,89 @@ +'use strict'; + +/** + * Load events - similar to jQuery window load and dom ready. + */ +Banner.prototype.loader = function () { + var _this = this; + + function addEvent(elem, event, fn) { + if (elem.addEventListener) { + elem.addEventListener(event, fn, false); + } else { + elem.attachEvent('on' + event, function () { + return (fn.call(elem, window.event)); + }); + } + } + addEvent(document, 'DOMContentLoaded', function () { + _this.onPolite(); + }); + addEvent(window, 'load', function () { + _this.onVisible(); + + }); +}; + +/** + * Polite load scripts. + */ +Banner.prototype.politeLoad = function (urls, onComplete) { + var loaded = 0; + var checkProgress = function () { + if (++loaded === urls.length && onComplete) { + onComplete(); + } + }; + for (var i = 0; i < urls.length; i++) { + this.loadScript(urls[i], checkProgress); + } +}; + +/** + * Load script method. + */ +Banner.prototype.loadScript = function (url, callback) { + var script = document.createElement('script'); + script.type = 'text/javascript'; + if (script.readyState) { + script.onreadystatechange = function () { + if (script.readyState === 'loaded' || script.readyState === 'complete') { + script.onreadystatechange = null; + callback(); + } + }; + } else { + script.onload = function () { + callback(); + }; + } + script.src = url; + document.getElementsByTagName('head')[0].appendChild(script); +}; + +/** + * Bind iAB standard clicktag events. + */ +Banner.prototype.bindEvents = function () { + var getUriParams = (function () { + var queryString = {}; + var query = window.location.search.substring(1); + var parmsArray = query.split('&'); + if (parmsArray.length <= 0) { + return queryString; + } + for (var i = 0; i < parmsArray.length; i++) { + var pair = parmsArray[i].split('='); + var val = decodeURIComponent(pair[1]); + if (val !== '"' && pair[0] !== '"') { + queryString[pair[0]] = val; + } + } + return queryString; + })(); + var clickTag = getUriParams.clicktag; + + this.banner.addEventListener('click', function () { + window.open(clickTag); + }); +}; diff --git a/src/sunpower-banners-warranty-300x250-v2/styles/base/_banner.scss b/src/sunpower-banners-warranty-300x250-v2/styles/base/_banner.scss new file mode 100644 index 0000000..d0ec458 --- /dev/null +++ b/src/sunpower-banners-warranty-300x250-v2/styles/base/_banner.scss @@ -0,0 +1,28 @@ +$banner-width: 300px; +$banner-height: 250px; + +.banner { + background: #fff; + cursor: pointer; + height: $banner-height; + left: 50%; + margin-left: -$banner-width / 2; + margin-top: -$banner-height / 2; + overflow: hidden; + position: relative; + position: absolute; + top: 50%; + width: $banner-width; + + .border { + border: 1px solid #ccc; + display: block; + height: $banner-height - 2; + left: 0; + pointer-events: none; + position: absolute; + top: 0; + width: $banner-width - 2; + z-index: 999; + } +} diff --git a/src/sunpower-banners-warranty-300x250-v2/styles/base/_preloader.scss b/src/sunpower-banners-warranty-300x250-v2/styles/base/_preloader.scss new file mode 100644 index 0000000..e6de46b --- /dev/null +++ b/src/sunpower-banners-warranty-300x250-v2/styles/base/_preloader.scss @@ -0,0 +1,32 @@ +$preloader-size: 20px; +$preloader-width: 5px; + +.preloader { + background: #fff; + height: 100%; + width: 100%; + + .circle { + border: $preloader-width solid #ddd; + border-bottom-color: #333; + border-radius: 50%; + height: $preloader-size; + left: 50%; + margin-left: -($preloader-size + $preloader-width) / 2; + margin-top: -($preloader-size + $preloader-width) / 2; + position: absolute; + top: 50%; + transition: all 0.7s ease-in-out; + animation: spin 0.5s linear infinite; + width: $preloader-size; + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/sunpower-banners-warranty-300x250-v2/styles/style.scss b/src/sunpower-banners-warranty-300x250-v2/styles/style.scss new file mode 100755 index 0000000..3411f98 --- /dev/null +++ b/src/sunpower-banners-warranty-300x250-v2/styles/style.scss @@ -0,0 +1,2 @@ +@import 'base/banner'; +@import 'base/preloader'; diff --git a/src/sunpower-banners-warranty-300x250/images/copy1.png b/src/sunpower-banners-warranty-300x250/images/copy1.png index a0d8f1c..bdae5c4 100644 Binary files a/src/sunpower-banners-warranty-300x250/images/copy1.png and b/src/sunpower-banners-warranty-300x250/images/copy1.png differ diff --git a/src/sunpower-banners-warranty-300x250/images/copy2.png b/src/sunpower-banners-warranty-300x250/images/copy2.png index 7c4fd19..1035eb8 100644 Binary files a/src/sunpower-banners-warranty-300x250/images/copy2.png and b/src/sunpower-banners-warranty-300x250/images/copy2.png differ diff --git a/src/sunpower-banners-warranty-300x250/images/copy3.png b/src/sunpower-banners-warranty-300x250/images/copy3.png index fcd8109..501df6c 100644 Binary files a/src/sunpower-banners-warranty-300x250/images/copy3.png and b/src/sunpower-banners-warranty-300x250/images/copy3.png differ diff --git a/src/sunpower-banners-warranty-300x250/images/copy4.png b/src/sunpower-banners-warranty-300x250/images/copy4.png index e457a6b..6d320ed 100644 Binary files a/src/sunpower-banners-warranty-300x250/images/copy4.png and b/src/sunpower-banners-warranty-300x250/images/copy4.png differ diff --git a/src/sunpower-banners-warranty-300x250/images/copy5.png b/src/sunpower-banners-warranty-300x250/images/copy5.png index 2da1895..60329ca 100644 Binary files a/src/sunpower-banners-warranty-300x250/images/copy5.png and b/src/sunpower-banners-warranty-300x250/images/copy5.png differ diff --git a/src/sunpower-banners-warranty-300x250/images/copy6.png b/src/sunpower-banners-warranty-300x250/images/copy6.png index b988fad..9222516 100644 Binary files a/src/sunpower-banners-warranty-300x250/images/copy6.png and b/src/sunpower-banners-warranty-300x250/images/copy6.png differ diff --git a/src/sunpower-banners-warranty-300x250/images/copy7.png b/src/sunpower-banners-warranty-300x250/images/copy7.png index 442700e..0be4411 100644 Binary files a/src/sunpower-banners-warranty-300x250/images/copy7.png and b/src/sunpower-banners-warranty-300x250/images/copy7.png differ diff --git a/src/sunpower-banners-warranty-300x250/images/copy8.png b/src/sunpower-banners-warranty-300x250/images/copy8.png index 9d32afc..5f6e800 100644 Binary files a/src/sunpower-banners-warranty-300x250/images/copy8.png and b/src/sunpower-banners-warranty-300x250/images/copy8.png differ diff --git a/src/sunpower-banners-warranty-300x250/images/cta-nrm.png b/src/sunpower-banners-warranty-300x250/images/cta-nrm.png index c961f9f..25d1205 100644 Binary files a/src/sunpower-banners-warranty-300x250/images/cta-nrm.png and b/src/sunpower-banners-warranty-300x250/images/cta-nrm.png differ diff --git a/src/sunpower-banners-warranty-300x250/images/cta-ovr.png b/src/sunpower-banners-warranty-300x250/images/cta-ovr.png index 641d7b1..b713f66 100644 Binary files a/src/sunpower-banners-warranty-300x250/images/cta-ovr.png and b/src/sunpower-banners-warranty-300x250/images/cta-ovr.png differ diff --git a/src/sunpower-banners-warranty-300x250/index.html b/src/sunpower-banners-warranty-300x250/index.html index ab3ccb0..8c2585c 100644 --- a/src/sunpower-banners-warranty-300x250/index.html +++ b/src/sunpower-banners-warranty-300x250/index.html @@ -8,6 +8,7 @@ + diff --git a/src/sunpower-banners-warranty-300x250/js/banner.animation.js b/src/sunpower-banners-warranty-300x250/js/banner.animation.js index 8f1af1e..e20dd04 100644 --- a/src/sunpower-banners-warranty-300x250/js/banner.animation.js +++ b/src/sunpower-banners-warranty-300x250/js/banner.animation.js @@ -153,14 +153,14 @@ Banner.prototype.createElements = function () { * Setup initial element states. */ Banner.prototype.setup = function () { - this.copy1.set({ left: 0, top: 20 }); - this.copy2.set({ left: 0, top: 60 }); - this.copy3.set({ left: 0, top: 20 }); - this.copy4.set({ left: 0, top: 60 }); - this.copy5.set({ left: 0, top: 100 }); - this.copy6.set({ left: 0, top: 20 }); - this.copy7.set({ left: 0, top: 60 }); - this.copy8.set({ left: 0, top: 100 }); + 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 }); @@ -188,11 +188,11 @@ Banner.prototype.animate = function () { .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta'); this.copyAnimation = new TimelineMax({paused: true}) - .staggerFrom([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Back.easeOut }, 0.5) - .to([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Back.easeIn }, '=+2') - .staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Back.easeOut }, 0.5) - .from(this.cta, 1, { autoAlpha: 0 }) - .to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Back.easeIn }, '=+1') + .staggerFrom([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1) + .to([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, '=+2') + .staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1) + // .from(this.cta, 1, { autoAlpha: 0 }) + .to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, '=+2') .staggerFrom([this.badge, this.tag], 0.5, { autoAlpha: 0 }, 0.5) .call(function(){ loop++ @@ -209,8 +209,8 @@ Banner.prototype.animate = function () { this.timeline = new TimelineMax({repeat: 1, repeatDelay: 1}) - .staggerFrom([this.copy1, this.copy2], 0.5, { x: -300, ease: Back.easeOut }, 0.5, 'frame1') - .to([this.copy1, this.copy2], 0.5, { x: -300, ease: Back.easeIn }, 'frame1+=2') + .staggerFrom([this.copy1, this.copy2], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1, 'frame1') + .to([this.copy1, this.copy2], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, 'frame1+=2') .to(this.bg2, 1, { autoAlpha: 0 }) .from(this.bg, this.copyAnimation._duration, { scale: 1 }, 'frame2-=1') .add(this.copyAnimation.play(), 'frame2'); diff --git a/src/sunpower-banners-warranty-300x600-v2/images/badge.png b/src/sunpower-banners-warranty-300x600-v2/images/badge.png new file mode 100644 index 0000000..1cb0185 Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/badge.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/bg.jpg b/src/sunpower-banners-warranty-300x600-v2/images/bg.jpg new file mode 100644 index 0000000..7654562 Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/bg.jpg differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/bg2.png b/src/sunpower-banners-warranty-300x600-v2/images/bg2.png new file mode 100644 index 0000000..e312550 Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/bg2.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/copy1.png b/src/sunpower-banners-warranty-300x600-v2/images/copy1.png new file mode 100644 index 0000000..fa93a29 Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/copy1.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/copy2.png b/src/sunpower-banners-warranty-300x600-v2/images/copy2.png new file mode 100644 index 0000000..e64c2f9 Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/copy2.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/copy3.png b/src/sunpower-banners-warranty-300x600-v2/images/copy3.png new file mode 100644 index 0000000..d453e68 Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/copy3.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/copy4.png b/src/sunpower-banners-warranty-300x600-v2/images/copy4.png new file mode 100644 index 0000000..f00db7d Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/copy4.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/copy5.png b/src/sunpower-banners-warranty-300x600-v2/images/copy5.png new file mode 100644 index 0000000..f0d59fa Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/copy5.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/copy6.png b/src/sunpower-banners-warranty-300x600-v2/images/copy6.png new file mode 100644 index 0000000..d8927ae Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/copy6.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/copy7.png b/src/sunpower-banners-warranty-300x600-v2/images/copy7.png new file mode 100644 index 0000000..58390e8 Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/copy7.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/copy8.png b/src/sunpower-banners-warranty-300x600-v2/images/copy8.png new file mode 100644 index 0000000..f9cfc2b Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/copy8.png differ diff --git a/src/sunpower-banners-warranty-300x600/images/cta.png b/src/sunpower-banners-warranty-300x600-v2/images/cta-nrm.png similarity index 100% rename from src/sunpower-banners-warranty-300x600/images/cta.png rename to src/sunpower-banners-warranty-300x600-v2/images/cta-nrm.png diff --git a/src/sunpower-banners-warranty-300x600-v2/images/cta-ovr.png b/src/sunpower-banners-warranty-300x600-v2/images/cta-ovr.png new file mode 100644 index 0000000..57c43c8 Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/cta-ovr.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/logo-big.png b/src/sunpower-banners-warranty-300x600-v2/images/logo-big.png new file mode 100644 index 0000000..d9d9b3f Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/logo-big.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/logo.png b/src/sunpower-banners-warranty-300x600-v2/images/logo.png new file mode 100644 index 0000000..c8494ca Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/logo.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/tag.png b/src/sunpower-banners-warranty-300x600-v2/images/tag.png new file mode 100644 index 0000000..b1ac789 Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/tag.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/images/vig.png b/src/sunpower-banners-warranty-300x600-v2/images/vig.png new file mode 100644 index 0000000..592b8b9 Binary files /dev/null and b/src/sunpower-banners-warranty-300x600-v2/images/vig.png differ diff --git a/src/sunpower-banners-warranty-300x600-v2/index.html b/src/sunpower-banners-warranty-300x600-v2/index.html new file mode 100644 index 0000000..865b271 --- /dev/null +++ b/src/sunpower-banners-warranty-300x600-v2/index.html @@ -0,0 +1,23 @@ + + + + + + + sunpower-banners-warranty-300x600 + + + + + + + + + + + diff --git a/src/sunpower-banners-warranty-300x600-v2/js/CustomEase.min.js b/src/sunpower-banners-warranty-300x600-v2/js/CustomEase.min.js new file mode 100644 index 0000000..d404e01 --- /dev/null +++ b/src/sunpower-banners-warranty-300x600-v2/js/CustomEase.min.js @@ -0,0 +1,12 @@ +/*! + * VERSION: 0.2.2 + * DATE: 2017-06-19 + * UPDATES AND DOCS AT: http://greensock.com + * + * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. + * This work is subject to the terms at http://greensock.com/standard-license or for + * Club GreenSock members, the software agreement that was issued with your membership. + * + * @author: Jack Doyle, jack@greensock.com + **/ +var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.CustomEase",["easing.Ease"],function(a){var b=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,c=/[achlmqstvz]|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,d=/[\+\-]?\d*\.?\d+e[\+\-]?\d+/gi,e=/[cLlsS]/g,f="CustomEase only accepts Cubic Bezier data.",g=function(a,b,c,d,e,f,h,i,j,k,l){var m,n=(a+c)/2,o=(b+d)/2,p=(c+e)/2,q=(d+f)/2,r=(e+h)/2,s=(f+i)/2,t=(n+p)/2,u=(o+q)/2,v=(p+r)/2,w=(q+s)/2,x=(t+v)/2,y=(u+w)/2,z=h-a,A=i-b,B=Math.abs((c-h)*A-(d-i)*z),C=Math.abs((e-h)*A-(f-i)*z);return k||(k=[{x:a,y:b},{x:h,y:i}],l=1),k.splice(l||k.length-1,0,{x:x,y:y}),(B+C)*(B+C)>j*(z*z+A*A)&&(m=k.length,g(a,b,n,o,t,u,x,y,j,k,l),g(x,y,v,w,r,s,h,i,j,k,l+1+(k.length-m))),k},h=function(a){var b,e,g,h,i,j,k,l,m,n,o,p=(a+"").replace(d,function(a){var b=+a;return 1e-4>b&&b>-1e-4?0:b}).match(c)||[],q=[],r=0,s=0,t=p.length,u=2;for(b=0;t>b;b++)if(m=h,isNaN(p[b])?(h=p[b].toUpperCase(),i=h!==p[b]):b--,e=+p[b+1],g=+p[b+2],i&&(e+=r,g+=s),b||(k=e,l=g),"M"===h)j&&j.length<8&&(q.length-=1,u=0),r=k=e,s=l=g,j=[e,g],u=2,q.push(j),b+=2,h="L";else if("C"===h)j||(j=[0,0]),j[u++]=e,j[u++]=g,i||(r=s=0),j[u++]=r+1*p[b+3],j[u++]=s+1*p[b+4],j[u++]=r+=1*p[b+5],j[u++]=s+=1*p[b+6],b+=6;else if("S"===h)"C"===m||"S"===m?(n=r-j[u-4],o=s-j[u-3],j[u++]=r+n,j[u++]=s+o):(j[u++]=r,j[u++]=s),j[u++]=e,j[u++]=g,i||(r=s=0),j[u++]=r+=1*p[b+3],j[u++]=s+=1*p[b+4],b+=4;else{if("L"!==h&&"Z"!==h)throw f;"Z"===h&&(e=k,g=l,j.closed=!0),("L"===h||Math.abs(r-e)>.5||Math.abs(s-g)>.5)&&(j[u++]=r+(e-r)/3,j[u++]=s+(g-s)/3,j[u++]=r+2*(e-r)/3,j[u++]=s+2*(g-s)/3,j[u++]=e,j[u++]=g,"L"===h&&(b+=2)),r=e,s=g}return q[0]},i=function(a){var b,c=a.length,d=999999999999;for(b=1;c>b;b+=6)+a[b]d;d+=2)a[d]=(+a[d]+e)*h,a[d+1]=(+a[d+1]+f)*j},k=function(a){var b=this.lookup[a*this.l|0]||this.lookup[this.l-1];return b.nx=r,(e.test(a)||-1!==a.indexOf("M")&&-1===a.indexOf("C"))&&(s=h(a)),d=s.length,4===d)s.unshift(0,0),s.push(1,1),d=8;else if((d-2)%6)throw f;for((0!==+s[0]||1!==+s[d-2])&&j(s,c.height,c.originY),this.rawBezier=s,l=2;d>l;l+=6)i={x:+s[l-2],y:+s[l-1]},k={x:+s[l+4],y:+s[l+5]},u.push(i,k),g(i.x,i.y,+s[l],+s[l+1],+s[l+2],+s[l+3],k.x,k.y,1/(2e5*r),u,u.length-1);for(d=u.length,l=0;d>l;l++)o=u[l],p=u[l-1]||o,o.x>p.x||p.y!==o.y&&p.x===o.x||o===p?(p.cx=o.x-p.x,p.cy=o.y-p.y,p.n=o,p.nx=o.x,this.fast&&l>1&&Math.abs(p.cy/p.cx-u[l-2].cy/u[l-2].cx)>2&&(this.fast=!1),p.cxl;l++)q=l*m,o.nxl;l++)o.nxf;f+=2)d.push(((q+b.rawBezier[f]*o)*n|0)/n+","+((r+b.rawBezier[f+1]*-p)*n|0)/n);d[0]="M"+d[0],d[1]="C"+d[1]}else for(d=["M"+q+","+r],j=Math.max(5,200*(c.precision||1)),g=1/j,j+=2,k=5/j,l=((q+g*o)*n|0)/n,m=((r+b.getRatio(g)*-p)*n|0)/n,e=(m-r)/(l-q),f=2;j>f;f++)h=((q+f*g*o)*n|0)/n,i=((r+b.getRatio(f*g)*-p)*n|0)/n,(Math.abs((i-m)/(h-l)-e)>k||f===j-1)&&(d.push(l+","+m),e=(i-m)/(h-l)),l=h,m=i;return s&&("string"==typeof s?document.querySelector(s):s).setAttribute("d",d.join(" ")),d.join(" ")},l},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()(),function(a){"use strict";var b=function(){return(_gsScope.GreenSockGlobals||_gsScope)[a]};"undefined"!=typeof module&&module.exports?(require("../TweenLite.min.js"),module.exports=b()):"function"==typeof define&&define.amd&&define(["TweenLite"],b)}("CustomEase"); \ No newline at end of file diff --git a/src/sunpower-banners-warranty-300x600-v2/js/banner.animation.js b/src/sunpower-banners-warranty-300x600-v2/js/banner.animation.js new file mode 100644 index 0000000..a51e9bd --- /dev/null +++ b/src/sunpower-banners-warranty-300x600-v2/js/banner.animation.js @@ -0,0 +1,243 @@ +'use strict'; + +/** + * Run the animation functions. + */ +Banner.prototype.start = function () { + this.banner = document.querySelector('.banner'); + + this.bannerWidth = this.banner.offsetWidth; + this.bannerHeight = this.banner.offsetHeight; + + // Image array for preloading + this.images = [ + 'images/logo.png', + 'images/logo-big.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', + ]; + + var _this = this; + this.preloadImages(this.images, function () { + _this.createElements(); + _this.setup(); + _this.hidePreloader(); + _this.animate(); + _this.bindEvents(); + }); +}; + +/** + * 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.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.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 }); +}; + +/** + * 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.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) + // .from(this.cta, 1, { autoAlpha: 0 }) + .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 }) + .to(this.bg2, 0.5, { autoAlpha: 1 }); + } + }); + + + this.timeline = new TimelineMax({repeat: 1, repeatDelay: 1}) + .add(this.copyAnimation.play(), 'frame2') + .from(this.bg, this.copyAnimation._duration, { x: 30 }, 'frame2'); + // .to(this.bg2, 1, { autoAlpha: 0 }) + + + 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/js/banner.js b/src/sunpower-banners-warranty-300x600-v2/js/banner.js new file mode 100644 index 0000000..0c67b72 --- /dev/null +++ b/src/sunpower-banners-warranty-300x600-v2/js/banner.js @@ -0,0 +1,218 @@ +'use strict'; + +var Banner = function () { + this.loader(); + this.imageCache = {}; +}; + +Banner.prototype.onInit = function () { + console.log('Banner initialised'); +}; + +Banner.prototype.onPolite = function () { + console.log('Polite loading scripts'); +}; + +/** + * Polite load scripts and trigger the + */ +Banner.prototype.onVisible = function () { + var _this = this; + + this.politeLoad([ + 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js', + ], function () { + _this.start(); + }); +}; + +/** + * Set up smart object method. + */ +Banner.prototype.smartObject = function (_settings) { + var _this = this; + + var settings = _settings || {}; + settings.type = settings.type || 'div'; + settings.position = settings.position || 'absolute'; + settings.left = settings.left || '0'; + settings.top = settings.top || '0'; + + var element = document.createElement(settings.type); + element._settings = settings.constructor(); + for (var key in settings) { + element._settings[key] = settings[key]; + } + + switch (settings.type) { + case 'canvas' : + element.width = settings.width; + element.height = settings.height; + break; + case 'video' : + if (settings.autoplay) { element.autoplay = settings.autoplay; } + if (settings.loop) { element.loop = settings.loop; } + if (settings.controls) { element.controls = settings.controls; } + if (settings.muted) { element.muted = settings.muted; } + if (settings.poster) { element.poster = settings.poster; } + if (settings.preload) { element.preload = settings.preload; } + break; + } + + if (settings.sources) { + var sources = settings.sources; + var fragment = document.createDocumentFragment(); + for (var i = 0; i < sources.length; i++) { + var sourceTag = document.createElement('source'); + sourceTag.src = sources[i].url; + sourceTag.type = sources[i].type; + fragment.appendChild(sourceTag); + } + element.appendChild(fragment); + } + + function applySettings() { + if (settings.id) { + element.id = settings.id; + } + if (settings.parent) { + settings.parent.appendChild(element); + } + if (settings.innerHTML) { + element.innerHTML = settings.innerHTML; + } + delete settings.innerHTML; + delete settings.retina; + delete settings.parent; + delete settings.id; + delete settings.type; + delete settings.autoplay; + delete settings.loop; + delete settings.controls; + delete settings.muted; + delete settings.poster; + delete settings.preload; + delete settings.sources; + TweenLite.set(element, settings); + } + + function setImage() { + var isSVG = this.src.slice(-4) === '.svg'; + if (isSVG) { + document.body.appendChild(this); + } + settings.width = Math.round(settings.width || (settings.retina ? this.width / 2 : this.width)); + settings.height = Math.round(settings.height || (settings.retina ? this.height / 2 : this.height)); + settings.backgroundImage = 'url(' + this.src + ')'; + applySettings(); + if (isSVG) { + document.body.removeChild(this); + } + } + + function loadImg(src, setImg) { + var img = _this.imageCache[src]; + if (img) { + if (setImg) { + setImage.apply(img); + } + } else { + img = document.createElement('img'); + img.src = src; + if (setImg) { + img.onload = setImage; + } + _this.imageCache[src] = img; + } + } + + if (settings.backgroundImage) { + element.style.backgroundSize = settings.backgroundSize || '100% 100%'; + element.style.backgroundPosition = settings.backgroundPosition || 'center'; + element.style.backgroundRepeat = settings.backgroundRepeat || 'no-repeat'; + + if (Object.prototype.toString.call(settings.backgroundImage) === '[object Array]') { + element.images = settings.backgroundImage; + for (var j = 0; j < element.images.length; ++j) { + loadImg(element.images[j], j === 0); + } + } else { + loadImg(settings.backgroundImage, true); + } + } else { + applySettings(); + } + + // Helper functions + element.appendChildren = function (children) { + var fragment = document.createDocumentFragment(); + for (var i = 0; i < children.length; i++) { + fragment.appendChild(children[i]); + } + this.appendChild(fragment); + }; + + element.set = function (settings) { + TweenLite.set(this, settings); + }; + + element.to = function (time, settings) { + TweenLite.to(this, time, settings); + }; + + element.from = function (time, settings) { + TweenLite.from(this, time, settings); + }; + + element.fromTo = function (time, from, to) { + TweenLite.fromTo(this, time, from, to); + }; + + element.get = function (property) { + return ((this._gsTransform && this._gsTransform[property]) || (this._gsTransform && this._gsTransform[property] === 0)) ? this._gsTransform[property] : (this.style[property].slice(-2) === 'px') ? parseFloat(this.style[property]) : this.style[property]; + }; + + element.center = function () { + TweenLite.set(this, { top: '50%', marginTop: -this.offsetHeight / 2, left: '50%', marginLeft: -this.offsetWidth / 2 }); + }; + + element.centerHorizontal = function () { + TweenLite.set(this, { left: '50%', marginLeft: -this.offsetWidth / 2 }); + }; + + element.centerVertical = function () { + TweenLite.set(this, { top: '50%', marginTop: -this.offsetHeight / 2 }); + }; + + element.getOriginal = function (property) { + return element._settings[property] || 0; + }; + + return element; +}; + +/** + * Preload images method. + */ +Banner.prototype.preloadImages = function (images, callback, scope) { + var _this = this; + var l = images.length; + var loaded = 0; + var img = null; + + for (var i = 0; i < l; ++i) { + img = document.createElement('img'); + img.src = img.microSrc = images[i]; + img.onload = function () { + _this.imageCache[this.microSrc] = this; + loaded++; + if (loaded === l) { + if (scope) { + callback.call(scope); + } else { + callback(); + } + } + }; + } +}; diff --git a/src/sunpower-banners-warranty-300x600-v2/js/banner.loader.js b/src/sunpower-banners-warranty-300x600-v2/js/banner.loader.js new file mode 100644 index 0000000..1704d0e --- /dev/null +++ b/src/sunpower-banners-warranty-300x600-v2/js/banner.loader.js @@ -0,0 +1,89 @@ +'use strict'; + +/** + * Load events - similar to jQuery window load and dom ready. + */ +Banner.prototype.loader = function () { + var _this = this; + + function addEvent(elem, event, fn) { + if (elem.addEventListener) { + elem.addEventListener(event, fn, false); + } else { + elem.attachEvent('on' + event, function () { + return (fn.call(elem, window.event)); + }); + } + } + addEvent(document, 'DOMContentLoaded', function () { + _this.onPolite(); + }); + addEvent(window, 'load', function () { + _this.onVisible(); + + }); +}; + +/** + * Polite load scripts. + */ +Banner.prototype.politeLoad = function (urls, onComplete) { + var loaded = 0; + var checkProgress = function () { + if (++loaded === urls.length && onComplete) { + onComplete(); + } + }; + for (var i = 0; i < urls.length; i++) { + this.loadScript(urls[i], checkProgress); + } +}; + +/** + * Load script method. + */ +Banner.prototype.loadScript = function (url, callback) { + var script = document.createElement('script'); + script.type = 'text/javascript'; + if (script.readyState) { + script.onreadystatechange = function () { + if (script.readyState === 'loaded' || script.readyState === 'complete') { + script.onreadystatechange = null; + callback(); + } + }; + } else { + script.onload = function () { + callback(); + }; + } + script.src = url; + document.getElementsByTagName('head')[0].appendChild(script); +}; + +/** + * Bind iAB standard clicktag events. + */ +Banner.prototype.bindEvents = function () { + var getUriParams = (function () { + var queryString = {}; + var query = window.location.search.substring(1); + var parmsArray = query.split('&'); + if (parmsArray.length <= 0) { + return queryString; + } + for (var i = 0; i < parmsArray.length; i++) { + var pair = parmsArray[i].split('='); + var val = decodeURIComponent(pair[1]); + if (val !== '"' && pair[0] !== '"') { + queryString[pair[0]] = val; + } + } + return queryString; + })(); + var clickTag = getUriParams.clicktag; + + this.banner.addEventListener('click', function () { + window.open(clickTag); + }); +}; diff --git a/src/sunpower-banners-warranty-300x600-v2/styles/base/_banner.scss b/src/sunpower-banners-warranty-300x600-v2/styles/base/_banner.scss new file mode 100644 index 0000000..9cb1a11 --- /dev/null +++ b/src/sunpower-banners-warranty-300x600-v2/styles/base/_banner.scss @@ -0,0 +1,28 @@ +$banner-width: 300px; +$banner-height: 600px; + +.banner { + background: #fff; + cursor: pointer; + height: $banner-height; + left: 50%; + margin-left: -$banner-width / 2; + margin-top: -$banner-height / 2; + overflow: hidden; + position: relative; + position: absolute; + top: 50%; + width: $banner-width; + + .border { + border: 1px solid #ccc; + display: block; + height: $banner-height - 2; + left: 0; + pointer-events: none; + position: absolute; + top: 0; + width: $banner-width - 2; + z-index: 999; + } +} diff --git a/src/sunpower-banners-warranty-300x600-v2/styles/base/_preloader.scss b/src/sunpower-banners-warranty-300x600-v2/styles/base/_preloader.scss new file mode 100644 index 0000000..e6de46b --- /dev/null +++ b/src/sunpower-banners-warranty-300x600-v2/styles/base/_preloader.scss @@ -0,0 +1,32 @@ +$preloader-size: 20px; +$preloader-width: 5px; + +.preloader { + background: #fff; + height: 100%; + width: 100%; + + .circle { + border: $preloader-width solid #ddd; + border-bottom-color: #333; + border-radius: 50%; + height: $preloader-size; + left: 50%; + margin-left: -($preloader-size + $preloader-width) / 2; + margin-top: -($preloader-size + $preloader-width) / 2; + position: absolute; + top: 50%; + transition: all 0.7s ease-in-out; + animation: spin 0.5s linear infinite; + width: $preloader-size; + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/sunpower-banners-warranty-300x600-v2/styles/style.scss b/src/sunpower-banners-warranty-300x600-v2/styles/style.scss new file mode 100755 index 0000000..3411f98 --- /dev/null +++ b/src/sunpower-banners-warranty-300x600-v2/styles/style.scss @@ -0,0 +1,2 @@ +@import 'base/banner'; +@import 'base/preloader'; diff --git a/src/sunpower-banners-warranty-300x600/images/copy1.png b/src/sunpower-banners-warranty-300x600/images/copy1.png index 49ee6b8..fa93a29 100644 Binary files a/src/sunpower-banners-warranty-300x600/images/copy1.png and b/src/sunpower-banners-warranty-300x600/images/copy1.png differ diff --git a/src/sunpower-banners-warranty-300x600/images/copy2.png b/src/sunpower-banners-warranty-300x600/images/copy2.png index ccd071a..e64c2f9 100644 Binary files a/src/sunpower-banners-warranty-300x600/images/copy2.png and b/src/sunpower-banners-warranty-300x600/images/copy2.png differ diff --git a/src/sunpower-banners-warranty-300x600/images/copy3.png b/src/sunpower-banners-warranty-300x600/images/copy3.png index 93d8609..d453e68 100644 Binary files a/src/sunpower-banners-warranty-300x600/images/copy3.png and b/src/sunpower-banners-warranty-300x600/images/copy3.png differ diff --git a/src/sunpower-banners-warranty-300x600/images/copy4.png b/src/sunpower-banners-warranty-300x600/images/copy4.png index d29073c..f00db7d 100644 Binary files a/src/sunpower-banners-warranty-300x600/images/copy4.png and b/src/sunpower-banners-warranty-300x600/images/copy4.png differ diff --git a/src/sunpower-banners-warranty-300x600/images/copy5.png b/src/sunpower-banners-warranty-300x600/images/copy5.png index df5e701..f0d59fa 100644 Binary files a/src/sunpower-banners-warranty-300x600/images/copy5.png and b/src/sunpower-banners-warranty-300x600/images/copy5.png differ diff --git a/src/sunpower-banners-warranty-300x600/images/copy6.png b/src/sunpower-banners-warranty-300x600/images/copy6.png index d28d182..d8927ae 100644 Binary files a/src/sunpower-banners-warranty-300x600/images/copy6.png and b/src/sunpower-banners-warranty-300x600/images/copy6.png differ diff --git a/src/sunpower-banners-warranty-300x600/images/copy7.png b/src/sunpower-banners-warranty-300x600/images/copy7.png index 16b6ae0..58390e8 100644 Binary files a/src/sunpower-banners-warranty-300x600/images/copy7.png and b/src/sunpower-banners-warranty-300x600/images/copy7.png differ diff --git a/src/sunpower-banners-warranty-300x600/images/copy8.png b/src/sunpower-banners-warranty-300x600/images/copy8.png index 994ac21..f9cfc2b 100644 Binary files a/src/sunpower-banners-warranty-300x600/images/copy8.png and b/src/sunpower-banners-warranty-300x600/images/copy8.png differ diff --git a/src/sunpower-banners-warranty-300x600/images/cta-nrm.png b/src/sunpower-banners-warranty-300x600/images/cta-nrm.png index c961f9f..6d19d86 100644 Binary files a/src/sunpower-banners-warranty-300x600/images/cta-nrm.png and b/src/sunpower-banners-warranty-300x600/images/cta-nrm.png differ diff --git a/src/sunpower-banners-warranty-300x600/images/cta-ovr.png b/src/sunpower-banners-warranty-300x600/images/cta-ovr.png index 641d7b1..57c43c8 100644 Binary files a/src/sunpower-banners-warranty-300x600/images/cta-ovr.png and b/src/sunpower-banners-warranty-300x600/images/cta-ovr.png differ diff --git a/src/sunpower-banners-warranty-300x600/index.html b/src/sunpower-banners-warranty-300x600/index.html index 83a3de7..865b271 100644 --- a/src/sunpower-banners-warranty-300x600/index.html +++ b/src/sunpower-banners-warranty-300x600/index.html @@ -8,6 +8,7 @@ + diff --git a/src/sunpower-banners-warranty-300x600/js/banner.animation.js b/src/sunpower-banners-warranty-300x600/js/banner.animation.js index 9a036e5..574703f 100644 --- a/src/sunpower-banners-warranty-300x600/js/banner.animation.js +++ b/src/sunpower-banners-warranty-300x600/js/banner.animation.js @@ -15,7 +15,7 @@ Banner.prototype.start = function () { 'images/logo-big.png', 'images/badge.png', 'images/bg.jpg', - 'images/bg2.png', + // 'images/bg2.png', 'images/copy1.png', 'images/copy2.png', 'images/copy3.png', @@ -24,7 +24,8 @@ Banner.prototype.start = function () { 'images/copy6.png', 'images/copy7.png', 'images/copy8.png', - 'images/cta.png', + 'images/cta-nrm.png', + 'images/cta-ovr.png', 'images/tag.png', ]; @@ -50,11 +51,11 @@ Banner.prototype.createElements = function () { parent: this.banner }); - this.bg2 = this.smartObject({ - id: 'bg2', - backgroundImage: 'images/bg2.png', - parent: this.banner - }); + // this.bg2 = this.smartObject({ + // id: 'bg2', + // backgroundImage: 'images/bg2.png', + // parent: this.banner + // }); this.logo = this.smartObject({ id: 'LOGO', @@ -130,29 +131,43 @@ Banner.prototype.createElements = function () { this.cta = this.smartObject({ id: 'cta', - backgroundImage: 'images/cta.png', + 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: 0, top: 62 }); - this.copy2.set({ left: 0, top: 102 }); - this.copy3.set({ left: 0, top: 62 }); - this.copy4.set({ left: 0, top: 102 }); - this.copy5.set({ left: 0, top: 142 }); - this.copy6.set({ left: 0, top: 62 }); - this.copy7.set({ left: 0, top: 102 }); - this.copy8.set({ left: 0, top: 142 }); + 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 }); @@ -173,14 +188,16 @@ Banner.prototype.animate = function () { var loop = 0; this.timeLineCTA = new TimelineMax({ paused: true }) - .to(this.cta, 1, { autoAlpha: 0.7 }, 'cta'); + .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta'); this.copyAnimation = new TimelineMax({paused: true}) - .staggerFrom([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Back.easeOut }, 0.5) - .to([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Back.easeIn }, '=+2') - .staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Back.easeOut }, 0.5) - .from(this.cta, 1, { autoAlpha: 0 }) - .to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Back.easeIn }, '=+1') + .staggerFrom([this.copy1, this.copy2], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1) + .to([this.copy1, this.copy2], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, '+=2') + .staggerFrom([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1) + .to([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, '=+2') + .staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.128,0.572,0.257,0.926,0.512,1,0.672,1.046,0.838,1,1,1") }, 0.1) + // .from(this.cta, 1, { autoAlpha: 0 }) + .to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: CustomEase.create("custom", "M0,0,C0.192,0,0.33,-0.074,0.522,0,0.641,0.047,0.832,0.19,1,1") }, '=+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') @@ -200,11 +217,10 @@ Banner.prototype.animate = function () { this.timeline = new TimelineMax({repeat: 1, repeatDelay: 1}) - .staggerFrom([this.copy1, this.copy2], 0.5, { x: -300, ease: Back.easeOut }, 0.5, 'frame1') - .to([this.copy1, this.copy2], 0.5, { x: -300, ease: Back.easeIn }, 'frame1+=2') - .to(this.bg2, 1, { autoAlpha: 0 }) - .from(this.bg, this.copyAnimation._duration, { x: 30 }, 'frame2-=1') - .add(this.copyAnimation.play(), 'frame2'); + .add(this.copyAnimation.play(), 'frame2') + .from(this.bg, this.copyAnimation._duration, { x: 30 }, 'frame2'); + // .to(this.bg2, 1, { autoAlpha: 0 }) + this.timeline.timeScale(1); };