184 lines
No EOL
4.6 KiB
JavaScript
184 lines
No EOL
4.6 KiB
JavaScript
function scrollText(cont_id, text, options = {}){
|
|
|
|
const opt = Object.assign({
|
|
letter_width: 30,
|
|
letter_height: 50,
|
|
background_color: 'transparent',
|
|
text_color: '#30f030',
|
|
movement_increment: 3,
|
|
interval_increment: 5,
|
|
random_color: false,
|
|
custom_color: false,
|
|
final_color: false,
|
|
initial_position_range: {
|
|
min: -300,
|
|
max: 300
|
|
},
|
|
change_letter_offset: 5
|
|
}, options);
|
|
|
|
const basic_colors = [
|
|
'#ff0000',
|
|
'#ffff00',
|
|
'#00ff00',
|
|
'#00ffff',
|
|
'#0000ff',
|
|
'#ff00ff',
|
|
];
|
|
|
|
var scrollText_offsets = [];
|
|
|
|
function randomInt(min,max){
|
|
return Math.floor(Math.random()*(max-min+1)+min);
|
|
}
|
|
|
|
function randomChar(){
|
|
const charlist = 'qazxswedcvfrtgbnhyujmkiolp1234567890_';
|
|
return charlist[randomInt(0, charlist.length-1)];
|
|
}
|
|
|
|
function intToHex(i) {
|
|
let hex = Number(i).toString(16);
|
|
if (hex.length < 2) {
|
|
hex = "0" + hex;
|
|
}
|
|
return hex;
|
|
}
|
|
|
|
function upColor(elem, start, step, random, colors){
|
|
let newColor;
|
|
if(random){
|
|
if(colors){
|
|
if(!Array.isArray(colors)) colors = basic_colors;
|
|
newColor = colors[randomInt(0,colors.length-1)];
|
|
}else{
|
|
newColor = '#' + intToHex(randomInt(0,255)) + intToHex(randomInt(0,255)) + intToHex(randomInt(0,255));
|
|
}
|
|
}else{
|
|
newColor = opt.text_color;
|
|
}
|
|
elem.style.color = newColor + '' + intToHex(255 - (Math.round( (255*step)/start) ));
|
|
}
|
|
|
|
function move(i) {
|
|
let elem = document.getElementById('scrolltext_letter_part_' + i);
|
|
let start = scrollText_offsets[i];
|
|
let step;
|
|
if(start>0){
|
|
step = Math.abs(Math.round( (start+1) / opt.movement_increment ));
|
|
}else if(start<0){
|
|
step = Math.abs(Math.round( (start-1) / opt.movement_increment ));
|
|
}
|
|
let start_step = step;
|
|
function frame() {
|
|
if(start > 0){
|
|
start -= opt.movement_increment;
|
|
if(start<0)start = 0;
|
|
}else{
|
|
start += opt.movement_increment;
|
|
if(start>0) start = 0;
|
|
}
|
|
step--;
|
|
elem.style.left = start + 'px';
|
|
upColor(elem, start_step, step, opt.random_color, opt.custom_color);
|
|
if (start == 0){
|
|
clearInterval(scrolltext_intervall_id);
|
|
elem.innerHTML = text[i];
|
|
elem.style.zIndex = 200;
|
|
if(opt.final_color){
|
|
elem.style.color = opt.final_color;
|
|
}else{
|
|
/*fix alla buona quando la trasparenza non è a 1*/
|
|
let nv = elem.style.color.split(',');
|
|
if(nv.length>3){
|
|
nv[0] = nv[0].slice(nv[0].indexOf('(') + 1).trim();
|
|
elem.style.color = 'rgb(' + nv[0] + ',' + nv[1] + ',' + nv[2] + ')';
|
|
}
|
|
}
|
|
}else{
|
|
if(start % opt.change_letter_offset == 0)
|
|
elem.innerHTML = randomChar();
|
|
}
|
|
}
|
|
var scrolltext_intervall_id = setInterval(frame, opt.interval_increment);
|
|
}
|
|
|
|
let cont = document.getElementById(cont_id);
|
|
let html = '';
|
|
for (let i = 0, l = text.length; i < l; i++) {
|
|
scrollText_offsets[i] = randomInt(opt.initial_position_range.min, opt.initial_position_range.max);
|
|
html += '<div class="scrolltext_letter" id="scrolltext_letter_part_' + i + '" style="'
|
|
+ 'color: ' + opt.text_color + '00; '
|
|
+ 'width: ' + opt.letter_width + 'px; '
|
|
+ 'height: ' + opt.letter_height + 'px; '
|
|
+ 'font-size: ' + (opt.letter_height - 10) + 'px; '
|
|
+ 'left: ' + scrollText_offsets[i] + 'px; '
|
|
+ '">' + randomChar() + '</div>';
|
|
}
|
|
|
|
cont.innerHTML = '<div class="scrolltext_container" style="'
|
|
+ 'background-color: ' + opt.background_color + '; '
|
|
+ 'height: ' + opt.letter_height + 'px; '
|
|
+ '">' + html + '</div>';
|
|
|
|
setTimeout(function(){
|
|
for (let i = 0; i < text.length; i++) {
|
|
move(i);
|
|
}
|
|
}, 200);
|
|
}
|
|
|
|
// const test = {
|
|
// v1: function(){
|
|
// scrollText('text_header', 'Hacklab_', {
|
|
// movement_increment: 1,
|
|
// interval_increment: 10,
|
|
// });
|
|
// },
|
|
// v2: function(){
|
|
// scrollText('text_header', 'Hacklab_', {
|
|
// initial_position_range: {
|
|
// min: -500,
|
|
// max: 500
|
|
// },
|
|
// text_color: '#ff3a3a',
|
|
// change_letter_offset: 7
|
|
// });
|
|
// },
|
|
// v3: function(){
|
|
// scrollText('text_header', 'Hacklab_', {
|
|
// initial_position_range: {
|
|
// min: 0,
|
|
// max: 500
|
|
// },
|
|
// final_color: '#00ffff'
|
|
// });
|
|
// },
|
|
// v4: function(){
|
|
// scrollText('text_header', 'Hacklab_', {
|
|
// random_color: true
|
|
// });
|
|
// },
|
|
// v5: function(){
|
|
// scrollText('text_header', 'Hacklab_', {
|
|
// random_color: true,
|
|
// custom_color: true
|
|
// });
|
|
// },
|
|
// v6: function(){
|
|
// scrollText('text_header', 'Hacklab_', {
|
|
// random_color: true,
|
|
// custom_color: ['#ff0000','#0000ff']
|
|
// });
|
|
// },
|
|
// v7: function(){
|
|
// scrollText('text_header', 'Hacklab_', {
|
|
// random_color: true,
|
|
// custom_color: true,
|
|
// final_color: '#ff0000'
|
|
// });
|
|
// },
|
|
// };
|
|
|
|
scrollText('text_header', 'underscore hacklab');
|
|
console.error('son qua?!?') |