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 @@
/* background: url(guide2@2x.png) no-repeat center center; */
/* background-size: 300px 600px ; */
}
#logo-bg {
background-color: #0077a0;/* #0077a0 */
width:100%;
height:100%;
z-index:9;
}
img{
position: absolute;
z-index:8;
}
.img{
opacity: 0;
}
.txt{
position: absolute;
top:90px;
left:40px;
opacity: 0;
top:100px;
left:60px;
}
.txtb{
position: absolute;
......@@ -117,7 +108,6 @@
left: 22px;
top:23px;
opacity: 0;
z-index:9;
}
......@@ -129,14 +119,15 @@
<!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
<div id="border">
<img id="img1" class="img" src="assets/img1.jpg" alt="img1@60" width="300" height="250">
<img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="220">
<img id="img1" class="img" src="assets/img1.jpg" alt="img1@60" width="444" height="250">
<img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="200">
<img id="img2" class="img" src="assets/img2.jpg" alt="img2@60" width="300" height="250">
<img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="220">
<img id="img2" class="img" src="assets/img2.jpg" alt="img2@60" width="444" height="250">
<img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="200">
<img id="img3" class="img" src="assets/img3.jpg" alt="img3@60" width="444" height="250">
<img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="200">
<img id="img3" class="img" src="assets/img3.jpg" alt="img3@60" width="300" height="250">
<img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="220">
<img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
<img id="cta" src="assets/donate@2x.png" alt="Donate Now">
......@@ -145,6 +136,7 @@
<img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="253">
<img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="161">
</div>
</a>
......@@ -153,26 +145,45 @@
<script>
var tl = new TimelineMax({repeat:1, repeatDelay:3.5});
var tl = new TimelineMax({repeat:1, repeatDelay:4});
function stage1(){
tl.to("#img1", .5, {opacity:1, delay:0 });
tl.to("#txt1", .7, {opacity:1, delay:0.1 });
tl.to("#img1", .5, {opacity:1, delay:-1 });
tl.to("#img1", 2.5, {x:-50, ease:Power1.easeOut, delay:-1 });
tl.to("#txt1", .7, {opacity:1, delay:-1.5 });
tl.to("#img2", .5, {opacity:1, delay:1 });
tl.to(['#img1','#txt1'], 0, {opacity:0, delay:0});
tl.to("#txt2", .7, {opacity:1, delay:0.1});
tl.to("#img1", .5, {opacity:0, delay:.5 });
tl.to("#txt1", .5, {opacity:0, delay:-.5 });
tl.to("#img3", .5, {opacity:1, delay:1 });
tl.to(['#img2','#txt2'], 0, {opacity:0, delay:0});
tl.to("#txt3", .7, {opacity:1, delay:0.1 });
tl.to("#img2", .5, {opacity:1, delay:-1 });
tl.to("#img2", 2.5, {x:-20, ease:Power1.easeOut, delay:-1 });
tl.to("#txt2", .7, {opacity:1, delay:-1.5 });
tl.to("#img2", .5, {opacity:0, delay:.5 });
tl.to("#txt2", .5, {opacity:0, delay:-.5 });
tl.to("#img3", .5, {opacity:1, delay:-1 });
tl.to("#img3", 2.5, {x:-100, ease:Power1.easeOut, delay:-1 });
tl.to("#txt3", .7, {opacity:1, delay:-1.5 });
tl.to("#img3", .5, {opacity:0, delay:.5 });
tl.to("#txt3", .5, {opacity:0, delay:-.5 });
// phase 2
tl.to(['#img3','#txt3'], 0.5, {opacity:0, delay:1});
tl.to("#logo", .5, {opacity:1, delay:0 });
tl.to("#txtb1", .5, {left:24, ease:Power1.easeOut, delay:0.2});
tl.to("#txtb2", .5, {left:24, ease:Power1.easeOut, delay:0.1});
tl.to("#txtb3", .5, {left:24, ease:Power1.easeOut, delay:0.1});
tl.to("#cta", .7, {opacity:1, bottom:15, ease:Power1.easeOut, delay:0.1 });
tl.to("#logo", .5, {opacity:1, delay:-.5 });
tl.to("#txtb1", .5, {left:24, ease:Power1.easeOut, delay:-.5});
tl.to("#txtb2", .5, {left:24, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb3", .5, {left:24, ease:Power1.easeOut, delay:-.3});
tl.to("#cta", .7, {opacity:1, bottom:15, ease:Power1.easeOut, delay:.2 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
stage1();
</script>
......
......@@ -76,7 +76,7 @@
.txt{
position: absolute;
left:0;
top:40%;
top:240px;
opacity: 0;
}
.txtb{
......@@ -85,7 +85,7 @@
}
#img1{
opacity: 1;
opacity: .5;
}
#txtb1{
top:47px;
......