|
@@ -0,0 +1,184 @@
|
|
|
+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?!?')
|