Revert "I added a href to each index.html page and I also removed the scrolling animation in all the banner_animation.js files."
This reverts commit 718b1dca80.
This commit is contained in:
Andre
parent
718b1dca80
commit
cb91a48e2e
24 changed files with 3326 additions and 3275 deletions
|
|
@ -1,3 +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><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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>
|
||||
|
|
|
|||
|
|
@ -1,263 +1,249 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/bg.jpg",
|
||||
"images/bg2.png",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/copy9.png",
|
||||
"images/copy10.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png",
|
||||
"images/vig.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.vig=this.smartObject( {
|
||||
id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.bg2=this.smartObject( {
|
||||
id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy9=this.smartObject( {
|
||||
id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy10=this.smartObject( {
|
||||
id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", width: 75, height: 18, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy9.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy10.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.vig.set( {
|
||||
bottom: 0
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 150, top: 216
|
||||
}
|
||||
),
|
||||
this.tag.set( {
|
||||
left: 150, top: 192
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 10, top: 216
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
left: -61, bottom: -48, scale: .8
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/bg.jpg',
|
||||
'images/bg2.png',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/copy9.png',
|
||||
'images/copy10.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
'images/vig.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.vig = this.smartObject({
|
||||
id: 'vig',
|
||||
backgroundImage: 'images/vig.png',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.bg2 = this.smartObject({
|
||||
id: 'bg2',
|
||||
backgroundImage: 'images/bg2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy9 = this.smartObject({
|
||||
id: 'copy9',
|
||||
backgroundImage: 'images/copy9.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy10 = this.smartObject({
|
||||
id: 'copy10',
|
||||
backgroundImage: 'images/copy10.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 75,
|
||||
height: 18,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 20 });
|
||||
this.copy2.set({ left: -10, top: 60 });
|
||||
this.copy3.set({ left: -10, top: 100 });
|
||||
this.copy4.set({ left: -10, top: 20 });
|
||||
this.copy5.set({ left: -10, top: 60 });
|
||||
this.copy6.set({ left: -10, top: 100 });
|
||||
this.copy7.set({ left: -10, top: 20 });
|
||||
this.copy8.set({ left: -10, top: 60 });
|
||||
this.copy9.set({ left: -10, top: 20 });
|
||||
this.copy10.set({ left: -10, top: 60 });
|
||||
this.vig.set({ bottom: 0 });
|
||||
this.logo.set({ left: 150, top: 216 });
|
||||
this.tag.set({ left: 150, top: 192 });
|
||||
this.cta.set({ left: 10, top: 216 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.bg.set({ left: -61, bottom: -48, scale: 0.8 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.staggerFrom([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'cta')
|
||||
.to([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.staggerFrom([this.copy9, this.copy10], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.from(this.tag, 0.5, { autoAlpha: 0 })
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], 0.5, { autoAlpha: 0 })
|
||||
.to(this.bg2, 0.5, { autoAlpha: 1 });
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy4, this.copy5, this.copy6], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy4, this.copy5, this.copy6], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").staggerFrom([this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "cta").to([this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").staggerFrom([this.copy9, this.copy10], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).from(this.tag, .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).to(this.bg2, .5, {
|
||||
autoAlpha: 1
|
||||
}
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
repeat: 1, repeatDelay: 2
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2, this.copy3], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "frame1+=0.5").to([this.copy1, this.copy2, this.copy3], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "frame1+=3").to(this.bg2, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
});
|
||||
|
||||
, "frame2-=1").add(this.copyAnimation.play(), "frame2"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
console.log(t),
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
this.timeline = new TimelineMax({repeat: 1, repeatDelay: 2})
|
||||
.staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5')
|
||||
.to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3')
|
||||
.to(this.bg2, 1, { autoAlpha: 0 })
|
||||
.from(this.bg, this.copyAnimation._duration, { scale: 1 }, 'frame2-=1')
|
||||
.from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1')
|
||||
.add(this.copyAnimation.play(), 'frame2');
|
||||
|
||||
;
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +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><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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>
|
||||
|
|
|
|||
|
|
@ -1,305 +1,285 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/logo-big.png",
|
||||
"images/bg.jpg",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/copy9.png",
|
||||
"images/copy10.png",
|
||||
"images/copy11.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logoBig=this.smartObject( {
|
||||
id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy9=this.smartObject( {
|
||||
id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy10=this.smartObject( {
|
||||
id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy11=this.smartObject( {
|
||||
id: "copy11", backgroundImage: "images/copy11.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", backgroundImage: "images/cta-nrm.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm2=this.smartObject( {
|
||||
id: "ctaNrm2", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr2=this.smartObject( {
|
||||
id: "ctaOvr2", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.cta2=this.smartObject( {
|
||||
id: "cta", width: 118, height: 27, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta2
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta2
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 145
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: -10, top: 145
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.copy9.set( {
|
||||
left: -10, top: 145
|
||||
}
|
||||
),
|
||||
this.copy10.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy11.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 16, top: 564
|
||||
}
|
||||
),
|
||||
this.logoBig.centerHorizontal(),
|
||||
this.logoBig.set( {
|
||||
top: 554
|
||||
}
|
||||
),
|
||||
this.tag.centerHorizontal(),
|
||||
this.tag.set( {
|
||||
top: 510
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 169, top: 557
|
||||
}
|
||||
),
|
||||
this.ctaOvr2.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.cta2.set( {
|
||||
left: 14, top: 153
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
right: 0, bottom: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/logo-big.png',
|
||||
'images/bg.jpg',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/copy9.png',
|
||||
'images/copy10.png',
|
||||
'images/copy11.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
// 'images/vig.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta2.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
left: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logoBig = this.smartObject({
|
||||
id: 'LOGO-BIG',
|
||||
backgroundImage: 'images/logo-big.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy9 = this.smartObject({
|
||||
id: 'copy9',
|
||||
backgroundImage: 'images/copy9.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy10 = this.smartObject({
|
||||
id: 'copy10',
|
||||
backgroundImage: 'images/copy10.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy11 = this.smartObject({
|
||||
id: 'copy11',
|
||||
backgroundImage: 'images/copy11.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm2 = this.smartObject({
|
||||
id: 'ctaNrm2',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr2 = this.smartObject({
|
||||
id: 'ctaOvr2',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.cta2 = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 118,
|
||||
height: 27,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta2
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta2
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 65 });
|
||||
this.copy2.set({ left: -10, top: 105 });
|
||||
this.copy3.set({ left: -10, top: 145 });
|
||||
this.copy4.set({ left: -10, top: 65 });
|
||||
this.copy5.set({ left: -10, top: 105 });
|
||||
this.copy6.set({ left: -10, top: 145 });
|
||||
this.copy7.set({ left: -10, top: 65 });
|
||||
this.copy8.set({ left: -10, top: 105 });
|
||||
this.copy9.set({ left: -10, top: 145 });
|
||||
this.copy10.set({ left: -10, top: 65 });
|
||||
this.copy11.set({ left: -10, top: 105 });
|
||||
this.logo.set({ left: 16, top: 564 });
|
||||
this.logoBig.centerHorizontal();
|
||||
this.logoBig.set({ top: 554 });
|
||||
this.tag.centerHorizontal();
|
||||
this.tag.set({ top: 510 });
|
||||
this.cta.set({ left: 169, top: 557 });
|
||||
this.ctaOvr2.set({ autoAlpha: 0 });
|
||||
this.cta2.set({ left: 14, top: 153 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.bg.set({ right: 0, bottom: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
// this.timeLineCTA = new TimelineMax({ paused: true })
|
||||
// .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta');
|
||||
|
||||
this.cta2.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta2.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeIn }, '+=3')
|
||||
.staggerFrom([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeIn }, '=+3')
|
||||
.staggerFrom([this.copy7, this.copy8, this.copy9], 0.4, { x: -300, ease: Power1.easeOut }, 0.1, 'cta')
|
||||
// .from(this.cta, 1, { autoAlpha: 0 }, 'cta')
|
||||
.to([this.copy7, this.copy8, this.copy9], 0.4, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.to([this.logo, this.cta], 0.4, { autoAlpha: 0 }, 'swap')
|
||||
.from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=0.5')
|
||||
// .staggerFrom([this.copy10, this.copy11, this.cta2], 0.4, { autoAlpha: 0 }, 0.4, 'swap+=1')
|
||||
.staggerFrom([this.copy10, this.copy11], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.from(this.cta2, 0.4, { autoAlpha: 0 })
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], 0.5, { autoAlpha: 0 })
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta2.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr2, 1, {
|
||||
autoAlpha: 1
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr2, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2, this.copy3], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy1, this.copy2, this.copy3], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "+=3").staggerFrom([this.copy4, this.copy5, this.copy6], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy4, this.copy5, this.copy6], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+3").staggerFrom([this.copy7, this.copy8, this.copy9], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "cta").to([this.copy7, this.copy8, this.copy9], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").to([this.logo, this.cta], .4, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap").from([this.logoBig, this.tag], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap+=0.5").staggerFrom([this.copy10, this.copy11], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).from(this.cta2, .4, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
paused: !1, repeat: 1, repeatDelay: 1
|
||||
}
|
||||
).add(this.copyAnimation.play(), "frame2+=1").from( 13, {
|
||||
x: 26, easing: Linear.easeNone, rotation: .01
|
||||
}
|
||||
, "frame2+=1"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
});
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
console.log(t),
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
|
||||
;
|
||||
this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1})
|
||||
.add(this.copyAnimation.play(), 'frame2+=1')
|
||||
.from(this.bg, 13, { x: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2+=1');
|
||||
|
||||
this.timeline.timeScale(1);
|
||||
};
|
||||
|
||||
Banner.prototype.addEventListeners = function (_this) {
|
||||
// var _this = this;
|
||||
console.log(_this);
|
||||
|
||||
_this.banner.addEventListener( 'mouseover', rollover );
|
||||
_this.banner.addEventListener( 'mouseout', rollout );
|
||||
|
||||
function rollover() {
|
||||
_this.timeLineCTA.play();
|
||||
}
|
||||
|
||||
function rollout() {
|
||||
_this.timeLineCTA.reverse();
|
||||
_this.timeLineCTA.timeScale(2);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,22 @@
|
|||
<!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><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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-efficiency-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 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>
|
||||
|
|
|
|||
|
|
@ -1,271 +1,261 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/bg.jpg",
|
||||
"images/bg2.png",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/copy9.png",
|
||||
"images/copy10.png",
|
||||
"images/copy11.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png",
|
||||
"images/vig.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.vig=this.smartObject( {
|
||||
id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.bg2=this.smartObject( {
|
||||
id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy9=this.smartObject( {
|
||||
id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy10=this.smartObject( {
|
||||
id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy11=this.smartObject( {
|
||||
id: "copy11", backgroundImage: "images/copy11.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", width: 75, height: 18, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy9.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy10.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy11.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.vig.set( {
|
||||
bottom: 0
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 150, top: 216
|
||||
}
|
||||
),
|
||||
this.tag.set( {
|
||||
left: 150, top: 192
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 10, top: 216
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
left: -51, bottom: -48, scale: 1
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/bg.jpg',
|
||||
'images/bg2.png',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/copy9.png',
|
||||
'images/copy10.png',
|
||||
'images/copy11.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
'images/vig.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.vig = this.smartObject({
|
||||
id: 'vig',
|
||||
backgroundImage: 'images/vig.png',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.bg2 = this.smartObject({
|
||||
id: 'bg2',
|
||||
backgroundImage: 'images/bg2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy9 = this.smartObject({
|
||||
id: 'copy9',
|
||||
backgroundImage: 'images/copy9.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy10 = this.smartObject({
|
||||
id: 'copy10',
|
||||
backgroundImage: 'images/copy10.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy11 = this.smartObject({
|
||||
id: 'copy11',
|
||||
backgroundImage: 'images/copy11.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 75,
|
||||
height: 18,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 20 });
|
||||
this.copy2.set({ left: -10, top: 60 });
|
||||
this.copy3.set({ left: -10, top: 100 });
|
||||
this.copy4.set({ left: -10, top: 20 });
|
||||
this.copy5.set({ left: -10, top: 60 });
|
||||
this.copy6.set({ left: -10, top: 100 });
|
||||
this.copy7.set({ left: -10, top: 20 });
|
||||
this.copy8.set({ left: -10, top: 60 });
|
||||
this.copy9.set({ left: -10, top: 20 });
|
||||
this.copy10.set({ left: -10, top: 60 });
|
||||
this.copy11.set({ left: -10, top: 100 });
|
||||
this.vig.set({ bottom: 0 });
|
||||
this.logo.set({ left: 150, top: 216 });
|
||||
this.tag.set({ left: 150, top: 192 });
|
||||
this.cta.set({ left: 10, top: 216 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.bg.set({ left: -51, bottom: -48, scale: 1 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
// this.timeLineCTA = new TimelineMax({ paused: true })
|
||||
// .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta');
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.staggerFrom([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'cta')
|
||||
// .from(this.cta, 1, { autoAlpha: 0 }, 'cta')
|
||||
.to([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.staggerFrom([this.copy9, this.copy10, this.copy11], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.from(this.tag, 0.5, { autoAlpha: 0 })
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], 0.5, { autoAlpha: 0 })
|
||||
.to(this.bg2, 0.5, { autoAlpha: 1 });
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy4, this.copy5, this.copy6], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy4, this.copy5, this.copy6], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").staggerFrom([this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "cta").to([this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").staggerFrom([this.copy9, this.copy10, this.copy11], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).from(this.tag, .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
repeat: 1, repeatDelay: 2
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2, this.copy3], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "frame1+=0.5").to([this.copy1, this.copy2, this.copy3], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "frame1+=3").to(this.bg2, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
, "frame2-=1").add(this.copyAnimation.play(), "frame2"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
this.timeline = new TimelineMax({repeat: 1, repeatDelay: 2})
|
||||
.staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5')
|
||||
.to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3')
|
||||
.to(this.bg2, 1, { autoAlpha: 0 })
|
||||
.from(this.bg, this.copyAnimation._duration, { scale: 1.3 }, 'frame2-=1')
|
||||
.from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1')
|
||||
.add(this.copyAnimation.play(), 'frame2');
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
console.log(t),
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
this.timeline.timeScale(1);
|
||||
};
|
||||
|
||||
;
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,22 @@
|
|||
<!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-efficiency-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 type="text/javascript">var banner = new Banner();</script>
|
||||
|
||||
<link rel="stylesheet" href="styles/style.css"></head><body><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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-efficiency-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 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>
|
||||
|
|
|
|||
|
|
@ -1,313 +1,287 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/logo-big.png",
|
||||
"images/bg.jpg",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/copy9.png",
|
||||
"images/copy10.png",
|
||||
"images/copy11.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png",
|
||||
"images/vig.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.vig=this.smartObject( {
|
||||
id: "vig", backgroundImage: "images/vig.png", top: "none", left: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logoBig=this.smartObject( {
|
||||
id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy9=this.smartObject( {
|
||||
id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy10=this.smartObject( {
|
||||
id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy11=this.smartObject( {
|
||||
id: "copy11", backgroundImage: "images/copy11.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", backgroundImage: "images/cta-nrm.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm2=this.smartObject( {
|
||||
id: "ctaNrm2", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr2=this.smartObject( {
|
||||
id: "ctaOvr2", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.cta2=this.smartObject( {
|
||||
id: "cta", width: 118, height: 27, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta2
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta2
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 45
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 86
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 126
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 45
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 86
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: -10, top: 126
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 45
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 86
|
||||
}
|
||||
),
|
||||
this.copy9.set( {
|
||||
left: -10, top: 45
|
||||
}
|
||||
),
|
||||
this.copy10.set( {
|
||||
left: -10, top: 86
|
||||
}
|
||||
),
|
||||
this.copy11.set( {
|
||||
left: -10, top: 126
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 16, top: 564
|
||||
}
|
||||
),
|
||||
this.logoBig.centerHorizontal(),
|
||||
this.logoBig.set( {
|
||||
top: 554
|
||||
}
|
||||
),
|
||||
this.tag.centerHorizontal(),
|
||||
this.tag.set( {
|
||||
top: 510
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 169, top: 557
|
||||
}
|
||||
),
|
||||
this.ctaOvr2.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.cta2.set( {
|
||||
left: 14, top: 173
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
right: 0, bottom: 0
|
||||
}
|
||||
),
|
||||
this.vig.set( {
|
||||
right: 0, bottom: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/logo-big.png',
|
||||
'images/bg.jpg',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/copy9.png',
|
||||
'images/copy10.png',
|
||||
'images/copy11.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
'images/vig.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta2.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
left: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.vig = this.smartObject({
|
||||
id: 'vig',
|
||||
backgroundImage: 'images/vig.png',
|
||||
top: 'none',
|
||||
left: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logoBig = this.smartObject({
|
||||
id: 'LOGO-BIG',
|
||||
backgroundImage: 'images/logo-big.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy9 = this.smartObject({
|
||||
id: 'copy9',
|
||||
backgroundImage: 'images/copy9.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy10 = this.smartObject({
|
||||
id: 'copy10',
|
||||
backgroundImage: 'images/copy10.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy11 = this.smartObject({
|
||||
id: 'copy11',
|
||||
backgroundImage: 'images/copy11.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm2 = this.smartObject({
|
||||
id: 'ctaNrm2',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr2 = this.smartObject({
|
||||
id: 'ctaOvr2',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.cta2 = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 118,
|
||||
height: 27,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta2
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta2
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 45 });
|
||||
this.copy2.set({ left: -10, top: 86 });
|
||||
this.copy3.set({ left: -10, top: 126 });
|
||||
this.copy4.set({ left: -10, top: 45 });
|
||||
this.copy5.set({ left: -10, top: 86 });
|
||||
this.copy6.set({ left: -10, top: 126 });
|
||||
this.copy7.set({ left: -10, top: 45 });
|
||||
this.copy8.set({ left: -10, top: 86 });
|
||||
this.copy9.set({ left: -10, top: 45 });
|
||||
this.copy10.set({ left: -10, top: 86 });
|
||||
this.copy11.set({ left: -10, top: 126 });
|
||||
this.logo.set({ left: 16, top: 564 });
|
||||
this.logoBig.centerHorizontal();
|
||||
this.logoBig.set({ top: 554 });
|
||||
this.tag.centerHorizontal();
|
||||
this.tag.set({ top: 510 });
|
||||
this.cta.set({ left: 169, top: 557 });
|
||||
this.ctaOvr2.set({ autoAlpha: 0 });
|
||||
this.cta2.set({ left: 14, top: 173 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.bg.set({ right: 0, bottom: 0});
|
||||
this.vig.set({ right: 0, bottom: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
this.cta2.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta2.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeIn }, '+=3')
|
||||
.staggerFrom([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeIn }, '=+3')
|
||||
.staggerFrom([this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeOut }, 0.1, 'cta')
|
||||
.to([this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.to([this.logo, this.cta], 0.4, { autoAlpha: 0 }, 'swap')
|
||||
.from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=0.5')
|
||||
.staggerFrom([this.copy9, this.copy10, this.copy11], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.from(this.cta2, 0.4, { autoAlpha: 0 })
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], 0.5, { autoAlpha: 0 });
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta2.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr2, 1, {
|
||||
autoAlpha: 1
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr2, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2, this.copy3], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy1, this.copy2, this.copy3], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "+=3").staggerFrom([this.copy4, this.copy5, this.copy6], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy4, this.copy5, this.copy6], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+3").staggerFrom([this.copy7, this.copy8], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "cta").to([this.copy7, this.copy8], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").to([this.logo, this.cta], .4, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap").from([this.logoBig, this.tag], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap+=0.5").staggerFrom([this.copy9, this.copy10, this.copy11], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).from(this.cta2, .4, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
paused: !1, repeat: 1, repeatDelay: 1
|
||||
}
|
||||
).add(this.copyAnimation.play(), "frame2+=1").from([this.vig], 13, {
|
||||
y: 26, easing: Linear.easeNone, rotation: .01
|
||||
}
|
||||
, "frame2+=1"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
});
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
|
||||
;
|
||||
this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1})
|
||||
.add(this.copyAnimation.play(), 'frame2+=1')
|
||||
.from([this.bg, this.vig], 13, { y: 26, easing:Linear.easeNone , rotation:0.01}, 'frame2+=1');
|
||||
|
||||
this.timeline.timeScale(1);
|
||||
};
|
||||
|
||||
Banner.prototype.addEventListeners = function (_this) {
|
||||
_this.banner.addEventListener( 'mouseover', rollover );
|
||||
_this.banner.addEventListener( 'mouseout', rollout );
|
||||
|
||||
function rollover() {
|
||||
_this.timeLineCTA.play();
|
||||
}
|
||||
|
||||
function rollout() {
|
||||
_this.timeLineCTA.reverse();
|
||||
_this.timeLineCTA.timeScale(2);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,22 @@
|
|||
<!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-equinoxdesign-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 type="text/javascript">var banner = new Banner();</script>
|
||||
|
||||
<link rel="stylesheet" href="styles/style.css"></head><body><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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-equinoxdesign-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 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>
|
||||
|
|
|
|||
|
|
@ -1,264 +1,253 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/bg.jpg",
|
||||
"images/bg2.png",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/copy9.png",
|
||||
"images/copy10.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png",
|
||||
"images/vig.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.vig=this.smartObject( {
|
||||
id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.bg2=this.smartObject( {
|
||||
id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy9=this.smartObject( {
|
||||
id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy10=this.smartObject( {
|
||||
id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", width: 75, height: 18, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.copy9.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy10.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.vig.set( {
|
||||
bottom: 0
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 150, top: 216
|
||||
}
|
||||
),
|
||||
this.tag.set( {
|
||||
left: 150, top: 192
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 10, top: 216
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
left: -36, bottom: -241, scale: .85
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/bg.jpg',
|
||||
'images/bg2.png',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/copy9.png',
|
||||
'images/copy10.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
'images/vig.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.vig = this.smartObject({
|
||||
id: 'vig',
|
||||
backgroundImage: 'images/vig.png',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.bg2 = this.smartObject({
|
||||
id: 'bg2',
|
||||
backgroundImage: 'images/bg2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy9 = this.smartObject({
|
||||
id: 'copy9',
|
||||
backgroundImage: 'images/copy9.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy10 = this.smartObject({
|
||||
id: 'copy10',
|
||||
backgroundImage: 'images/copy10.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 75,
|
||||
height: 18,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 20 });
|
||||
this.copy2.set({ left: -10, top: 60 });
|
||||
this.copy3.set({ left: -10, top: 100 });
|
||||
this.copy4.set({ left: -10, top: 20 });
|
||||
this.copy5.set({ left: -10, top: 60 });
|
||||
this.copy6.set({ left: -10, top: 20 });
|
||||
this.copy7.set({ left: -10, top: 60 });
|
||||
this.copy8.set({ left: -10, top: 100 });
|
||||
this.copy9.set({ left: -10, top: 20 });
|
||||
this.copy10.set({ left: -10, top: 60 });
|
||||
this.vig.set({ bottom: 0 });
|
||||
this.logo.set({ left: 150, top: 216 });
|
||||
this.tag.set({ left: 150, top: 192 });
|
||||
this.cta.set({ left: 10, top: 216 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.bg.set({ left: -36, bottom: -241, scale: 0.85 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
// this.timeLineCTA = new TimelineMax({ paused: true })
|
||||
// .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta');
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'cta')
|
||||
// .from(this.cta, 1, { autoAlpha: 0 }, 'cta')
|
||||
.to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.staggerFrom([this.copy9, this.copy10], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.from(this.tag, 0.5, { autoAlpha: 0 })
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], 0.5, { autoAlpha: 0 })
|
||||
.to(this.bg2, 0.5, { autoAlpha: 1 });
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy4, this.copy5], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy4, this.copy5], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").staggerFrom([this.copy6, this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "cta").to([this.copy6, this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").staggerFrom([this.copy9, this.copy10], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).from(this.tag, .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).to(this.bg2, .5, {
|
||||
autoAlpha: 1
|
||||
}
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
repeat: 1, repeatDelay: 2
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2, this.copy3], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "frame1+=0.5").to([this.copy1, this.copy2, this.copy3], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "frame1+=3").to(this.bg2, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
, "frame2-=1").add(this.copyAnimation.play(), "frame2"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
this.timeline = new TimelineMax({repeat: 1, repeatDelay: 2})
|
||||
.staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5')
|
||||
.to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3')
|
||||
.to(this.bg2, 1, { autoAlpha: 0 })
|
||||
.from(this.bg, this.copyAnimation._duration, { scale: 1 }, 'frame2-=1')
|
||||
.from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1')
|
||||
.add(this.copyAnimation.play(), 'frame2');
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
console.log(t),
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
this.timeline.timeScale(1);
|
||||
};
|
||||
|
||||
;
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +1,22 @@
|
|||
<!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-equinoxdesign-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 type="text/javascript">var banner = new Banner();</script><link rel="stylesheet" href="styles/style.css"></head><body><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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-equinoxdesign-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 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>
|
||||
|
|
|
|||
|
|
@ -1,287 +1,265 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/logo-big.png",
|
||||
"images/bg.jpg",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/copy9.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logoBig=this.smartObject( {
|
||||
id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy9=this.smartObject( {
|
||||
id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", backgroundImage: "images/cta-nrm.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm2=this.smartObject( {
|
||||
id: "ctaNrm2", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr2=this.smartObject( {
|
||||
id: "ctaOvr2", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.cta2=this.smartObject( {
|
||||
id: "cta", width: 118, height: 27, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta2
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta2
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 145
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 145
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy9.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 16, top: 564
|
||||
}
|
||||
),
|
||||
this.logoBig.centerHorizontal(),
|
||||
this.logoBig.set( {
|
||||
top: 554
|
||||
}
|
||||
),
|
||||
this.tag.centerHorizontal(),
|
||||
this.tag.set( {
|
||||
top: 510
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 169, top: 557
|
||||
}
|
||||
),
|
||||
this.ctaOvr2.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.cta2.set( {
|
||||
left: 14, top: 153
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
right: 0, bottom: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/logo-big.png',
|
||||
'images/bg.jpg',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/copy9.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
// 'images/vig.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta2.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
left: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logoBig = this.smartObject({
|
||||
id: 'LOGO-BIG',
|
||||
backgroundImage: 'images/logo-big.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy9 = this.smartObject({
|
||||
id: 'copy9',
|
||||
backgroundImage: 'images/copy9.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm2 = this.smartObject({
|
||||
id: 'ctaNrm2',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr2 = this.smartObject({
|
||||
id: 'ctaOvr2',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.cta2 = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 118,
|
||||
height: 27,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta2
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta2
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 65 });
|
||||
this.copy2.set({ left: -10, top: 105 });
|
||||
this.copy3.set({ left: -10, top: 145 });
|
||||
this.copy4.set({ left: -10, top: 65 });
|
||||
this.copy5.set({ left: -10, top: 65 });
|
||||
this.copy6.set({ left: -10, top: 105 });
|
||||
this.copy7.set({ left: -10, top: 145 });
|
||||
this.copy8.set({ left: -10, top: 65 });
|
||||
this.copy9.set({ left: -10, top: 105 });
|
||||
this.logo.set({ left: 16, top: 564 });
|
||||
this.logoBig.centerHorizontal();
|
||||
this.logoBig.set({ top: 554 });
|
||||
this.tag.centerHorizontal();
|
||||
this.tag.set({ top: 510 });
|
||||
this.cta.set({ left: 169, top: 557 });
|
||||
this.ctaOvr2.set({ autoAlpha: 0 });
|
||||
this.cta2.set({ left: 14, top: 153 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.bg.set({ right: 0, bottom: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
this.cta2.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta2.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeIn }, '+=3')
|
||||
.from(this.copy4, 0.4, { x: -300, ease: Power1.easeOut })
|
||||
.to(this.copy4, 0.4, { x: -300, ease: Power1.easeIn }, '=+3')
|
||||
.staggerFrom([this.copy5, this.copy6, this.copy7], 0.4, { x: -300, ease: Power1.easeOut }, 0.1, 'cta')
|
||||
.to([this.copy5, this.copy6, this.copy7], 0.4, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.to([this.logo, this.cta], 0.4, { autoAlpha: 0 }, 'swap')
|
||||
.from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=0.5')
|
||||
.staggerFrom([this.copy8, this.copy9], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.from(this.cta2, 0.4, { autoAlpha: 0 })
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], 0.5, { autoAlpha: 0 })
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta2.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr2, 1, {
|
||||
autoAlpha: 1
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr2, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2, this.copy3], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy1, this.copy2, this.copy3], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "+=3").from(this.copy4, .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
).to(this.copy4, .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+3").staggerFrom([this.copy5, this.copy6, this.copy7], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "cta").to([this.copy5, this.copy6, this.copy7], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").to([this.logo, this.cta], .4, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap").from([this.logoBig, this.tag], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap+=0.5").staggerFrom([this.copy8, this.copy9], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).from(this.cta2, .4, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
paused: !1, repeat: 1, repeatDelay: 1
|
||||
}
|
||||
).add(this.copyAnimation.play(), "frame2+=1").from( 13, {
|
||||
x: 26, easing: Linear.easeNone, rotation: .01
|
||||
}
|
||||
, "frame2+=1"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
});
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
console.log(t),
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
|
||||
;
|
||||
this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1})
|
||||
.add(this.copyAnimation.play(), 'frame2+=1')
|
||||
.from(this.bg, 13, { x: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2+=1');
|
||||
|
||||
this.timeline.timeScale(1);
|
||||
};
|
||||
|
||||
Banner.prototype.addEventListeners = function (_this) {
|
||||
// var _this = this;
|
||||
console.log(_this);
|
||||
|
||||
_this.banner.addEventListener( 'mouseover', rollover );
|
||||
_this.banner.addEventListener( 'mouseout', rollout );
|
||||
|
||||
function rollover() {
|
||||
_this.timeLineCTA.play();
|
||||
}
|
||||
|
||||
function rollout() {
|
||||
_this.timeLineCTA.reverse();
|
||||
_this.timeLineCTA.timeScale(2);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +1,22 @@
|
|||
<!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-equinoxrevolution-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 type="text/javascript">var banner = new Banner();</script><link rel="stylesheet" href="styles/style.css"></head><body><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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-equinoxrevolution-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 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>
|
||||
|
|
|
|||
|
|
@ -1,264 +1,253 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/bg.jpg",
|
||||
"images/bg2.png",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/copy9.png",
|
||||
"images/copy10.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png",
|
||||
"images/vig.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.vig=this.smartObject( {
|
||||
id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.bg2=this.smartObject( {
|
||||
id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy9=this.smartObject( {
|
||||
id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy10=this.smartObject( {
|
||||
id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", width: 75, height: 18, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.copy9.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy10.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.vig.set( {
|
||||
bottom: 0
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 150, top: 216
|
||||
}
|
||||
),
|
||||
this.tag.set( {
|
||||
left: 150, top: 192
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 10, top: 216
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
left: -61, bottom: -23, scale: .9
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/bg.jpg',
|
||||
'images/bg2.png',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/copy9.png',
|
||||
'images/copy10.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
'images/vig.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.vig = this.smartObject({
|
||||
id: 'vig',
|
||||
backgroundImage: 'images/vig.png',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.bg2 = this.smartObject({
|
||||
id: 'bg2',
|
||||
backgroundImage: 'images/bg2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy9 = this.smartObject({
|
||||
id: 'copy9',
|
||||
backgroundImage: 'images/copy9.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy10 = this.smartObject({
|
||||
id: 'copy10',
|
||||
backgroundImage: 'images/copy10.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 75,
|
||||
height: 18,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 20 });
|
||||
this.copy2.set({ left: -10, top: 60 });
|
||||
this.copy3.set({ left: -10, top: 100 });
|
||||
this.copy4.set({ left: -10, top: 20 });
|
||||
this.copy5.set({ left: -10, top: 60 });
|
||||
this.copy6.set({ left: -10, top: 20 });
|
||||
this.copy7.set({ left: -10, top: 60 });
|
||||
this.copy8.set({ left: -10, top: 100 });
|
||||
this.copy9.set({ left: -10, top: 20 });
|
||||
this.copy10.set({ left: -10, top: 60 });
|
||||
this.vig.set({ bottom: 0 });
|
||||
this.logo.set({ left: 150, top: 216 });
|
||||
this.tag.set({ left: 150, top: 192 });
|
||||
this.cta.set({ left: 10, top: 216 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.bg.set({ left: -61, bottom: -23, scale: 0.9 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
// this.timeLineCTA = new TimelineMax({ paused: true })
|
||||
// .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta');
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'cta')
|
||||
// .from(this.cta, 1, { autoAlpha: 0 }, 'cta')
|
||||
.to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.staggerFrom([this.copy9, this.copy10], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.from(this.tag, 0.5, { autoAlpha: 0 })
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], 0.5, { autoAlpha: 0 })
|
||||
.to(this.bg2, 0.5, { autoAlpha: 1 });
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy4, this.copy5], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy4, this.copy5], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").staggerFrom([this.copy6, this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "cta").to([this.copy6, this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").staggerFrom([this.copy9, this.copy10], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).from(this.tag, .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).to(this.bg2, .5, {
|
||||
autoAlpha: 1
|
||||
}
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
repeat: 1, repeatDelay: 2
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2, this.copy3], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "frame1+=0.5").to([this.copy1, this.copy2, this.copy3], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "frame1+=3").to(this.bg2, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
, "frame2-=1").add(this.copyAnimation.play(), "frame2"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
this.timeline = new TimelineMax({repeat: 1, repeatDelay: 2})
|
||||
.staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5')
|
||||
.to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3')
|
||||
.to(this.bg2, 1, { autoAlpha: 0 })
|
||||
.from(this.bg, this.copyAnimation._duration, { scale: 1.3 }, 'frame2-=1')
|
||||
.from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1')
|
||||
.add(this.copyAnimation.play(), 'frame2');
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
console.log(t),
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
this.timeline.timeScale(1);
|
||||
};
|
||||
|
||||
;
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +1,22 @@
|
|||
<!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-equinoxrevolution-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 type="text/javascript">var banner = new Banner();</script><link rel="stylesheet" href="styles/style.css"></head><body><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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-equinoxrevolution-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 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>
|
||||
|
|
|
|||
|
|
@ -1,296 +1,272 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/logo-big.png",
|
||||
"images/bg.jpg",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/copy9.png",
|
||||
"images/copy10.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logoBig=this.smartObject( {
|
||||
id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy9=this.smartObject( {
|
||||
id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy10=this.smartObject( {
|
||||
id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", backgroundImage: "images/cta-nrm.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm2=this.smartObject( {
|
||||
id: "ctaNrm2", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr2=this.smartObject( {
|
||||
id: "ctaOvr2", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.cta2=this.smartObject( {
|
||||
id: "cta", width: 118, height: 27, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta2
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta2
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 145
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: 23, top: 80
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 145
|
||||
}
|
||||
),
|
||||
this.copy9.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy10.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 16, top: 564
|
||||
}
|
||||
),
|
||||
this.logoBig.centerHorizontal(),
|
||||
this.logoBig.set( {
|
||||
top: 554
|
||||
}
|
||||
),
|
||||
this.tag.centerHorizontal(),
|
||||
this.tag.set( {
|
||||
top: 510
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 169, top: 557
|
||||
}
|
||||
),
|
||||
this.ctaOvr2.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.cta2.set( {
|
||||
left: 14, top: 153
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
right: 0, bottom: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/logo-big.png',
|
||||
'images/bg.jpg',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/copy9.png',
|
||||
'images/copy10.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta2.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
left: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logoBig = this.smartObject({
|
||||
id: 'LOGO-BIG',
|
||||
backgroundImage: 'images/logo-big.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy9 = this.smartObject({
|
||||
id: 'copy9',
|
||||
backgroundImage: 'images/copy9.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy10 = this.smartObject({
|
||||
id: 'copy10',
|
||||
backgroundImage: 'images/copy10.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm2 = this.smartObject({
|
||||
id: 'ctaNrm2',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr2 = this.smartObject({
|
||||
id: 'ctaOvr2',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.cta2 = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 118,
|
||||
height: 27,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta2
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta2
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 65 });
|
||||
this.copy2.set({ left: -10, top: 105 });
|
||||
this.copy3.set({ left: -10, top: 145 });
|
||||
this.copy4.set({ left: -10, top: 65 });
|
||||
this.copy5.set({ left: -10, top: 105 });
|
||||
this.copy6.set({ left: 23, top: 80 });
|
||||
this.copy7.set({ left: -10, top: 105 });
|
||||
this.copy8.set({ left: -10, top: 145 });
|
||||
this.copy9.set({ left: -10, top: 65 });
|
||||
this.copy10.set({ left: -10, top: 105 });
|
||||
this.logo.set({ left: 16, top: 564 });
|
||||
this.logoBig.centerHorizontal();
|
||||
this.logoBig.set({ top: 554 });
|
||||
this.tag.centerHorizontal();
|
||||
this.tag.set({ top: 510 });
|
||||
this.cta.set({ left: 169, top: 557 });
|
||||
this.ctaOvr2.set({ autoAlpha: 0 });
|
||||
this.cta2.set({ left: 14, top: 153 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.bg.set({ right: 0, bottom: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
this.cta2.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta2.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeIn }, '+=3')
|
||||
.staggerFrom([this.copy4, this.copy5], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy4, this.copy5], 0.4, { x: -300, ease: Power1.easeIn }, '=+3')
|
||||
.staggerFrom([this.copy6, this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeOut }, 0.1, 'cta')
|
||||
.to([this.copy6, this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.to([this.logo, this.cta], 0.4, { autoAlpha: 0 }, 'swap')
|
||||
.from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=0.5')
|
||||
.staggerFrom([this.copy9, this.copy10], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.from(this.cta2, 0.4, { autoAlpha: 0 })
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], 0.5, { autoAlpha: 0 })
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta2.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr2, 1, {
|
||||
autoAlpha: 1
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr2, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2, this.copy3], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy1, this.copy2, this.copy3], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "+=3").staggerFrom([this.copy4, this.copy5], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy4, this.copy5], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+3").staggerFrom([this.copy6, this.copy7, this.copy8], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "cta").to([this.copy6, this.copy7, this.copy8], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").to([this.logo, this.cta], .4, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap").from([this.logoBig, this.tag], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap+=0.5").staggerFrom([this.copy9, this.copy10], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).from(this.cta2, .4, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
paused: !1, repeat: 1, repeatDelay: 1
|
||||
}
|
||||
).add(this.copyAnimation.play(), "frame2+=1").from(13, {
|
||||
x: 26, easing: Linear.easeNone, rotation: .01
|
||||
}
|
||||
, "frame2+=1"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
});
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
console.log(t),
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
|
||||
;
|
||||
this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1})
|
||||
.add(this.copyAnimation.play(), 'frame2+=1')
|
||||
.from(this.bg, 13, { x: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2+=1');
|
||||
|
||||
this.timeline.timeScale(1);
|
||||
};
|
||||
|
||||
Banner.prototype.addEventListeners = function (_this) {
|
||||
// var _this = this;
|
||||
console.log(_this);
|
||||
|
||||
_this.banner.addEventListener( 'mouseover', rollover );
|
||||
_this.banner.addEventListener( 'mouseout', rollout );
|
||||
|
||||
function rollover() {
|
||||
_this.timeLineCTA.play();
|
||||
}
|
||||
|
||||
function rollout() {
|
||||
_this.timeLineCTA.reverse();
|
||||
_this.timeLineCTA.timeScale(2);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +1,22 @@
|
|||
<!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-savings-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 type="text/javascript">var banner = new Banner();</script><link rel="stylesheet" href="styles/style.css"></head><body><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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-savings-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 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>
|
||||
|
|
|
|||
|
|
@ -1,263 +1,253 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/bg.jpg",
|
||||
"images/bg2.png",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/copy9.png",
|
||||
"images/copy10.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png",
|
||||
"images/vig.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.vig=this.smartObject( {
|
||||
id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.bg2=this.smartObject( {
|
||||
id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy9=this.smartObject( {
|
||||
id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy10=this.smartObject( {
|
||||
id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", width: 75, height: 18, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy9.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy10.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.vig.set( {
|
||||
bottom: 0
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 150, top: 216
|
||||
}
|
||||
),
|
||||
this.tag.set( {
|
||||
left: 150, top: 192
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 10, top: 216
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
left: -51, bottom: -42, scale: .75
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/bg.jpg',
|
||||
'images/bg2.png',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/copy9.png',
|
||||
'images/copy10.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
'images/vig.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.vig = this.smartObject({
|
||||
id: 'vig',
|
||||
backgroundImage: 'images/vig.png',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.bg2 = this.smartObject({
|
||||
id: 'bg2',
|
||||
backgroundImage: 'images/bg2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy9 = this.smartObject({
|
||||
id: 'copy9',
|
||||
backgroundImage: 'images/copy9.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy10 = this.smartObject({
|
||||
id: 'copy10',
|
||||
backgroundImage: 'images/copy10.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 75,
|
||||
height: 18,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 20 });
|
||||
this.copy2.set({ left: -10, top: 60 });
|
||||
this.copy3.set({ left: -10, top: 100 });
|
||||
this.copy4.set({ left: -10, top: 20 });
|
||||
this.copy5.set({ left: -10, top: 60 });
|
||||
this.copy6.set({ left: -10, top: 100 });
|
||||
this.copy7.set({ left: -10, top: 20 });
|
||||
this.copy8.set({ left: -10, top: 60 });
|
||||
this.copy9.set({ left: -10, top: 20 });
|
||||
this.copy10.set({ left: -10, top: 60 });
|
||||
this.vig.set({ bottom: 0 });
|
||||
this.logo.set({ left: 150, top: 216 });
|
||||
this.tag.set({ left: 150, top: 192 });
|
||||
this.cta.set({ left: 10, top: 216 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.bg.set({ left: -51, bottom: -42, scale: 0.75 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
// this.timeLineCTA = new TimelineMax({ paused: true })
|
||||
// .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta');
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy4, this.copy5, this.copy6], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.staggerFrom([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'cta')
|
||||
// .from(this.cta, 1, { autoAlpha: 0 }, 'cta')
|
||||
.to([this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.staggerFrom([this.copy9, this.copy10], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.from(this.tag, 0.5, { autoAlpha: 0 })
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], 0.5, { autoAlpha: 0 })
|
||||
.to(this.bg2, 0.5, { autoAlpha: 1 });
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy4, this.copy5, this.copy6], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy4, this.copy5, this.copy6], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").staggerFrom([this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "cta").to([this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").staggerFrom([this.copy9, this.copy10], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).from(this.tag, .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.tag, this.cta], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).to(this.bg2, .5, {
|
||||
autoAlpha: 1
|
||||
}
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
repeat: 1, repeatDelay: 2
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2, this.copy3], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "frame1+=0.5").to([this.copy1, this.copy2, this.copy3], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "frame1+=3").to(this.bg2, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
});
|
||||
|
||||
, "frame2-=1").add(this.copyAnimation.play(), "frame2"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
console.log(t),
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
this.timeline = new TimelineMax({repeat: 1, repeatDelay: 2})
|
||||
.staggerFrom([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5')
|
||||
.to([this.copy1, this.copy2, this.copy3], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3')
|
||||
.to(this.bg2, 1, { autoAlpha: 0 })
|
||||
.from(this.bg, this.copyAnimation._duration, { scale: 1 }, 'frame2-=1')
|
||||
.from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1')
|
||||
.add(this.copyAnimation.play(), 'frame2');
|
||||
|
||||
;
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +1,22 @@
|
|||
<!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-savings-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 type="text/javascript">var banner = new Banner();</script><link rel="stylesheet" href="styles/style.css"></head><body><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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-savings-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 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>
|
||||
|
|
|
|||
|
|
@ -1,305 +1,282 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/logo-big.png",
|
||||
"images/bg.jpg",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/copy9.png",
|
||||
"images/copy10.png",
|
||||
"images/copy11.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logoBig=this.smartObject( {
|
||||
id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy9=this.smartObject( {
|
||||
id: "copy9", backgroundImage: "images/copy9.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy10=this.smartObject( {
|
||||
id: "copy10", backgroundImage: "images/copy10.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy11=this.smartObject( {
|
||||
id: "copy11", backgroundImage: "images/copy11.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", backgroundImage: "images/cta-nrm.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm2=this.smartObject( {
|
||||
id: "ctaNrm2", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr2=this.smartObject( {
|
||||
id: "ctaOvr2", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.cta2=this.smartObject( {
|
||||
id: "cta", width: 118, height: 27, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta2
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta2
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 25
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 25
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 25
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy9.set( {
|
||||
left: -10, top: 25
|
||||
}
|
||||
),
|
||||
this.copy10.set( {
|
||||
left: -10, top: 65
|
||||
}
|
||||
),
|
||||
this.copy11.set( {
|
||||
left: -10, top: 105
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 16, top: 564
|
||||
}
|
||||
),
|
||||
this.logoBig.centerHorizontal(),
|
||||
this.logoBig.set( {
|
||||
top: 554
|
||||
}
|
||||
),
|
||||
this.tag.centerHorizontal(),
|
||||
this.tag.set( {
|
||||
top: 510
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 169, top: 557
|
||||
}
|
||||
),
|
||||
this.ctaOvr2.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.cta2.set( {
|
||||
left: 14, top: 149
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
right: 0, bottom: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/logo-big.png',
|
||||
'images/bg.jpg',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/copy9.png',
|
||||
'images/copy10.png',
|
||||
'images/copy11.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta2.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
left: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logoBig = this.smartObject({
|
||||
id: 'LOGO-BIG',
|
||||
backgroundImage: 'images/logo-big.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy9 = this.smartObject({
|
||||
id: 'copy9',
|
||||
backgroundImage: 'images/copy9.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy10 = this.smartObject({
|
||||
id: 'copy10',
|
||||
backgroundImage: 'images/copy10.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy11 = this.smartObject({
|
||||
id: 'copy11',
|
||||
backgroundImage: 'images/copy11.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm2 = this.smartObject({
|
||||
id: 'ctaNrm2',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr2 = this.smartObject({
|
||||
id: 'ctaOvr2',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.cta2 = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 118,
|
||||
height: 27,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta2
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta2
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 25 });
|
||||
this.copy2.set({ left: -10, top: 65 });
|
||||
this.copy3.set({ left: -10, top: 105 });
|
||||
this.copy4.set({ left: -10, top: 25 });
|
||||
this.copy5.set({ left: -10, top: 65 });
|
||||
this.copy6.set({ left: -10, top: 105 });
|
||||
this.copy7.set({ left: -10, top: 25 });
|
||||
this.copy8.set({ left: -10, top: 65 });
|
||||
this.copy9.set({ left: -10, top: 25 });
|
||||
this.copy10.set({ left: -10, top: 65 });
|
||||
this.copy11.set({ left: -10, top: 105 });
|
||||
this.logo.set({ left: 16, top: 564 });
|
||||
this.logoBig.centerHorizontal();
|
||||
this.logoBig.set({ top: 554 });
|
||||
this.tag.centerHorizontal();
|
||||
this.tag.set({ top: 510 });
|
||||
this.cta.set({ left: 169, top: 557 });
|
||||
this.ctaOvr2.set({ autoAlpha: 0 });
|
||||
this.cta2.set({ left: 14, top: 149 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.bg.set({ right: 0, bottom: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
this.cta2.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta2.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr2, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy1, this.copy2, this.copy3], 0.4, { x: -300, ease: Power1.easeIn }, '+=3')
|
||||
.staggerFrom([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy4, this.copy5, this.copy6], 0.4, { x: -300, ease: Power1.easeIn }, '=+3')
|
||||
.staggerFrom([this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeOut }, 0.1, 'cta')
|
||||
// .from(this.cta, 1, { autoAlpha: 0 }, 'cta')
|
||||
.to([this.copy7, this.copy8], 0.4, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.to([this.logo, this.cta], 0.4, { autoAlpha: 0 }, 'swap')
|
||||
.from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=0.5')
|
||||
// .staggerFrom([this.copy10, this.copy11, this.cta2], 0.4, { autoAlpha: 0 }, 0.4, 'swap+=1')
|
||||
.staggerFrom([this.copy9, this.copy10, this.copy11], 0.4, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.from(this.cta2, 0.4, { autoAlpha: 0 })
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.copy9, this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], 0.5, { autoAlpha: 0 })
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta2.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr2, 1, {
|
||||
autoAlpha: 1
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr2, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2, this.copy3], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy1, this.copy2, this.copy3], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "+=3").staggerFrom([this.copy4, this.copy5, this.copy6], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy4, this.copy5, this.copy6], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+3").staggerFrom([this.copy7, this.copy8], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "cta").to([this.copy7, this.copy8], .4, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").to([this.logo, this.cta], .4, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap").from([this.logoBig, this.tag], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap+=0.5").staggerFrom([this.copy9, this.copy10, this.copy11], .4, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).from(this.cta2, .4, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.copy9, this.copy10, this.copy11, this.logoBig, this.tag, this.cta2], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
paused: !1, repeat: 1, repeatDelay: 1
|
||||
}
|
||||
).add(this.copyAnimation.play(), "frame2+=1").from(13, {
|
||||
x: 26, easing: Linear.easeNone, rotation: .01
|
||||
}
|
||||
, "frame2+=1"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
});
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
console.log(t),
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
|
||||
;
|
||||
this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1})
|
||||
.add(this.copyAnimation.play(), 'frame2+=1')
|
||||
.from(this.bg, 13, { x: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2+=1');
|
||||
|
||||
this.timeline.timeScale(1);
|
||||
};
|
||||
|
||||
Banner.prototype.addEventListeners = function (_this) {
|
||||
// var _this = this;
|
||||
console.log(_this);
|
||||
|
||||
_this.banner.addEventListener( 'mouseover', rollover );
|
||||
_this.banner.addEventListener( 'mouseout', rollout );
|
||||
|
||||
function rollover() {
|
||||
_this.timeLineCTA.play();
|
||||
}
|
||||
|
||||
function rollout() {
|
||||
_this.timeLineCTA.reverse();
|
||||
_this.timeLineCTA.timeScale(2);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +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-warranty-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><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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-warranty-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>
|
||||
|
|
|
|||
|
|
@ -1,251 +1,244 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/badge.png",
|
||||
"images/bg.jpg",
|
||||
"images/bg2.png",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png",
|
||||
"images/vig.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.vig=this.smartObject( {
|
||||
id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.bg2=this.smartObject( {
|
||||
id: "bg2", backgroundImage: "images/bg2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.badge=this.smartObject( {
|
||||
id: "badge", backgroundImage: "images/badge.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", width: 75, height: 18, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: -10, top: 20
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 60
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 100
|
||||
}
|
||||
),
|
||||
this.vig.set( {
|
||||
bottom: 0
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 150, top: 216
|
||||
}
|
||||
),
|
||||
this.tag.set( {
|
||||
left: 150, top: 192
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 10, top: 216
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.badge.set( {
|
||||
left: 159, top: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
left: -61, bottom: -48, scale: .8
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/badge.png',
|
||||
'images/bg.jpg',
|
||||
'images/bg2.png',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
'images/vig.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.vig = this.smartObject({
|
||||
id: 'vig',
|
||||
backgroundImage: 'images/vig.png',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.bg2 = this.smartObject({
|
||||
id: 'bg2',
|
||||
backgroundImage: 'images/bg2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.badge = this.smartObject({
|
||||
id: 'badge',
|
||||
backgroundImage: 'images/badge.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 75,
|
||||
height: 18,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 20 });
|
||||
this.copy2.set({ left: -10, top: 60 });
|
||||
this.copy3.set({ left: -10, top: 20 });
|
||||
this.copy4.set({ left: -10, top: 60 });
|
||||
this.copy5.set({ left: -10, top: 100 });
|
||||
this.copy6.set({ left: -10, top: 20 });
|
||||
this.copy7.set({ left: -10, top: 60 });
|
||||
this.copy8.set({ left: -10, top: 100 });
|
||||
this.vig.set({ bottom: 0 });
|
||||
this.logo.set({ left: 150, top: 216 });
|
||||
this.tag.set({ left: 150, top: 192 });
|
||||
this.cta.set({ left: 10, top: 216 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.badge.set({ left: 159, top: 0 });
|
||||
this.bg.set({ left: -61, bottom: -48, scale: 0.8 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
// this.timeLineCTA = new TimelineMax({ paused: true })
|
||||
// .to(this.ctaOvr, 1, { autoAlpha: 1 }, 'cta');
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeIn }, '=+3')
|
||||
.staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
// .from(this.cta, 1, { autoAlpha: 0 })
|
||||
.to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+3')
|
||||
.staggerFrom([this.badge, this.tag], 0.5, { autoAlpha: 0 }, 0.5)
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.badge, this.tag, this.cta], 0.5, { autoAlpha: 0 })
|
||||
.to(this.bg2, 0.5, { autoAlpha: 1 });
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy3, this.copy4, this.copy5], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy3, this.copy4, this.copy5], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+3").staggerFrom([this.copy6, this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy6, this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+3").staggerFrom([this.badge, this.tag], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, .5).call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.badge, this.tag, this.cta], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
).to(this.bg2, .5, {
|
||||
autoAlpha: 1
|
||||
}
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
paused: !1, repeat: 1, repeatDelay: 1
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1, "frame1+=0.5").to([this.copy1, this.copy2], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "frame1+=3").to(this.bg2, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
|
||||
, "frame2-=1").add(this.copyAnimation.play(), "frame2"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
});
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
console.log(t),
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
|
||||
;
|
||||
this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1})
|
||||
.staggerFrom([this.copy1, this.copy2], 0.5, { x: -300, ease: Power1.easeOut }, 0.1, 'frame1+=0.5')
|
||||
.to([this.copy1, this.copy2], 0.5, { x: -300, ease: Power1.easeIn }, 'frame1+=3')
|
||||
.to(this.bg2, 1, { autoAlpha: 0 })
|
||||
.from(this.bg, this.copyAnimation._duration, { scale: 1 }, 'frame2-=1')
|
||||
.from(this.bg, 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2-=1')
|
||||
.add(this.copyAnimation.play(), 'frame2');
|
||||
|
||||
this.timeline.timeScale(1);
|
||||
};
|
||||
|
||||
Banner.prototype.addEventListeners = function (_this) {
|
||||
// var _this = this;
|
||||
console.log(_this);
|
||||
|
||||
_this.banner.addEventListener( 'mouseover', rollover );
|
||||
_this.banner.addEventListener( 'mouseout', rollout );
|
||||
|
||||
function rollover() {
|
||||
_this.timeLineCTA.play();
|
||||
}
|
||||
|
||||
function rollout() {
|
||||
_this.timeLineCTA.reverse();
|
||||
_this.timeLineCTA.timeScale(2);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +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-warranty-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><a href="https://global.sunpower.com/"><div class="banner"><div class="preloader"><div class="circle"></div></div><div class="border"></div></div></body></html>
|
||||
<!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-warranty-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>
|
||||
|
|
|
|||
|
|
@ -1,263 +1,246 @@
|
|||
"use strict";
|
||||
Banner.prototype.start=function() {
|
||||
this.banner=document.querySelector(".banner"),
|
||||
this.bannerWidth=this.banner.offsetWidth,
|
||||
this.bannerHeight=this.banner.offsetHeight,
|
||||
this.images=["images/logo.png",
|
||||
"images/logo-big.png",
|
||||
"images/badge.png",
|
||||
"images/bg.jpg",
|
||||
"images/vig.png",
|
||||
"images/copy1.png",
|
||||
"images/copy2.png",
|
||||
"images/copy3.png",
|
||||
"images/copy4.png",
|
||||
"images/copy5.png",
|
||||
"images/copy6.png",
|
||||
"images/copy7.png",
|
||||
"images/copy8.png",
|
||||
"images/cta-nrm.png",
|
||||
"images/cta-ovr.png",
|
||||
"images/tag.png"];
|
||||
var t=this;
|
||||
this.preloadImages(this.images, function() {
|
||||
t.createElements(), t.setup(), t.hidePreloader(), t.animate()
|
||||
}
|
||||
)
|
||||
}
|
||||
'use strict';
|
||||
|
||||
,
|
||||
Banner.prototype.createElements=function() {
|
||||
this.bg=this.smartObject( {
|
||||
id: "bg", backgroundImage: "images/bg.jpg", top: "none", left: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.vig=this.smartObject( {
|
||||
id: "vig", backgroundImage: "images/vig.png", top: "none", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logo=this.smartObject( {
|
||||
id: "LOGO", backgroundImage: "images/logo.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.logoBig=this.smartObject( {
|
||||
id: "LOGO-BIG", backgroundImage: "images/logo-big.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy1=this.smartObject( {
|
||||
id: "copy1", backgroundImage: "images/copy1.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy2=this.smartObject( {
|
||||
id: "copy2", backgroundImage: "images/copy2.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy3=this.smartObject( {
|
||||
id: "copy3", backgroundImage: "images/copy3.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy4=this.smartObject( {
|
||||
id: "copy4", backgroundImage: "images/copy4.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy5=this.smartObject( {
|
||||
id: "copy5", backgroundImage: "images/copy5.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy6=this.smartObject( {
|
||||
id: "copy6", backgroundImage: "images/copy6.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy7=this.smartObject( {
|
||||
id: "copy7", backgroundImage: "images/copy7.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.copy8=this.smartObject( {
|
||||
id: "copy8", backgroundImage: "images/copy8.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.badge=this.smartObject( {
|
||||
id: "badge", backgroundImage: "images/badge.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.tag=this.smartObject( {
|
||||
id: "tag", backgroundImage: "images/tag.png", parent: this.banner
|
||||
}
|
||||
),
|
||||
this.cta=this.smartObject( {
|
||||
id: "cta", width: 118, height: 27, parent: this.banner
|
||||
}
|
||||
),
|
||||
this.ctaNrm=this.smartObject( {
|
||||
id: "ctaNrm", backgroundImage: "images/cta-nrm.png", parent: this.cta
|
||||
}
|
||||
),
|
||||
this.ctaOvr=this.smartObject( {
|
||||
id: "ctaOvr", backgroundImage: "images/cta-ovr.png", parent: this.cta
|
||||
}
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Run the animation functions.
|
||||
*/
|
||||
Banner.prototype.start = function () {
|
||||
this.banner = document.querySelector('.banner');
|
||||
|
||||
,
|
||||
Banner.prototype.setup=function() {
|
||||
this.copy1.set( {
|
||||
left: -10, top: 62
|
||||
}
|
||||
),
|
||||
this.copy2.set( {
|
||||
left: -10, top: 102
|
||||
}
|
||||
),
|
||||
this.copy3.set( {
|
||||
left: -10, top: 62
|
||||
}
|
||||
),
|
||||
this.copy4.set( {
|
||||
left: -10, top: 102
|
||||
}
|
||||
),
|
||||
this.copy5.set( {
|
||||
left: -10, top: 142
|
||||
}
|
||||
),
|
||||
this.copy6.set( {
|
||||
left: -10, top: 62
|
||||
}
|
||||
),
|
||||
this.copy7.set( {
|
||||
left: -10, top: 102
|
||||
}
|
||||
),
|
||||
this.copy8.set( {
|
||||
left: -10, top: 142
|
||||
}
|
||||
),
|
||||
this.logo.set( {
|
||||
left: 16, top: 564
|
||||
}
|
||||
),
|
||||
this.logoBig.centerHorizontal(),
|
||||
this.logoBig.set( {
|
||||
top: 507
|
||||
}
|
||||
),
|
||||
this.tag.centerHorizontal(),
|
||||
this.tag.set( {
|
||||
top: 468
|
||||
}
|
||||
),
|
||||
this.cta.set( {
|
||||
left: 169, top: 557
|
||||
}
|
||||
),
|
||||
this.ctaOvr.set( {
|
||||
autoAlpha: 0
|
||||
}
|
||||
),
|
||||
this.badge.centerHorizontal(),
|
||||
this.badge.set( {
|
||||
top: 0
|
||||
}
|
||||
),
|
||||
this.bg.set( {
|
||||
right: 0, bottom: 0
|
||||
}
|
||||
),
|
||||
this.vig.set( {
|
||||
bottom: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
this.bannerWidth = this.banner.offsetWidth;
|
||||
this.bannerHeight = this.banner.offsetHeight;
|
||||
|
||||
,
|
||||
Banner.prototype.hidePreloader=function() {
|
||||
TweenLite.to(".preloader", 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
// Image array for preloading
|
||||
this.images = [
|
||||
'images/logo.png',
|
||||
'images/logo-big.png',
|
||||
'images/badge.png',
|
||||
'images/bg.jpg',
|
||||
'images/vig.png',
|
||||
'images/copy1.png',
|
||||
'images/copy2.png',
|
||||
'images/copy3.png',
|
||||
'images/copy4.png',
|
||||
'images/copy5.png',
|
||||
'images/copy6.png',
|
||||
'images/copy7.png',
|
||||
'images/copy8.png',
|
||||
'images/cta-nrm.png',
|
||||
'images/cta-ovr.png',
|
||||
'images/tag.png',
|
||||
];
|
||||
|
||||
,
|
||||
Banner.prototype.animate=function() {
|
||||
var t=this,
|
||||
e=this,
|
||||
a=0;
|
||||
this.cta.addEventListener("mouseover", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 1
|
||||
var _this = this;
|
||||
this.preloadImages(this.images, function () {
|
||||
_this.createElements();
|
||||
_this.setup();
|
||||
_this.hidePreloader();
|
||||
_this.animate();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements.
|
||||
*/
|
||||
Banner.prototype.createElements = function () {
|
||||
this.bg = this.smartObject({
|
||||
id: 'bg',
|
||||
backgroundImage: 'images/bg.jpg',
|
||||
top: 'none',
|
||||
left: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.vig = this.smartObject({
|
||||
id: 'vig',
|
||||
backgroundImage: 'images/vig.png',
|
||||
top: 'none',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logo = this.smartObject({
|
||||
id: 'LOGO',
|
||||
backgroundImage: 'images/logo.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.logoBig = this.smartObject({
|
||||
id: 'LOGO-BIG',
|
||||
backgroundImage: 'images/logo-big.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy1 = this.smartObject({
|
||||
id: 'copy1',
|
||||
backgroundImage: 'images/copy1.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy2 = this.smartObject({
|
||||
id: 'copy2',
|
||||
backgroundImage: 'images/copy2.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy3 = this.smartObject({
|
||||
id: 'copy3',
|
||||
backgroundImage: 'images/copy3.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy4 = this.smartObject({
|
||||
id: 'copy4',
|
||||
backgroundImage: 'images/copy4.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy5 = this.smartObject({
|
||||
id: 'copy5',
|
||||
backgroundImage: 'images/copy5.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy6 = this.smartObject({
|
||||
id: 'copy6',
|
||||
backgroundImage: 'images/copy6.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy7 = this.smartObject({
|
||||
id: 'copy7',
|
||||
backgroundImage: 'images/copy7.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.copy8 = this.smartObject({
|
||||
id: 'copy8',
|
||||
backgroundImage: 'images/copy8.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.badge = this.smartObject({
|
||||
id: 'badge',
|
||||
backgroundImage: 'images/badge.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.tag = this.smartObject({
|
||||
id: 'tag',
|
||||
backgroundImage: 'images/tag.png',
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.cta = this.smartObject({
|
||||
id: 'cta',
|
||||
width: 118,
|
||||
height: 27,
|
||||
parent: this.banner
|
||||
});
|
||||
|
||||
this.ctaNrm = this.smartObject({
|
||||
id: 'ctaNrm',
|
||||
backgroundImage: 'images/cta-nrm.png',
|
||||
parent: this.cta
|
||||
});
|
||||
|
||||
this.ctaOvr = this.smartObject({
|
||||
id: 'ctaOvr',
|
||||
backgroundImage: 'images/cta-ovr.png',
|
||||
parent: this.cta
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup initial element states.
|
||||
*/
|
||||
Banner.prototype.setup = function () {
|
||||
this.copy1.set({ left: -10, top: 62 });
|
||||
this.copy2.set({ left: -10, top: 102 });
|
||||
this.copy3.set({ left: -10, top: 62 });
|
||||
this.copy4.set({ left: -10, top: 102 });
|
||||
this.copy5.set({ left: -10, top: 142 });
|
||||
this.copy6.set({ left: -10, top: 62 });
|
||||
this.copy7.set({ left: -10, top: 102 });
|
||||
this.copy8.set({ left: -10, top: 142 });
|
||||
this.logo.set({ left: 16, top: 564 });
|
||||
this.logoBig.centerHorizontal();
|
||||
this.logoBig.set({ top: 507 });
|
||||
this.tag.centerHorizontal();
|
||||
this.tag.set({ top: 468 });
|
||||
this.cta.set({ left: 169, top: 557 });
|
||||
this.ctaOvr.set({ autoAlpha: 0 });
|
||||
this.badge.centerHorizontal();
|
||||
this.badge.set({ top: 0 });
|
||||
this.bg.set({ right: 0, bottom: 0 });
|
||||
this.vig.set({ bottom: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the preloader.
|
||||
*/
|
||||
Banner.prototype.hidePreloader = function () {
|
||||
TweenLite.to('.preloader', 1, { autoAlpha: 0 });
|
||||
};
|
||||
|
||||
/**
|
||||
* Animation timeline.
|
||||
*/
|
||||
Banner.prototype.animate = function () {
|
||||
var _this = this;
|
||||
var loop = 0;
|
||||
|
||||
this.cta.addEventListener('mouseover', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 1 });
|
||||
});
|
||||
|
||||
this.cta.addEventListener('mouseout', () => {
|
||||
TweenLite.to(this.ctaOvr, 1, { autoAlpha: 0 });
|
||||
});
|
||||
|
||||
this.copyAnimation = new TimelineMax({paused: true})
|
||||
.staggerFrom([this.copy1, this.copy2], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy1, this.copy2], 0.5, { x: -300, ease: Power1.easeIn }, '+=2')
|
||||
.staggerFrom([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy3, this.copy4, this.copy5], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.staggerFrom([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeOut }, 0.1)
|
||||
.to([this.copy6, this.copy7, this.copy8], 0.5, { x: -300, ease: Power1.easeIn }, '=+2')
|
||||
.to(this.logo, 0.5, { autoAlpha: 0 }, 'swap')
|
||||
.to(this.cta, 0.5, { x: -80 }, 'swap')
|
||||
.from(this.badge, 0.5, { autoAlpha: 0 }, 'end')
|
||||
.from([this.logoBig, this.tag], 0.5, { autoAlpha: 0 }, 'swap+=1')
|
||||
.call(function(){
|
||||
loop++
|
||||
console.log('loop: ', loop);
|
||||
if (loop >= 2){
|
||||
console.log('if')
|
||||
_this.copyAnimation.addPause('reset', _this.addEventListeners, [_this]);
|
||||
} else {
|
||||
console.log('else')
|
||||
_this.copyAnimation.to([this.badge, this.tag, this.cta], 0.5, { autoAlpha: 0 })
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.cta.addEventListener("mouseout", function() {
|
||||
TweenLite.to(t.ctaOvr, 1, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
)
|
||||
}
|
||||
),
|
||||
this.copyAnimation=new TimelineMax( {
|
||||
paused: !0
|
||||
}
|
||||
).staggerFrom([this.copy1, this.copy2], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy1, this.copy2], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "+=2").staggerFrom([this.copy3, this.copy4, this.copy5], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy3, this.copy4, this.copy5], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").staggerFrom([this.copy6, this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeOut
|
||||
}
|
||||
, .1).to([this.copy6, this.copy7, this.copy8], .5, {
|
||||
x: -300, ease: Power1.easeIn
|
||||
}
|
||||
, "=+2").to(this.logo, .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap").to(this.cta, .5, {
|
||||
x: -80
|
||||
}
|
||||
, "swap").from(this.badge, .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "end").from([this.logoBig, this.tag], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
, "swap+=1").call(function() {
|
||||
a++, console.log("loop: ", a), a>=2?(console.log("if"), e.copyAnimation.addPause("reset", e.addEventListeners, [e])):(console.log("else"), e.copyAnimation.to([this.badge, this.tag, this.cta], .5, {
|
||||
autoAlpha: 0
|
||||
}
|
||||
))
|
||||
}
|
||||
),
|
||||
this.timeline=new TimelineMax( {
|
||||
paused: !1, repeat: 1, repeatDelay: 1
|
||||
}
|
||||
).add(this.copyAnimation.play(), "frame2+=1").from([this.vig], 13, {
|
||||
y: 26, easing: Linear.easeNone, rotation: .01
|
||||
}
|
||||
, "frame2+=1"),
|
||||
this.timeline.timeScale(1)
|
||||
}
|
||||
});
|
||||
|
||||
,
|
||||
Banner.prototype.addEventListeners=function(t) {
|
||||
function e() {
|
||||
t.timeLineCTA.play()
|
||||
}
|
||||
function a() {
|
||||
t.timeLineCTA.reverse(),
|
||||
t.timeLineCTA.timeScale(2)
|
||||
}
|
||||
console.log(t),
|
||||
t.banner.addEventListener("mouseover", e),
|
||||
t.banner.addEventListener("mouseout", a)
|
||||
}
|
||||
|
||||
;
|
||||
this.timeline = new TimelineMax({paused: false, repeat: 1, repeatDelay: 1})
|
||||
.add(this.copyAnimation.play(), 'frame2+=1')
|
||||
.from([this.bg, this.vig], 13, { y: 26, easing:Linear.easeNone , rotation:0.01 }, 'frame2+=1');
|
||||
|
||||
|
||||
this.timeline.timeScale(1);
|
||||
};
|
||||
|
||||
Banner.prototype.addEventListeners = function (_this) {
|
||||
// var _this = this;
|
||||
console.log(_this);
|
||||
|
||||
_this.banner.addEventListener( 'mouseover', rollover );
|
||||
_this.banner.addEventListener( 'mouseout', rollout );
|
||||
|
||||
function rollover() {
|
||||
_this.timeLineCTA.play();
|
||||
}
|
||||
|
||||
function rollout() {
|
||||
_this.timeLineCTA.reverse();
|
||||
_this.timeLineCTA.timeScale(2);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue