Skip to content

Instantly share code, notes, and snippets.

@qubodup

qubodup/credits.htm

Last active August 6, 2020 08:40
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save qubodup/28dc92b1609a9901abde9bbda9f0239f to your computer and use it in GitHub Desktop.
Save qubodup/28dc92b1609a9901abde9bbda9f0239f to your computer and use it in GitHub Desktop.
Download ZIP
Shotcut Scrolling Credits Text Animation WebVfx example
Raw
credits.htm
<!DOCTYPE html><html><head><meta charset="UTF-8">
<script src="qrc:/scripts/jquery.js"></script>
<script src="qrc:/scripts/rangy-core.js"></script>
<script src="qrc:/scripts/rangy-cssclassapplier.js"></script>
<script src="qrc:/scripts/htmleditor.js"></script>
<!-- this is possible thanks to http://www.elusien.co.uk/shotcut/ -->
<style>
html, body {margin: 0; width: 100%; height: 100%; overflow: hidden; }
#credits {position: absolute; top: 100%; width: 100%; padding: 25px 0; margin:0; text-align: center;}
/****************************************/
/* You may change any styles below here */
/****************************************/
#credits * {font: 25px Open Sans Condensed, Liberation Sans, Arial, sans-serif; color: #fff;
text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
} /* Alter the color especially according to your background, as well as the font */
#credits h1 {font-size: 3em;} /* Alter the size especially according to your requirement */
#credits .legal {font-size: 0.9em; width: 50%; margin: auto; color: #ddd;} /* Alter the color especially according to your background */
/********************************************************/
/* Change CSS below only if you know what you are doing */
/********************************************************/
#credits table, #credits tr {width: 100%; font-size: 1em;}
#credits td:first-child {width: 45%; padding: 8px 0.5%; font-size: 1.0em; text-align: right;}
#credits td:last-child {width: 45%; padding: 8px 0.5%; font-size: 2.0em; text-align: left;}
</style>
</head>
<body>
<div id="credits" data-control="15:30"> <!-- Do not change the ID of this div, anything in it will appear on the scrolling credits -->
<h1>IF THIS DOESN'T MAKE YOU SUBSCRIBE I DON'T KNOW WHAT WILL</h1>
<h1>Cast</h1>
<table>
<tr><td>Smart Cookie</td><td>Brokeback Cardiac</td></tr>
<tr><td>Bright Head</td><td>Brokemook Cambridge</td></tr>
<tr><td>Dark Squishie</td><td>Barlendey Kumberlatch</td></tr>
</table>
<h1>Credits</h1>
<table>
<tr><td>Creative Lead</td><td>Tux</td></tr>
<tr><td>Coder</td><td>Linus</td></tr>
<tr><td>Writer</td><td>Bill</td></tr>
</table>
<h1>Locations</h1>
<p>Memphis, France</p>
<p>Ravenfield, Sweden</p>
<p>Fallingwater, Pennsylvania, USA</p>
</div>
</body>
<script src="./WebVfx.js"></script>
<script>
webvfx_add_to_frame = [scroll]; // Tells Elusien's WebVfx framework to run the "scroll" routine for each frame.
SC = { // SC (Scrolling Cedits) has to be of GLOBAL scope
credits : {},
style : {},
initial_top : 0,
total_height : 0
};
function scroll(time, browser, frame_number, frame_rate) {
if (time === 0.0) {
SC.credits = document.getElementById('credits');
SC.style = SC.credits.style;
SC.initial_top = SC.credits.offsetTop;
SC.total_height = SC.credits.offsetHeight + SC.initial_top;
} else {
SC.style.top = (SC.initial_top - SC.total_height * time) + "px"; // Scrolls up an increment
}
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment