Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
add creative template
- Loading branch information
Showing
4 changed files
with
378 additions
and
0 deletions.
There are no files selected for viewing
111 changes: 111 additions & 0 deletions
111
Creative Template/womantlak/overthepage_250x250_womantalk.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
document.addEventListener('readystatechange', function () { | ||
if (document.readyState == 'complete') { | ||
|
||
var overlayStyle = "\ | ||
.area-overlay-mob {\ | ||
position: fixed;\ | ||
display: none;\ | ||
width: 100%;\ | ||
height: 100%;\ | ||
top: 0;\ | ||
left: 0;\ | ||
right: 0;\ | ||
bottom: 0;\ | ||
background-color: rgba(0, 0, 0, 0.50); \ | ||
z-index: 9999999 !important;\ | ||
}\ | ||
.image-ads-mob {\ | ||
width: 250px;\ | ||
height: 250px;\ | ||
position: relative;\ | ||
top: 50%;\ | ||
left: 50%;\ | ||
transform: translate(-50%,-50%);\ | ||
-ms-transform: translate(-50%,-50%);\ | ||
}\ | ||
.image-ads-mob img {\ | ||
max-width: 100%;\ | ||
max-height: 100%;\ | ||
}\ | ||
.close-overlay-mob img{\ | ||
position: absolute;\ | ||
width: 8%;\ | ||
right: 0px;\ | ||
bottom: 240px;\ | ||
left: 240px;\ | ||
cursor: pointer;\ | ||
}\ | ||
.zoomIn {\ | ||
-webkit-animation-name: zoomIn;\ | ||
animation-name: zoomIn;\ | ||
}\ | ||
.animated {\ | ||
-webkit-animation-duration: 0.3s;\ | ||
animation-duration: 0.3s;\ | ||
-webkit-animation-fill-mode: both;\ | ||
animation-fill-mode: both;\ | ||
}\ | ||
@-webkit-keyframes zoomIn {\ | ||
from {\ | ||
opacity: 0;\ | ||
-webkit-transform: scale3d(0.3, 0.3, 0.3);\ | ||
transform: scale3d(0.3, 0.3, 0.3);\ | ||
}\ | ||
50% {\ | ||
opacity: 1;\ | ||
}\ | ||
}\ | ||
@keyframes zoomIn {\ | ||
from {\ | ||
opacity: 0;\ | ||
-webkit-transform: scale3d(0.3, 0.3, 0.3);\ | ||
transform: scale3d(0.3, 0.3, 0.3);\ | ||
}\ | ||
50% {\ | ||
opacity: 1;\ | ||
}\ | ||
}"; | ||
|
||
var overlayElementStyle = parent.document.createElement('style'); | ||
overlayElementStyle.type = 'text/css'; | ||
overlayElementStyle.appendChild(document.createTextNode(overlayStyle)); | ||
parent.document.getElementsByTagName('head')[0].appendChild(overlayElementStyle); | ||
|
||
var overlayTemplate = '\ | ||
<div class="image-ads-mob" id="image-ads-mob">\ | ||
<div class="close-overlay-mob" id="close-overlay-mob" onclick="offOverlay()"><img src="[%ButtonClose%]" alt="close"></div>\ | ||
<a target="_blank" href="%%CLICK_URL_UNESC%%[%LandingPage%]">\ | ||
<img src="[%FileImage%]" alt="images ads">\ | ||
</a>\ | ||
<img src="%%VIEW_URL_UNESC%%" style="display:none">\ | ||
</div>'; | ||
|
||
var overlayElementTemplate = parent.document.createElement('div'); | ||
overlayElementTemplate.innerHTML = overlayTemplate; | ||
overlayElementTemplate.setAttribute('class', 'area-overlay-mob zoomIn animated'); | ||
overlayElementTemplate.setAttribute('id', 'area-overlay-mob'); | ||
overlayElementTemplate.setAttribute('onClick', 'offOverlay()'); | ||
parent.document.querySelector('div.overlay-mobile').parentNode.insertBefore(overlayElementTemplate, parent.document.querySelector('div.overlay-mobile')); | ||
|
||
var overlayScript = '\ | ||
onOverlay();\ | ||
function onOverlay() {\ | ||
document.getElementById("area-overlay-mob").style.display = "block";\ | ||
console.log("open overlay");\ | ||
setTimeout(function () {\ | ||
document.getElementById("area-overlay-mob").style.display = "none";\ | ||
console.log("auto close overlay");\ | ||
}, 15000);\ | ||
}\ | ||
function offOverlay() {\ | ||
document.getElementById("area-overlay-mob").style.display = "none";\ | ||
console.log("close overlay");\ | ||
}'; | ||
|
||
var overlayElementScript = parent.document.createElement('script'); | ||
overlayElementScript.text = overlayScript; | ||
parent.document.getElementsByTagName('head')[0].appendChild(overlayElementScript); | ||
console.log('draw overlay mobile'); | ||
|
||
} | ||
}) |
116 changes: 116 additions & 0 deletions
116
Creative Template/womantlak/overthepage_500x350_womantlak.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,116 @@ | ||
document.addEventListener('readystatechange', function () { | ||
if (document.readyState == 'complete') { | ||
|
||
var overlayStyle = "\ | ||
.area-overlay {\ | ||
position: fixed;\ | ||
display: none;\ | ||
width: 100%;\ | ||
height: 100%;\ | ||
top: 0;\ | ||
left: 0;\ | ||
right: 0;\ | ||
bottom: 0;\ | ||
background-color: rgba(0, 0, 0, 0.50);\ | ||
z-index: 9999999 !important;\ | ||
}\ | ||
.image-ads {\ | ||
width: 500px;\ | ||
height: 350px;\ | ||
position: absolute;\ | ||
top: 50%;\ | ||
left: 50%;\ | ||
transform: translate(-50%,-50%);\ | ||
-ms-transform: translate(-50%,-50%);\ | ||
}\ | ||
.image-ads img {\ | ||
max-width: 100%;\ | ||
max-height: 100%;\ | ||
}\ | ||
.close-overlay img{\ | ||
position: absolute;\ | ||
right: -11px;\ | ||
bottom: 338px;\ | ||
cursor: pointer;\ | ||
}\ | ||
/* effect zoomin for banner */\ | ||
.zoomIn {\ | ||
-webkit-animation-name: zoomIn;\ | ||
animation-name: zoomIn;\ | ||
}\ | ||
\ | ||
.animated {\ | ||
-webkit-animation-duration: 0.3s;\ | ||
animation-duration: 0.3s;\ | ||
-webkit-animation-fill-mode: both;\ | ||
animation-fill-mode: both;\ | ||
}\ | ||
\ | ||
@-webkit-keyframes zoomIn {\ | ||
from {\ | ||
opacity: 0;\ | ||
-webkit-transform: scale3d(0.3, 0.3, 0.3);\ | ||
transform: scale3d(0.3, 0.3, 0.3);\ | ||
}\ | ||
\ | ||
50% {\ | ||
opacity: 1;\ | ||
}\ | ||
}\ | ||
\ | ||
@keyframes zoomIn {\ | ||
from {\ | ||
opacity: 0;\ | ||
-webkit-transform: scale3d(0.3, 0.3, 0.3);\ | ||
transform: scale3d(0.3, 0.3, 0.3);\ | ||
}\ | ||
\ | ||
50% {\ | ||
opacity: 1;\ | ||
}\ | ||
}"; | ||
|
||
var overlayElementStyle = parent.document.createElement('style'); | ||
overlayElementStyle.type = 'text/css'; | ||
overlayElementStyle.appendChild(document.createTextNode(overlayStyle)); | ||
parent.document.getElementsByTagName('head')[0].appendChild(overlayElementStyle); | ||
|
||
var overlayTemplate = '\ | ||
<div class="image-ads" id="image-ads">\ | ||
<div class="close-overlay" id="close-overlay" onclick="offOverlay()"><img src="[%ButtonClose%]" alt="close"></div>\ | ||
<a target="_blank" href="%%CLICK_URL_UNESC%%[%LandingPage%]">\ | ||
<img src="[%FileImage%]" alt="images ads">\ | ||
</a>\ | ||
<img src="%%VIEW_URL_UNESC%%" style="display:none">\ | ||
</div>'; | ||
|
||
var overlayElementTemplate = parent.document.createElement('div'); | ||
overlayElementTemplate.innerHTML = overlayTemplate; | ||
overlayElementTemplate.setAttribute('class', 'area-overlay zoomIn animated'); | ||
overlayElementTemplate.setAttribute('id', 'area-overlay'); | ||
overlayElementTemplate.setAttribute('onClick', 'offOverlay()'); | ||
parent.document.querySelector('div.overlay-desktop').parentNode.insertBefore(overlayElementTemplate, parent.document.querySelector('div.overlay-desktop')); | ||
|
||
|
||
var overlayScript = '\ | ||
onOverlay();\ | ||
function onOverlay() {\ | ||
document.getElementById("area-overlay").style.display = "block";\ | ||
console.log("open overlay");\ | ||
setTimeout(function () {\ | ||
document.getElementById("area-overlay").style.display = "none";\ | ||
console.log("auto close overlay");\ | ||
}, 15000);\ | ||
}\ | ||
function offOverlay() {\ | ||
document.getElementById("area-overlay").style.display = "none";\ | ||
console.log("clicked close overlay");}\ | ||
'; | ||
|
||
var overlayElementScript = parent.document.createElement('script'); | ||
overlayElementScript.text = overlayScript; | ||
parent.document.getElementsByTagName('head')[0].appendChild(overlayElementScript); | ||
console.log('draw overlay'); | ||
|
||
} | ||
}) |
76 changes: 76 additions & 0 deletions
76
Creative Template/womantlak/parallax_720x1280_womantalk.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
var parallaxStyle = "\ | ||
.title-ads{\ | ||
color: #fff;\ | ||
text-transform: uppercase;\ | ||
font: normal 9px arial;\ | ||
left: 0px;\ | ||
margin: 0px;\ | ||
width: 100%;\ | ||
height: 18px;\ | ||
line-height: 20px;\ | ||
background: #696868;\ | ||
letter-spacing: 1.01px;\ | ||
text-align: center;\ | ||
position: relative;\ | ||
top: 97%;\ | ||
}\ | ||
.landing-page {\ | ||
cursor: pointer;\ | ||
}\ | ||
.main-parallax {\ | ||
background-image: url('[%FileImage%]');\ | ||
background-repeat: no-repeat;\ | ||
background-size: cover;\ | ||
background-attachment: fixed;\ | ||
padding: 0rem;\ | ||
}\ | ||
#main-parallax{\ | ||
position: fixed;\ | ||
display: block;\ | ||
top: 0;\ | ||
left: 0;\ | ||
width: 100%;\ | ||
height: 100% !important;\ | ||
transform: translateZ(0);\ | ||
will-change: transform;\ | ||
z-index: 1;\ | ||
background-attachment: scroll !important;\ | ||
}\ | ||
.parallax-section {\ | ||
position: relative;\ | ||
width: 100%;\ | ||
height: 500px;\ | ||
}\ | ||
.parallax-child-section {\ | ||
clip: rect(0,auto,auto,0);\ | ||
position: absolute;\ | ||
top: 0;\ | ||
left: 0;\ | ||
width: 100%;\ | ||
height: 500px;\ | ||
}\ | ||
"; | ||
|
||
var parallaxElementStyle = parent.document.createElement('style'); | ||
parallaxElementStyle.type = 'text/css'; | ||
parallaxElementStyle.appendChild(document.createTextNode(parallaxStyle)); | ||
parent.document.getElementsByTagName('head')[0].appendChild(parallaxElementStyle); | ||
|
||
var parallaxTemplate = '\ | ||
<div class="title-ads">Advertisement</div>\ | ||
<div class="parallax-section">\ | ||
<div class="parallax-child-section">\ | ||
<a href="%%CLICK_URL_UNESC%%[%LandingPage%]" class="landing-page" target="_blank">\ | ||
<section class="main-parallax" id="main-parallax"></section>\ | ||
<img src="%%VIEW_URL_UNESC%%" style="display:none">\ | ||
</a>\ | ||
</div>\ | ||
</div>\ | ||
<div class="title-ads">Advertisement</div>\ | ||
'; | ||
|
||
var parallaxElementTemplate = parent.document.createElement('div'); | ||
parallaxElementTemplate.innerHTML = parallaxTemplate; | ||
parallaxElementTemplate.setAttribute('class', 'parallaxAds'); | ||
parallaxElementTemplate.setAttribute('id', 'parallaxAds'); | ||
parent.document.querySelector('div.parallax-mobile').parentNode.insertBefore(parallaxElementTemplate, parent.document.querySelector('div.parallax-mobile')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
var parallaxStyle = "\ | ||
.title-ads{\ | ||
color: #fff;\ | ||
text-transform: uppercase;\ | ||
font: normal 9px arial;\ | ||
left: 0px;\ | ||
margin: 0px;\ | ||
width: 100%;\ | ||
height: 18px;\ | ||
line-height: 20px;\ | ||
background: #696868;\ | ||
letter-spacing: 1.01px;\ | ||
text-align: center;\ | ||
position: relative;\ | ||
top: 97%;\ | ||
}\ | ||
.landing-page {\ | ||
cursor: pointer;\ | ||
}\ | ||
.main-parallax {\ | ||
background-image: url('[%FileImage%]');\ | ||
background-repeat: no-repeat;\ | ||
background-size: auto;\ | ||
background-attachment: fixed;\ | ||
padding: 0rem;\ | ||
}\ | ||
#main-parallax{\ | ||
position: fixed;\ | ||
display: block;\ | ||
top: 50px;\ | ||
width: 100%;\ | ||
height: 100% !important;\ | ||
transform: translateZ(0);\ | ||
will-change: transform;\ | ||
z-index: 1;\ | ||
background-attachment: scroll !important;\ | ||
}\ | ||
.parallax-section {\ | ||
position: relative;\ | ||
width: 100%;\ | ||
height: 300px;\ | ||
}\ | ||
.parallax-child-section {\ | ||
clip: rect(0,auto,auto,0);\ | ||
position: absolute;\ | ||
top: 0;\ | ||
left: 0;\ | ||
width: 100%;\ | ||
height: 300px;\ | ||
}\ | ||
"; | ||
|
||
var parallaxElementStyle = parent.document.createElement('style'); | ||
parallaxElementStyle.type = 'text/css'; | ||
parallaxElementStyle.appendChild(document.createTextNode(parallaxStyle)); | ||
parent.document.getElementsByTagName('head')[0].appendChild(parallaxElementStyle); | ||
|
||
var parallaxTemplate = '\ | ||
<div class="title-ads">Advertisement</div>\ | ||
<div class="parallax-section">\ | ||
<div class="parallax-child-section">\ | ||
<a href="%%CLICK_URL_UNESC%%[%LandingPage%]" class="landing-page" target="_blank">\ | ||
<section class="main-parallax" id="main-parallax"></section>\ | ||
<img src="%%VIEW_URL_UNESC%%" style="display:none">\ | ||
</a>\ | ||
</div>\ | ||
</div>\ | ||
<div class="title-ads">Advertisement</div>\ | ||
'; | ||
|
||
var parallaxElementTemplate = parent.document.createElement('div'); | ||
parallaxElementTemplate.innerHTML = parallaxTemplate; | ||
parallaxElementTemplate.setAttribute('class', 'parallaxAds'); | ||
parallaxElementTemplate.setAttribute('id', 'parallaxAds'); | ||
parent.document.querySelector('div.parallax-desktop').parentNode.insertBefore(parallaxElementTemplate, parent.document.querySelector('div.parallax-desktop')); |