This time I will share jQuery Plugin and tutorial about Create A Rolling End Credits Effect In jQuery – Roll Credits, hope it will help you in programming stack.
| File Size: | 658 KB |
|---|---|
| Views Total: | 3088 |
| 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:
1 |
<div id="screen"> |
2 |
</div> |
2. Load the needed jQuery library on the webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3. Define arrays of names and corresponding titles.
01 |
// Add all names here |
02 |
var names = [ |
03 |
"Alfredo Hawkins", |
04 |
"Rex Harris", |
05 |
"Renee Barber", |
06 |
"Fernando Lamb", |
07 |
"Monique Holmes", |
08 |
"Kristen Smith", |
09 |
"Nicholas Allen", |
10 |
"Merle Reeves", |
11 |
"Rodolfo Gregory", |
12 |
"Jeffery Foster", |
13 |
"Jackie Hubbard", |
14 |
"Arlene Hopkins", |
15 |
"Amos Sanchez", |
16 |
"Judy Peterson", |
17 |
"Kerry Wallace", |
18 |
"Lori Murphy", |
19 |
"Leon Perez", |
20 |
"Tammy Snyder", |
21 |
"Loretta Fitzgerald", |
22 |
"Jan Silva" |
23 |
]; |
24 |
25 |
// Add corresponding title here |
26 |
var titles = [ |
27 |
"Director", |
28 |
"Executive Producer", |
29 |
"Executive Producer", |
30 |
"Screen Writer", |
31 |
"Screen Writer", |
32 |
"Art Director", |
33 |
"Lighting Director", |
34 |
"Camera Crew", |
35 |
"Sound Crew", |
36 |
"Storyboard", |
37 |
"Costume Designer", |
38 |
"Score Composer", |
39 |
"Stunt Director", |
40 |
"<a href="https://www.jqueryscript.net/animation/">Animation</a> Director", |
41 |
"Location Consultant", |
42 |
"Accountant", |
43 |
"Lead Makeup", |
44 |
"Lead Hair", |
45 |
"Script Supervisor", |
46 |
"Prop Master" |
47 |
] |
4. The core JavaScript to active the rolling credit effect.
01 |
function writeName(){ |
02 |
03 |
var i = 0, |
04 |
employee, |
05 |
name, |
06 |
title, |
07 |
bottom; |
08 |
09 |
var interval = setInterval(function() { |
10 |
employee = '.employee.' + i; |
11 |
name = '.name.' + i; |
12 |
title = '.title.' + i; |
13 |
$('<div></div>').appendTo('#screen').addClass('employee '+i); |
14 |
$('<h4></h4>').appendTo(employee).addClass('title '+i); |
15 |
$('<h2></h2>').appendTo(employee).addClass('name '+i); |
16 |
$(name).text(names[i]); |
17 |
$(title).text(titles[i]); |
18 |
i++; |
19 |
if(i >= names.length) clearInterval(interval); |
20 |
}, 4000); |
21 |
22 |
} |
23 |
24 |
function fadeInText(){ |
25 |
var i = 0; |
26 |
if (i < 150){ |
27 |
var interval = setInterval(function(){ |
28 |
$('h2').css('opacity', '+=0.01'); |
29 |
$('h4').css('opacity', '+=0.01'); |
30 |
i++; |
31 |
},50); |
32 |
} |
33 |
34 |
} |
35 |
36 |
function scrollText(){ |
37 |
var interval = setInterval(function(){ |
38 |
$('.employee').css('bottom', '+=1px'); |
39 |
$('.employee').css('opacity', '-=0.0025'); |
40 |
}, 50); |
41 |
} |
42 |
43 |
$(function(){ |
44 |
writeName(); |
45 |
fadeInText(); |
46 |
scrollText(); |
47 |
}) |
This awesome jQuery plugin is developed by mlabita37. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
