Create A Rolling End Credits Effect In jQuery - Roll Credits
File Size: | 658 KB |
---|---|
Views Total: | 4161 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Roll Credits makes use of jQuery to help you create scrolling end credits on the webpage to list complete names and corresponding titles. Similar to the vertical text scroller with a fade in/out animation effect.
How to use it:
1. Create a screen container on the webpage as follow:
<div id="screen"> </div>
2. Load the needed jQuery library on the webpage.
<script src="//code.jquery.com/jquery.min.js"></script>
3. Define arrays of names and corresponding titles.
// Add all names here var names = [ "Alfredo Hawkins", "Rex Harris", "Renee Barber", "Fernando Lamb", "Monique Holmes", "Kristen Smith", "Nicholas Allen", "Merle Reeves", "Rodolfo Gregory", "Jeffery Foster", "Jackie Hubbard", "Arlene Hopkins", "Amos Sanchez", "Judy Peterson", "Kerry Wallace", "Lori Murphy", "Leon Perez", "Tammy Snyder", "Loretta Fitzgerald", "Jan Silva" ]; // Add corresponding title here var titles = [ "Director", "Executive Producer", "Executive Producer", "Screen Writer", "Screen Writer", "Art Director", "Lighting Director", "Camera Crew", "Sound Crew", "Storyboard", "Costume Designer", "Score Composer", "Stunt Director", "Animation Director", "Location Consultant", "Accountant", "Lead Makeup", "Lead Hair", "Script Supervisor", "Prop Master" ]
4. The core JavaScript to active the rolling credit effect.
function writeName(){ var i = 0, employee, name, title, bottom; var interval = setInterval(function() { employee = '.employee.' + i; name = '.name.' + i; title = '.title.' + i; $('<div></div>').appendTo('#screen').addClass('employee '+i); $('<h4></h4>').appendTo(employee).addClass('title '+i); $('<h2></h2>').appendTo(employee).addClass('name '+i); $(name).text(names[i]); $(title).text(titles[i]); i++; if(i >= names.length) clearInterval(interval); }, 4000); } function fadeInText(){ var i = 0; if (i < 150){ var interval = setInterval(function(){ $('h2').css('opacity', '+=0.01'); $('h4').css('opacity', '+=0.01'); i++; },50); } } function scrollText(){ var interval = setInterval(function(){ $('.employee').css('bottom', '+=1px'); $('.employee').css('opacity', '-=0.0025'); }, 50); } $(function(){ writeName(); fadeInText(); scrollText(); })
This awesome jQuery plugin is developed by mlabita37. For more Advanced Usages, please check the demo page or visit the official website.