123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- 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?!?')
|