Re-organised and migrated id to class
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.
This commit is contained in:
287
Example Project/GWD_CCG_example.html
Normal file
287
Example Project/GWD_CCG_example.html
Normal file
@@ -0,0 +1,287 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user