amend: client changes on all banners and new option on copy animation
This commit is contained in:
Fabriek/Snap
parent
0d73a12fef
commit
6379aaa6a1
157 changed files with 2758 additions and 95 deletions
|
|
@ -9,15 +9,27 @@
|
|||
<div class="sidebar">
|
||||
<img src="base/images/logo.png" class="logo">
|
||||
<ul>
|
||||
<h2 style="text-decoration: underline;">OPTION 1</h2>
|
||||
<br>
|
||||
<h1>Warranty</h1>
|
||||
<li><a href="sunpower-banners-warranty-300x250/" class="done">sunpower-banners-warranty-300x250</a></li>
|
||||
<li><a href="sunpower-banners-warranty-300x600/" class="done">sunpower-banners-warranty-300x600</a></li>
|
||||
<h1>Durability</h1>
|
||||
<li><a href="sunpower-banners-durability-300x250/" class="done">sunpower-banners-durability-300x250</a></li>
|
||||
<li><a href="sunpower-banners-durability-300x600/" class="done">sunpower-banners-durability-300x600</a></li>
|
||||
<h1>Agency Recommendation</h1>
|
||||
<br><br>
|
||||
|
||||
<h2 style="text-decoration: underline;">OPTION 2</h2>
|
||||
<br>
|
||||
<h1>Warranty</h1>
|
||||
<li><a href="sunpower-banners-warranty-300x250-v2/" class="done">sunpower-banners-warranty-300x250-v2</a></li>
|
||||
<li><a href="sunpower-banners-warranty-300x600-v2/" class="done">sunpower-banners-warranty-300x600-v2</a></li>
|
||||
<h1>Durability</h1>
|
||||
<li><a href="sunpower-banners-durability-300x250-v2/" class="done">sunpower-banners-durability-300x250-v2</a></li>
|
||||
<li><a href="sunpower-banners-durability-300x600-v2/" class="done">sunpower-banners-durability-300x600-v2</a></li>
|
||||
<!-- <h1>Agency Recommendation</h1>
|
||||
<li><a href="sunpower-banners-warranty-300x600-AR/" class="done">sunpower-banners-warranty-300x600-AR</a></li>
|
||||
<li><a href="sunpower-banners-durability-300x600-AR/" class="done">sunpower-banners-durability-300x600-AR</a></li>
|
||||
<li><a href="sunpower-banners-durability-300x600-AR/" class="done">sunpower-banners-durability-300x600-AR</a></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="keyboard-controls">
|
||||
|
|
|
|||
BIN
src/sunpower-banners-durability-300x250-v2/images/bg.jpg
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/bg2.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/copy1.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/copy1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/copy10.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/copy10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/copy2.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/copy2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/copy3.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/copy3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/copy4.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/copy4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/copy5.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/copy5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/copy6.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/copy6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/copy7.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/copy7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/copy8.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/copy8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/copy9.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/copy9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/cta-nrm.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/cta-nrm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/cta-ovr.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/cta-ovr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/logo.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/tag.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/tag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
BIN
src/sunpower-banners-durability-300x250-v2/images/vig.png
Normal file
BIN
src/sunpower-banners-durability-300x250-v2/images/vig.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
23
src/sunpower-banners-durability-300x250-v2/index.html
Normal file
23
src/sunpower-banners-durability-300x250-v2/index.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="ad.size" content="width=300,height=250">
|
||||
<title>sunpower-banners-durability-300x250</title>
|
||||
<script src="js/banner.js" type="text/javascript"></script>
|
||||
<script src="js/banner.loader.js" type="text/javascript"></script>
|
||||
<script src="js/banner.animation.js" type="text/javascript"></script>
|
||||
<script src="js/CustomEase.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">var banner = new Banner();</script>
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
<div class="preloader">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="border"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
12
src/sunpower-banners-durability-300x250-v2/js/CustomEase.min.js
vendored
Normal file
12
src/sunpower-banners-durability-300x250-v2/js/CustomEase.min.js
vendored
Normal file
|
|
@ -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=+a[b]);return d},j=function(a,b,c){c||0===c||(c=Math.max(+a[a.length-1],+a[1]));var d,e=-1*+a[0],f=-c,g=a.length,h=1/(+a[g-2]+e),j=-b||(Math.abs(+a[g-1]-+a[1])<.01*(+a[g-2]-+a[0])?i(a)+f:+a[g-1]+f);for(j=j?1/j:-h,d=0;g>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<a&&(b=b.n),b.y+(a-b.x)/b.cx*b.cy},l=function(b,c,d){this._calcEnd=!0,this.id=b,b&&(a.map[b]=this),this.getRatio=k,this.setData(c,d)},m=l.prototype=new a;return m.constructor=l,m.setData=function(a,c){a=a||"0,0,1,1";var d,i,k,l,m,n,o,p,q,r,s=a.match(b),t=1,u=[];if(c=c||{},r=c.precision||1,this.data=a,this.lookup=[],this.points=u,this.fast=1>=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.cx<t&&(p.cx?t=p.cx:(p.cx=.001,l===d-1&&(p.x-=.001,t=Math.min(t,.001),this.fast=!1)))):(u.splice(l--,1),d--);if(d=1/t+1|0,this.l=d,m=1/d,n=0,o=u[0],this.fast){for(l=0;d>l;l++)q=l*m,o.nx<q&&(o=u[++n]),i=o.y+(q-o.x)/o.cx*o.cy,this.lookup[l]={x:q,cx:m,y:i,cy:0,nx:9},l&&(this.lookup[l-1].cy=i-this.lookup[l-1].y);this.lookup[d-1].cy=u[u.length-1].y-i}else{for(l=0;d>l;l++)o.nx<l*m&&(o=u[++n]),this.lookup[l]=o;n<u.length-1&&(this.lookup[l-1]=u[u.length-2])}return this._calcEnd=1!==u[u.length-1].y||0!==u[0].y,this},m.getRatio=k,m.getSVGData=function(a){return l.getSVGData(this,a)},l.create=function(a,b,c){return new l(a,b,c)},l.version="0.2.2",l.bezierToPoints=g,l.get=function(b){return a.map[b]},l.getSVGData=function(b,c){c=c||{};var d,e,f,g,h,i,j,k,l,m,n=1e3,o=c.width||100,p=c.height||100,q=c.x||0,r=(c.y||0)+p,s=c.path;if(c.invert&&(p=-p,r=0),b=b.getRatio?b:a.map[b]||console.log("No ease found: ",b),b.rawBezier){for(d=[],j=b.rawBezier.length,f=0;j>f;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");
|
||||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
218
src/sunpower-banners-durability-300x250-v2/js/banner.js
Normal file
218
src/sunpower-banners-durability-300x250-v2/js/banner.js
Normal file
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
2
src/sunpower-banners-durability-300x250-v2/styles/style.scss
Executable file
2
src/sunpower-banners-durability-300x250-v2/styles/style.scss
Executable file
|
|
@ -0,0 +1,2 @@
|
|||
@import 'base/banner';
|
||||
@import 'base/preloader';
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -8,6 +8,7 @@
|
|||
<script src="js/banner.js" type="text/javascript"></script>
|
||||
<script src="js/banner.loader.js" type="text/javascript"></script>
|
||||
<script src="js/banner.animation.js" type="text/javascript"></script>
|
||||
<script src="js/CustomEase.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">var banner = new Banner();</script>
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
BIN
src/sunpower-banners-durability-300x600-v2/images/bg.jpg
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/bg2.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/copy1.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/copy1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/copy10.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/copy10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/copy11.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/copy11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/copy2.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/copy2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/copy3.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/copy3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/copy4.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/copy4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/copy5.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/copy5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/copy6.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/copy6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/copy7.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/copy7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/copy8.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/copy8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/copy9.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/copy9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/cta-ovr.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/cta-ovr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/logo-big.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/logo-big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/logo.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/tag.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/tag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/sunpower-banners-durability-300x600-v2/images/vig.png
Normal file
BIN
src/sunpower-banners-durability-300x600-v2/images/vig.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
23
src/sunpower-banners-durability-300x600-v2/index.html
Normal file
23
src/sunpower-banners-durability-300x600-v2/index.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="ad.size" content="width=300,height=600">
|
||||
<title>sunpower-banners-durability-300x600</title>
|
||||
<script src="js/banner.js" type="text/javascript"></script>
|
||||
<script src="js/banner.loader.js" type="text/javascript"></script>
|
||||
<script src="js/banner.animation.js" type="text/javascript"></script>
|
||||
<script src="js/CustomEase.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">var banner = new Banner();</script>
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
<div class="preloader">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="border"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
12
src/sunpower-banners-durability-300x600-v2/js/CustomEase.min.js
vendored
Normal file
12
src/sunpower-banners-durability-300x600-v2/js/CustomEase.min.js
vendored
Normal file
|
|
@ -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=+a[b]);return d},j=function(a,b,c){c||0===c||(c=Math.max(+a[a.length-1],+a[1]));var d,e=-1*+a[0],f=-c,g=a.length,h=1/(+a[g-2]+e),j=-b||(Math.abs(+a[g-1]-+a[1])<.01*(+a[g-2]-+a[0])?i(a)+f:+a[g-1]+f);for(j=j?1/j:-h,d=0;g>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<a&&(b=b.n),b.y+(a-b.x)/b.cx*b.cy},l=function(b,c,d){this._calcEnd=!0,this.id=b,b&&(a.map[b]=this),this.getRatio=k,this.setData(c,d)},m=l.prototype=new a;return m.constructor=l,m.setData=function(a,c){a=a||"0,0,1,1";var d,i,k,l,m,n,o,p,q,r,s=a.match(b),t=1,u=[];if(c=c||{},r=c.precision||1,this.data=a,this.lookup=[],this.points=u,this.fast=1>=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.cx<t&&(p.cx?t=p.cx:(p.cx=.001,l===d-1&&(p.x-=.001,t=Math.min(t,.001),this.fast=!1)))):(u.splice(l--,1),d--);if(d=1/t+1|0,this.l=d,m=1/d,n=0,o=u[0],this.fast){for(l=0;d>l;l++)q=l*m,o.nx<q&&(o=u[++n]),i=o.y+(q-o.x)/o.cx*o.cy,this.lookup[l]={x:q,cx:m,y:i,cy:0,nx:9},l&&(this.lookup[l-1].cy=i-this.lookup[l-1].y);this.lookup[d-1].cy=u[u.length-1].y-i}else{for(l=0;d>l;l++)o.nx<l*m&&(o=u[++n]),this.lookup[l]=o;n<u.length-1&&(this.lookup[l-1]=u[u.length-2])}return this._calcEnd=1!==u[u.length-1].y||0!==u[0].y,this},m.getRatio=k,m.getSVGData=function(a){return l.getSVGData(this,a)},l.create=function(a,b,c){return new l(a,b,c)},l.version="0.2.2",l.bezierToPoints=g,l.get=function(b){return a.map[b]},l.getSVGData=function(b,c){c=c||{};var d,e,f,g,h,i,j,k,l,m,n=1e3,o=c.width||100,p=c.height||100,q=c.x||0,r=(c.y||0)+p,s=c.path;if(c.invert&&(p=-p,r=0),b=b.getRatio?b:a.map[b]||console.log("No ease found: ",b),b.rawBezier){for(d=[],j=b.rawBezier.length,f=0;j>f;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");
|
||||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
218
src/sunpower-banners-durability-300x600-v2/js/banner.js
Normal file
218
src/sunpower-banners-durability-300x600-v2/js/banner.js
Normal file
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
2
src/sunpower-banners-durability-300x600-v2/styles/style.scss
Executable file
2
src/sunpower-banners-durability-300x600-v2/styles/style.scss
Executable file
|
|
@ -0,0 +1,2 @@
|
|||
@import 'base/banner';
|
||||
@import 'base/preloader';
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 3.3 KiB |
|
|
@ -8,6 +8,7 @@
|
|||
<script src="js/banner.js" type="text/javascript"></script>
|
||||
<script src="js/banner.loader.js" type="text/javascript"></script>
|
||||
<script src="js/banner.animation.js" type="text/javascript"></script>
|
||||
<script src="js/CustomEase.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">var banner = new Banner();</script>
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
BIN
src/sunpower-banners-warranty-300x250-v2/images/badge.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/badge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/bg.jpg
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/bg2.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy1.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy2.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy3.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy4.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy5.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy6.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy7.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy8.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/copy8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/cta-nrm.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/cta-nrm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/cta-ovr.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/cta-ovr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/logo.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/tag.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/tag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
BIN
src/sunpower-banners-warranty-300x250-v2/images/vig.png
Normal file
BIN
src/sunpower-banners-warranty-300x250-v2/images/vig.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue