Feature Suggestions

Improve "The Crawl"

The default looks really good in the tiny (1580x300) preview window but if you want it in eg. 16:9 aspect ratio or simply fullscreen (1280x720 / 1920x1080 / 2560x1440) you run into various problems.

a) The text is stretched because you actually stretch the 300px tall window to eg. 720px or 1080px.

b) Text starts (suddenly pops in) at the lower 3rd of the whole window instead of the outside

 

I modified it using Custom HTML/CSS and got it working (nearly as it looks in the preview window) but also added the cool fader effect you still had in the code :)

 

EDIT: Using the code below you add this widget as a source with the resolution of 1600x900 (16:9 aspect ratio) and then you can resize or scale it to your needs.

 

Custom HTML

<div class="fade"></div>
<div class="marquee-wrapper" style="display:none" id="end_credits_container">
<span class="title">{credit_title}</span>
<span class="sub-title">{credit_subtitle}</span>

<!-- container will contain list of credit items -->
<div id="credits_container">
</div>
</div>

<!-- enabled types will be appended in marque -->
<script type="text/template" id="credit_item">
<br>
<div>
<span class="group-title">{label}</span>
<div id="credit_list"></div>
</div>
</script>

<!-- items will be added to credit list -->
<!-- list item is invidual donor, follow etc -->
<script type="text/template" id="list_item">
<span class="credit-container">
<span class="credit-text">{value}</span>
</span>
</script>

 

Custom CSS

body {
margin: 0 auto;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}

.fade {
position: absolute;
width: 100%;
min-height: 60vh;
top: -25px;
background-image: linear-gradient(0deg, transparent, black 75%);
z-index: 2;
}

.end-credits {
display: flex;
justify-content: center;
position: relative;
height: 1200px;
color: #feda4a;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 500%;
font-weight: 600;
letter-spacing: 6px;
line-height: 150%;
perspective: 400px;
text-align: center;
}

span {
display: block;
}

span.group-title {
font-weight: 900;
}

.marquee-wrapper {
position: relative;
top: 99999px;
transform-origin: 50% 100%;
animation: crawl 30s linear;
z-index: 1;
}

.marquee-wrapper > .title {
font-size: 90%;
text-align: center;
}

@keyframes crawl {
0% {
top: 1300px;
transform: rotateX(30deg) translateZ(0);
}
100% {
top: -6000px;
transform: rotateX(25deg) translateZ(-2500px);
}
}
  • aan3kk
  • Dec 11 2017