Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
892ad92d by Dan Rempel
Options

sisk fall - added a 4th ad, no ease on img

1 parent 370e85e3
Inline Side-by-side
Showing 14 changed files with 154 additions and 7 deletions
...@@ -75,7 +75,8 @@ ...@@ -75,7 +75,8 @@
75 opacity: 0; 75 opacity: 0;
76 } 76 }
77 #txt2 { 77 #txt2 {
78 top:272px;/* 272px */ 78 top:152px;/* 272px */
79 left:300px;/* 25px */
79 } 80 }
80 #txt3 { 81 #txt3 {
81 top:97px;/* 97px */ 82 top:97px;/* 97px */
...@@ -120,11 +121,11 @@ ...@@ -120,11 +121,11 @@
120 var tl = new TimelineMax({repeat:2, repeatDelay:0}); 121 var tl = new TimelineMax({repeat:2, repeatDelay:0});
121 var d=10; 122 var d=10;
122 123
123 tl.to("#img", d, {top:-100}); 124 tl.to("#img", d, {top:-100 , ease:Linear.easeNone});
124 d=d*-1; 125 d=d*-1;
125 126
126 tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25}); 127 tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
127 tl.to("#txt2", .5, {top:152, ease:Power1.easeOut, delay:d+=1}); 128 tl.to("#txt2", .5, {left:25, ease:Power1.easeOut, delay:d+=1});
128 129
129 tl.to("#txt1", .5, {left:-300, ease:Power1.easeIn, delay:d+=2}); 130 tl.to("#txt1", .5, {left:-300, ease:Power1.easeIn, delay:d+=2});
130 tl.to("#txt2", .5, {left:-300, ease:Power1.easeIn, delay:d}); 131 tl.to("#txt2", .5, {left:-300, ease:Power1.easeIn, delay:d});
......
...@@ -75,7 +75,8 @@ ...@@ -75,7 +75,8 @@
75 opacity: 0; 75 opacity: 0;
76 } 76 }
77 #txt2 { 77 #txt2 {
78 top:605px;/* 485px */ 78 top:485px;
79 left:305px;
79 } 80 }
80 #txt3 { 81 #txt3 {
81 top:375px;/* 375px */ 82 top:375px;/* 375px */
...@@ -120,11 +121,11 @@ ...@@ -120,11 +121,11 @@
120 var tl = new TimelineMax({repeat:2, repeatDelay:0}); 121 var tl = new TimelineMax({repeat:2, repeatDelay:0});
121 var d=10; 122 var d=10;
122 123
123 tl.to("#img", d, {top:-88}); 124 tl.to("#img", d, {top:-88, ease:Linear.easeNone});
124 d=d*-1; 125 d=d*-1;
125 126
126 tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25}); 127 tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
127 tl.to("#txt2", .5, {top:485, ease:Power1.easeOut, delay:d+=1}); 128 tl.to("#txt2", .5, {left:25, ease:Power1.easeOut, delay:d+=1});
128 129
129 tl.to("#txt1", .5, {left:-300, ease:Power1.easeIn, delay:d+=2}); 130 tl.to("#txt1", .5, {left:-300, ease:Power1.easeIn, delay:d+=2});
130 tl.to("#txt2", .5, {left:-300, ease:Power1.easeIn, delay:d}); 131 tl.to("#txt2", .5, {left:-300, ease:Power1.easeIn, delay:d});
......
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
122 var tl = new TimelineMax({repeat:2, repeatDelay:0}); 122 var tl = new TimelineMax({repeat:2, repeatDelay:0});
123 var d=10; 123 var d=10;
124 124
125 tl.to("#img", d, {top:-125}); 125 tl.to("#img", d, {top:-125, ease:Linear.easeNone});
126 d=d*-1; 126 d=d*-1;
127 127
128 tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25}); 128 tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
......
This diff could not be displayed because it is too large.
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 GSAP Ad</title>
6 <meta name="ad.size" content="width=970,height=250">
7 <script type="text/javascript">
8
9 /*
10 // IAB source: modified to allow link testing
11 var clickTag = "";
12 function getParameterByName(name)
13 {
14 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
15 if (match == null || match == ""){
16 return clickTag;
17 } else{
18 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
19 }
20 }
21 clickTag = getParameterByName('clickTag');
22 */
23
24 </script>
25 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
26 <script type="text/javascript">
27 window.onload = function() {
28 eyeBuild.initialize();
29 }
30 </script>
31
32
33 <style>
34
35 body{
36 margin: 0;
37 padding: 0;
38 width: 970px;
39 height: 250px;
40 line-height: 1.2;
41 font-size: 27px;
42 letter-spacing: 0;
43 color: #CD040B;
44 font-family: "Neue Haas Grotesk", Arial, sans-serif;
45 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
46 font-style: normal;
47 }
48
49 a{
50 text-decoration: none;
51 color: inherit;
52 }
53 #border{
54 position: absolute;
55 width: 970px;
56 height: 250px;
57 border: 1px solid black;
58 background-color: black;/* #0077a0 */
59 overflow: hidden;
60 cursor: pointer;
61 box-sizing: border-box;
62 /* background: url(img-50.jpg); */
63 /* background: url(guide2@2x.png) no-repeat center center; */
64 /* background-size: 300px 600px ; */
65 }
66 #img{
67 position: absolute;
68 }
69 .txt{
70 position: absolute;
71 left:65px;
72 top:58px;
73 }
74 #txt1 {
75 opacity: 0;
76 }
77 #txt2 {
78 left:975px;/* 314px */
79 top:96px;
80 }
81 #txt3 {
82 top:255px;/* 59px */
83 }
84 #txt4 {
85 top:275px;/* 100px */
86 }
87
88 #logo{
89 position: absolute;
90 right: 68px;/* 68px */
91 top:125px;
92 }
93
94
95 </style>
96 </head>
97
98 <body>
99 <a href="javascript:eyeBuild.doClick(0)" class="cta">
100 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
101 <div id="border">
102 <div id="img" class="img"><img src="assets/img.jpg" alt="img" width="970"></div>
103
104 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="Finding the right lawyer in Lambton County" width="488">
105 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="just got easier." width="488">
106 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="Siskinds – now in Sarnia." width="517">
107 <img id="txt4" class="txt" src="assets/txt4@2x.png" alt="siskinds.com 877.672.2121" width="517">
108
109 <img id="logo" src="assets/logo@2x.png" alt="Siskinds The Law Firm" width="270">
110 </div>
111 </a>
112
113 <!-- GREENSOCK-->
114 <script src="assets/TweenMax.min.js"></script>
115
116 <script>
117
118 var tl = new TimelineMax({repeat:2, repeatDelay:0});
119 var d=10;
120
121 tl.to("#img", d, {top:-52 , ease:Linear.easeNone});// , ease:Linear.easeNone
122 d=d*-1;
123
124 tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
125 tl.to("#txt2", .5, {left:314, ease:Power1.easeOut, delay:d+=1});
126
127 tl.to("#txt1", .5, {top:-100, ease:Power1.easeIn, delay:d+=2.4});
128 tl.to("#txt2", .5, {top:-80, ease:Power1.easeIn, delay:d});
129
130 tl.to("#txt3", .5, {top:59, ease:Power1.easeOut, delay:d+=.3});
131 tl.to("#txt4", .5, {top:100, ease:Power1.easeOut, delay:d+=.2});
132
133 console.log( "time: " + tl.totalDuration() );
134
135
136 </script>
137
138 </body>
139
140 </html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
15 <iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe> 15 <iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe>
16 <iframe id='' class="b300x600" scrolling="no" src="300x600/index.html"></iframe> 16 <iframe id='' class="b300x600" scrolling="no" src="300x600/index.html"></iframe>
17 <iframe id='' class="b728x90" scrolling="no" src="728x90/index.html"></iframe> 17 <iframe id='' class="b728x90" scrolling="no" src="728x90/index.html"></iframe>
18 <iframe id='' class="b970x250" scrolling="no" src="970x250/index.html"></iframe>
18 19
19 </body> 20 </body>
20 </html> 21 </html>
......
...@@ -51,3 +51,7 @@ iframe, img { ...@@ -51,3 +51,7 @@ iframe, img {
51 width: 600px; 51 width: 600px;
52 height: 566px; 52 height: 566px;
53 } 53 }
54 .b970x250 {
55 width: 970px;
56 height: 250px;
57 }
......