Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
aaec3450 by Jeremy Groot
Options

HHF Fixes to 250x300

1 parent 618a222c
Inline Side-by-side
Showing 5 changed files with 46 additions and 35 deletions

12.9 KB | W: | H:

24 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

17.4 KB | W: | H:

11.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

11.3 KB | W: | H:

17.4 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -62,26 +62,17 @@ ...@@ -62,26 +62,17 @@
62 /* background: url(guide2@2x.png) no-repeat center center; */ 62 /* background: url(guide2@2x.png) no-repeat center center; */
63 /* background-size: 300px 600px ; */ 63 /* background-size: 300px 600px ; */
64 } 64 }
65
66 #logo-bg {
67 background-color: #0077a0;/* #0077a0 */
68 width:100%;
69 height:100%;
70 z-index:9;
71 }
72
73 img{ 65 img{
74 position: absolute; 66 position: absolute;
75 z-index:8;
76 } 67 }
77 .img{ 68 .img{
78 opacity: 0; 69 opacity: 0;
79 } 70 }
80 .txt{ 71 .txt{
81 position: absolute; 72 position: absolute;
82 top:90px;
83 left:40px;
84 opacity: 0; 73 opacity: 0;
74 top:100px;
75 left:60px;
85 } 76 }
86 .txtb{ 77 .txtb{
87 position: absolute; 78 position: absolute;
...@@ -117,7 +108,6 @@ ...@@ -117,7 +108,6 @@
117 left: 22px; 108 left: 22px;
118 top:23px; 109 top:23px;
119 opacity: 0; 110 opacity: 0;
120 z-index:9;
121 } 111 }
122 112
123 113
...@@ -129,14 +119,15 @@ ...@@ -129,14 +119,15 @@
129 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> --> 119 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
130 <div id="border"> 120 <div id="border">
131 121
132 <img id="img1" class="img" src="assets/img1.jpg" alt="img1@60" width="300" height="250"> 122 <img id="img1" class="img" src="assets/img1.jpg" alt="img1@60" width="444" height="250">
133 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="220"> 123 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="200">
134 124
135 <img id="img2" class="img" src="assets/img2.jpg" alt="img2@60" width="300" height="250"> 125 <img id="img2" class="img" src="assets/img2.jpg" alt="img2@60" width="444" height="250">
136 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="220"> 126 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="200">
127
128 <img id="img3" class="img" src="assets/img3.jpg" alt="img3@60" width="444" height="250">
129 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="200">
137 130
138 <img id="img3" class="img" src="assets/img3.jpg" alt="img3@60" width="300" height="250">
139 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="220">
140 131
141 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here."> 132 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
142 <img id="cta" src="assets/donate@2x.png" alt="Donate Now"> 133 <img id="cta" src="assets/donate@2x.png" alt="Donate Now">
...@@ -145,6 +136,7 @@ ...@@ -145,6 +136,7 @@
145 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="253"> 136 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="253">
146 <img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="161"> 137 <img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="161">
147 138
139
148 </div> 140 </div>
149 </a> 141 </a>
150 142
...@@ -153,26 +145,45 @@ ...@@ -153,26 +145,45 @@
153 145
154 <script> 146 <script>
155 147
156 var tl = new TimelineMax({repeat:1, repeatDelay:3.5}); 148 var tl = new TimelineMax({repeat:1, repeatDelay:4});
149
150 function stage1(){
151
157 152
158 tl.to("#img1", .5, {opacity:1, delay:0 }); 153 tl.to("#img1", .5, {opacity:1, delay:-1 });
159 tl.to("#txt1", .7, {opacity:1, delay:0.1 }); 154 tl.to("#img1", 2.5, {x:-50, ease:Power1.easeOut, delay:-1 });
155 tl.to("#txt1", .7, {opacity:1, delay:-1.5 });
160 156
161 tl.to("#img2", .5, {opacity:1, delay:1 }); 157 tl.to("#img1", .5, {opacity:0, delay:.5 });
162 tl.to(['#img1','#txt1'], 0, {opacity:0, delay:0}); 158 tl.to("#txt1", .5, {opacity:0, delay:-.5 });
163 tl.to("#txt2", .7, {opacity:1, delay:0.1});
164 159
165 tl.to("#img3", .5, {opacity:1, delay:1 }); 160 tl.to("#img2", .5, {opacity:1, delay:-1 });
166 tl.to(['#img2','#txt2'], 0, {opacity:0, delay:0}); 161 tl.to("#img2", 2.5, {x:-20, ease:Power1.easeOut, delay:-1 });
167 tl.to("#txt3", .7, {opacity:1, delay:0.1 }); 162 tl.to("#txt2", .7, {opacity:1, delay:-1.5 });
163
164 tl.to("#img2", .5, {opacity:0, delay:.5 });
165 tl.to("#txt2", .5, {opacity:0, delay:-.5 });
166
167 tl.to("#img3", .5, {opacity:1, delay:-1 });
168 tl.to("#img3", 2.5, {x:-100, ease:Power1.easeOut, delay:-1 });
169 tl.to("#txt3", .7, {opacity:1, delay:-1.5 });
170
171 tl.to("#img3", .5, {opacity:0, delay:.5 });
172 tl.to("#txt3", .5, {opacity:0, delay:-.5 });
168 173
169 // phase 2 174 // phase 2
170 tl.to(['#img3','#txt3'], 0.5, {opacity:0, delay:1}); 175 tl.to("#logo", .5, {opacity:1, delay:-.5 });
171 tl.to("#logo", .5, {opacity:1, delay:0 }); 176 tl.to("#txtb1", .5, {left:24, ease:Power1.easeOut, delay:-.5});
172 tl.to("#txtb1", .5, {left:24, ease:Power1.easeOut, delay:0.2}); 177 tl.to("#txtb2", .5, {left:24, ease:Power1.easeOut, delay:-.3});
173 tl.to("#txtb2", .5, {left:24, ease:Power1.easeOut, delay:0.1}); 178 tl.to("#txtb3", .5, {left:24, ease:Power1.easeOut, delay:-.3});
174 tl.to("#txtb3", .5, {left:24, ease:Power1.easeOut, delay:0.1}); 179 tl.to("#cta", .7, {opacity:1, bottom:15, ease:Power1.easeOut, delay:.2 });
175 tl.to("#cta", .7, {opacity:1, bottom:15, ease:Power1.easeOut, delay:0.1 }); 180
181 console.log( "time: " + tl.totalDuration() );
182 }
183
184 //---------------------
185 stage1();
186
176 187
177 188
178 </script> 189 </script>
......
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
76 .txt{ 76 .txt{
77 position: absolute; 77 position: absolute;
78 left:0; 78 left:0;
79 top:40%; 79 top:240px;
80 opacity: 0; 80 opacity: 0;
81 } 81 }
82 .txtb{ 82 .txtb{
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
85 } 85 }
86 86
87 #img1{ 87 #img1{
88 opacity: 1; 88 opacity: .5;
89 } 89 }
90 #txtb1{ 90 #txtb1{
91 top:47px; 91 top:47px;
......