Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
75ca5bfa by Dan Rempel
Options

Bruce Port Elgin for review

1 parent df27472d
Inline Side-by-side
Showing 20 changed files with 351 additions and 0 deletions
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5
6 <title>HTML5 Ad</title>
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "https://businesstobruce.com/portelgin";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22
23
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 }
31 a{
32 text-decoration: none;
33 }
34 #click-tag{
35 display: block;
36 position: absolute;
37 width: 100%;
38 height: 100%;
39 }
40 #border{
41 position: relative;
42 width: 100%;
43 height: 100%;
44 border: 1px solid #939598;
45 background-color: #FFFFFF;
46 overflow: hidden;
47 cursor: pointer;
48 box-sizing: border-box;
49 }
50 img {
51 position: absolute;
52 }
53
54
55 /* Custom per ad */
56
57 body{
58 width: 300px;
59 height: 250px;
60 }
61
62 #txt1{
63 top:90px;
64 left: 20px;
65 }
66 #txt2{
67 top:145px;
68 left: 305px;
69 }
70 #dark{
71 opacity:.6;
72 }
73
74 </style>
75
76 </head>
77
78 <body>
79
80 <!-- GREENSOCK-->
81 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
82 <script>
83
84
85 var img1 = new Image();
86 img1.onload = function() {
87 // the image is ready
88 // calculate img1 size and move it from bottom left to top right
89 var img1 = document.getElementById("img1");
90 var startX = 0;
91 var startY = - img1.height+250;
92 var endX = - img1.width+300;
93 var endY = 0;
94
95 var tl = new TimelineMax({repeat:2});
96
97 tl.set(img1, { css: { top: startY,} });
98
99 tl.to("#check", 0.6, {left:-305, ease:Power1.easeInOut, delay:.5 });
100
101 tl.to("#txt1", 0.6, {left:-305, ease:Power1.easeInOut, delay:3.3 });
102 tl.to(img1, 0.6, {left:endX, top:endY, ease:Power1.easeInOut, delay:-.6 });
103 tl.to("#txt2", 0.6, {left:20, ease:Power1.easeInOut, delay:-.6 });
104
105 tl.to("#txt2", 0.6, {left:-305, ease:Power1.easeInOut, delay:3.3 });
106 tl.to(img1, 0.6, {left:-305, opacity:0, ease:Power1.easeInOut, delay:-.6 });
107 tl.to(dark, 0.6, {left:-305, opacity:0, ease:Power1.easeInOut, delay:-.6 });
108 tl.to("#triangle", 0.6, {left:-305, ease:Power1.easeInOut, delay:-.6 });
109 tl.to("#triangle", 0.6, {left:-305, ease:Power1.easeInOut, delay:4 });
110
111 /* console.log("time:" + tl.duration()); */
112 };
113 img1.onerror = function() {
114 // the image has failed
115 };
116 img1.src = "assets/img1.jpg";
117
118 </script>
119
120 <div id="border">
121 <img src="assets/img2@2x.png" alt="img2@2x" width="300">
122 <img id="img1" src="assets/img1.jpg" alt="img1" width="649" height="253">
123 <img id="dark" src="assets/darken.png">
124 <img id="txt1" src="assets/txt1@2x.png" alt="txt1@2x" width="180">
125 <img id="txt2" src="assets/txt2@2x.png" alt="txt2@2x" width="182">
126 <img id="triangle" src="assets/triangle@2x.png" alt="triangle@2x" width="90">
127 <img id="check" src="assets/check@2x.png" alt="check@2x" width="300">
128
129
130 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
131 </div>
132
133
134
135 </body>
136
137 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5
6 <title>HTML5 Ad</title>
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "https://businesstobruce.com/portelgin";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22
23
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 }
31 a{
32 text-decoration: none;
33 }
34 #click-tag{
35 display: block;
36 position: absolute;
37 width: 100%;
38 height: 100%;
39 }
40 #border{
41 position: relative;
42 width: 100%;
43 height: 100%;
44 border: 1px solid #939598;
45 background-color: #FFFFFF;
46 overflow: hidden;
47 cursor: pointer;
48 box-sizing: border-box;
49 }
50 img {
51 position: absolute;
52 }
53
54
55 /* Custom per ad */
56
57 body{
58 width: 728px;
59 height: 90px;
60 }
61
62 .txt{
63 top:20px;
64 left: 140px;
65 }
66 #txt2{
67 top:20px;
68 left: 730px;
69 }
70
71 </style>
72
73 </head>
74
75 <body>
76
77 <!-- GREENSOCK-->
78 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
79 <script>
80
81
82 var img1 = new Image();
83 img1.onload = function() {
84 // the image is ready
85 // calculate img1 size and move it from bottom left to top right
86 var img1 = document.getElementById("img1");
87 var startX = 0;
88 var startY = - img1.height+90;
89 var endX = - img1.width+728;
90 var endY = 0;
91
92 var tl = new TimelineMax({repeat:2});
93
94 tl.set(img1, { css: { top: startY,} });
95
96 tl.to("#check", 0.6, {left:-730, ease:Power1.easeInOut, delay:.5 });
97
98 tl.to("#txt1", 0.6, {left:-730, ease:Power1.easeInOut, delay:3.3 });
99 tl.to(img1, 0.6, {left:endX, top:endY, ease:Power1.easeInOut, delay:-.6 });
100 tl.to("#txt2", 0.6, {left:140, ease:Power1.easeInOut, delay:-.6 });
101
102 tl.to("#txt2", 0.6, {left:-730, ease:Power1.easeInOut, delay:3.3 });
103 tl.to(img1, 0.6, {left:-730, opacity:0, ease:Power1.easeInOut, delay:-.6 });
104 tl.to("#triangle", 0.6, {left:-730, ease:Power1.easeInOut, delay:-.6 });
105 tl.to("#triangle", 0.6, {left:-730, ease:Power1.easeInOut, delay:4 });
106
107 /* console.log("time:" + tl.duration()); */
108 };
109 img1.onerror = function() {
110 // the image has failed
111 };
112 img1.src = "assets/img1.jpg";
113
114 </script>
115
116 <div id="border">
117 <img src="assets/img2@2x.png" alt="img2@2x" width="728">
118 <img id="img1" src="assets/img1.jpg">
119 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="386">
120 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="315">
121 <img id="triangle" src="assets/triangle.png" alt="triangle" height="90">
122 <img id="check" src="assets/check@2x.png" alt="check@2x" width="728">
123
124 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
125 </div>
126
127
128
129 </body>
130
131 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>HTML5 Online Ads</title>
8 <meta name="description" content="An interactive getting started guide for Brackets.">
9 <link rel="stylesheet" href="main.css">
10 <script src="main.js"></script>
11 </head>
12 <body>
13
14 <!-- <h3><a href="index.html">Wiarton</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_kin.html">Kincardine</a></h3> -->
15 <h3>Port Elgin</h3>
16
17 <iframe id='' class="b728x90 float" scrolling="no" src="728x90_PortElgin/index.html"></iframe>
18 <div style="width:700px">
19 <iframe id='' class="b300x250 float" scrolling="no" src="300x250_PortElgin/index.html"></iframe>
20 </div>
21 <!-- <iframe id='' class="b300x600 stacked" scrolling="no" src="300x600_Wiarton/index.html"></iframe> -->
22
23 </body>
24 </html>
1 html {
2 background-color: #d4d4d4;
3 }
4
5 body {
6 margin: 0 auto;
7 padding: 2em 2em 4em;
8 font-family: Helvetica, Arial, sans-serif;
9 font-size: 14px;
10 line-height: 1.5em;
11 color: #8e8e8e;
12 }
13
14 h1, h2, h3, h4, h5, h6 {
15 font-weight: 600;
16 line-height: 1.3em;
17 margin-left: 10px;
18 }
19 a {
20 color: #8e8e8e;
21 }
22 a:hover {
23 color: #FFFFFF;
24 }
25 iframe, img {
26 margin: 10px;
27 /* border: 1px #d4d4d4 solid; */
28 border: 0px fuchsia solid;
29 overflow: hidden;
30 iframe::-webkit-scrollbar {
31 display: none;
32 };
33 }
34
35 .stacked {
36 display: flex;
37
38 }
39 .float {
40 display: inline-flex;
41 vertical-align: top;
42 }
43 .b300x250 {
44 width: 300px;
45 height: 250px;
46 }
47 .b728x90 {
48 width: 728px;
49 height: 90px;
50 }
51 .b300x600 {
52 width: 300px;
53 height: 600px;
54 }
55 .b600x566 {
56 width: 600px;
57 height: 566px;
58 }
1 js file
...\ No newline at end of file ...\ No newline at end of file