Mark Rapson
fdb9ff8992
Instead of IDs being used this has been changed to HTML classes to allow for multiple items to arise from the same property. Along side this CasparCG.js now checks if the entity is an img tag and replace src as opposed to innerHTML.
288 lines
8.4 KiB
HTML
288 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>nytest</title>
|
|
<meta name="generator" content="Google Web Designer 4.1.0.0711">
|
|
<style type="text/css" id="gwd-text-style">
|
|
p {
|
|
margin: 0px;
|
|
}
|
|
h1 {
|
|
margin: 0px;
|
|
}
|
|
h2 {
|
|
margin: 0px;
|
|
}
|
|
h3 {
|
|
margin: 0px;
|
|
}
|
|
</style>
|
|
<style type="text/css">
|
|
html, body {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
margin: 0px;
|
|
}
|
|
body {
|
|
background-color: transparent;
|
|
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform-style: preserve-3d;
|
|
}
|
|
.gwd-rect-157e {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
border-width: 0px;
|
|
left: 0px;
|
|
top: 830px;
|
|
width: 1920px;
|
|
height: 0px;
|
|
background-image: none;
|
|
background-color: rgb(255, 0, 0);
|
|
}
|
|
@keyframes gwd-gen-lz8mgwdanimation_gwd-keyframes {
|
|
0% {
|
|
height: 0px;
|
|
opacity: 1;
|
|
background-color: rgb(255, 0, 0);
|
|
top: 930px;
|
|
animation-timing-function: linear;
|
|
}
|
|
10% {
|
|
height: 0px;
|
|
animation-timing-function: linear;
|
|
}
|
|
20% {
|
|
height: 80px;
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
30% {
|
|
height: 80px;
|
|
background-color: rgb(255, 0, 0);
|
|
animation-timing-function: linear;
|
|
}
|
|
40% {
|
|
height: 80px;
|
|
opacity: 1;
|
|
background-color: rgb(0, 255, 0);
|
|
top: 930px;
|
|
animation-timing-function: linear;
|
|
}
|
|
50% {
|
|
height: 80px;
|
|
opacity: 1;
|
|
background-color: rgb(0, 0, 255);
|
|
top: 930px;
|
|
animation-timing-function: linear;
|
|
}
|
|
60% {
|
|
height: 80px;
|
|
opacity: 1;
|
|
background-color: rgb(255, 0, 0);
|
|
top: 930px;
|
|
animation-timing-function: linear;
|
|
}
|
|
90% {
|
|
height: 80px;
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
100% {
|
|
height: 80px;
|
|
opacity: 0;
|
|
background-color: rgb(255, 0, 0);
|
|
top: 930px;
|
|
animation-timing-function: linear;
|
|
}
|
|
}
|
|
.htmlNoPages .gwd-gen-lz8mgwdanimation {
|
|
animation: gwd-gen-lz8mgwdanimation_gwd-keyframes 5s linear 0s 1 normal forwards;
|
|
}
|
|
@keyframes gwd-gen-eb0kgwdanimation_gwd-keyframes {
|
|
0% {
|
|
height: 0px;
|
|
background-color: rgb(255, 0, 0);
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
10% {
|
|
height: 80px;
|
|
background-color: rgb(255, 0, 0);
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
30% {
|
|
background-color: rgb(255, 0, 0);
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
40% {
|
|
background-color: rgb(0, 255, 0);
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
50% {
|
|
height: 80px;
|
|
background-color: rgb(0, 0, 255);
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
60% {
|
|
height: 80px;
|
|
background-color: rgb(255, 0, 0);
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
90% {
|
|
height: 80px;
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
100% {
|
|
height: 80px;
|
|
background-color: rgb(255, 0, 0);
|
|
opacity: 0;
|
|
animation-timing-function: linear;
|
|
}
|
|
}
|
|
.htmlNoPages .gwd-gen-eb0kgwdanimation {
|
|
animation: gwd-gen-eb0kgwdanimation_gwd-keyframes 5s linear 0s 1 normal forwards;
|
|
}
|
|
.gwd-svg-40l0 {
|
|
top: 930px;
|
|
height: 0px;
|
|
opacity: 1;
|
|
}
|
|
.gwd-p-hxjo {
|
|
position: absolute;
|
|
height: 79.9761px;
|
|
font-family: Tahoma;
|
|
font-size: 48px;
|
|
left: 0px;
|
|
width: 1920px;
|
|
margin: 0px 0px 0px 40px;
|
|
top: 840px;
|
|
color: rgba(255, 255, 255, 0);
|
|
}
|
|
@keyframes gwd-gen-1hvogwdanimation_gwd-keyframes {
|
|
0% {
|
|
opacity: 0;
|
|
animation-timing-function: linear;
|
|
}
|
|
10% {
|
|
opacity: 0;
|
|
animation-timing-function: linear;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
animation-timing-function: linear;
|
|
}
|
|
}
|
|
.htmlNoPages .gwd-gen-1hvogwdanimation {
|
|
animation: gwd-gen-1hvogwdanimation_gwd-keyframes 5s linear 0s 1 normal forwards;
|
|
}
|
|
@keyframes gwd-gen-1gmrgwdanimation_gwd-keyframes {
|
|
0% {
|
|
opacity: 0;
|
|
animation-timing-function: linear;
|
|
}
|
|
20% {
|
|
opacity: 0;
|
|
animation-timing-function: linear;
|
|
}
|
|
30% {
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
animation-timing-function: linear;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
animation-timing-function: linear;
|
|
}
|
|
}
|
|
.htmlNoPages .gwd-gen-1gmrgwdanimation {
|
|
animation: gwd-gen-1gmrgwdanimation_gwd-keyframes 5s linear 0s 1 normal forwards;
|
|
}
|
|
.gwd-p-1i4z {
|
|
top: 940px;
|
|
color: rgb(255, 255, 255);
|
|
opacity: 0;
|
|
width: 1880px;
|
|
}
|
|
.gwd-p-1hcy {
|
|
color: rgb(255, 255, 255);
|
|
opacity: 0;
|
|
width: 1880px;
|
|
}
|
|
.gwd-rect-ptf0 {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" gwd-events="support" src="gwd-events-support.1.0.js"></script>
|
|
<script type="text/javascript" gwd-events="handlers">
|
|
gwd.auto_BodyEvent_1 = function(event) {
|
|
// GWD Predefined Function
|
|
gwd.actions.timeline.pause('document.body');
|
|
};
|
|
gwd.auto_BodyEvent_2 = function(event) {
|
|
// GWD Predefined Function
|
|
gwd.actions.timeline.pause('document.body');
|
|
};
|
|
gwd.auto_BodyEvent_3 = function(event) {
|
|
// GWD Predefined Function
|
|
gwd.actions.timeline.pause('document.body');
|
|
};
|
|
gwd.auto_BodyEvent_4 = function(event) {
|
|
// GWD Predefined Function
|
|
gwd.actions.timeline.pause('document.body');
|
|
};
|
|
</script>
|
|
<script type="text/javascript" gwd-events="registration">
|
|
// Support code for event handling in Google Web Designer
|
|
// This script block is auto-generated. Please do not edit!
|
|
gwd.actions.events.registerEventHandlers = function(event) {
|
|
gwd.actions.events.addHandler('document.body', 'event-1', gwd.auto_BodyEvent_1, false);
|
|
gwd.actions.events.addHandler('document.body', 'event-2', gwd.auto_BodyEvent_2, false);
|
|
gwd.actions.events.addHandler('document.body', 'event-3', gwd.auto_BodyEvent_3, false);
|
|
gwd.actions.events.addHandler('document.body', 'event-4', gwd.auto_BodyEvent_4, false);
|
|
gwd.actions.timeline.captureAnimationEnd(document.body);
|
|
};
|
|
gwd.actions.events.deregisterEventHandlers = function(event) {
|
|
gwd.actions.events.removeHandler('document.body', 'event-1', gwd.auto_BodyEvent_1, false);
|
|
gwd.actions.events.removeHandler('document.body', 'event-2', gwd.auto_BodyEvent_2, false);
|
|
gwd.actions.events.removeHandler('document.body', 'event-3', gwd.auto_BodyEvent_3, false);
|
|
gwd.actions.events.removeHandler('document.body', 'event-4', gwd.auto_BodyEvent_4, false);
|
|
gwd.actions.timeline.releaseAnimationEnd(document.body);
|
|
};
|
|
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
|
|
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
|
|
</script>
|
|
<script type="text/javascript" charset="utf-8" src="CasparCG.js"></script>
|
|
</head>
|
|
|
|
<body class="htmlNoPages" data-gwd-animation-labels="stop,4500">
|
|
<svg data-gwd-shape="rectangle" class="gwd-rect-157e gwd-gen-lz8mgwdanimation gwd-svg-40l0"></svg>
|
|
<svg data-gwd-shape="rectangle" class="gwd-rect-157e gwd-gen-eb0kgwdanimation gwd-rect-ptf0"></svg>
|
|
<p class="gwd-p-hxjo gwd-gen-1hvogwdanimation gwd-p-1hcy CasparCG-f0">This is f0</p>
|
|
<p class="gwd-p-hxjo gwd-gen-1gmrgwdanimation gwd-p-1i4z CasparCG-f1">This is f1</p>
|
|
<div class="gwd-animation-event event-1-animation" data-event-name="event-1" data-event-time="1500"></div>
|
|
<div class="gwd-animation-event event-2-animation" data-event-name="event-2" data-event-time="2000"></div>
|
|
<div class="gwd-animation-event event-3-animation" data-event-name="event-3" data-event-time="2500"></div>
|
|
<div class="gwd-animation-event event-4-animation" data-event-name="event-4" data-event-time="3000"></div>
|
|
</body>
|
|
|
|
</html>
|