Skip to content

Instantly share code, notes, and snippets.

@ekman12

ekman12/bouncing-marquee.markdown

Created February 23, 2023 17:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ekman12/ed0584f1313eeff96f24ee16dc2636ed to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ekman12/ed0584f1313eeff96f24ee16dc2636ed to your computer and use it in GitHub Desktop.
Download ZIP
Bouncing Marquee
Raw
bouncing-marquee.markdown
Raw
index.html
<body>
<header>
<marquee direction="down" width="100%" height="100%" behavior="alternate" class="bloc">
<marquee behavior="alternate">
<h1 id="gestion-cultural-header-title">Gestión Cultural</h1>
</marquee>
</marquee>
</header>
</body>
Raw
script.js
var tl = new TimelineMax({repeat:-1});
var movingText=document.getElementById('gestion-cultural-header-title');
var scrambleText = function (i_newText) {
WordShuffler(movingText,{
textColor : '#fff',
timeOffset : 2,
mixCapital : true,
mixSpecialCharacters : true
},i_newText);
}
var lapse = "+=6";
tl.addCallback(scrambleText, 0, ['Gestión Cultural']);
tl.addCallback(scrambleText, lapse, ['Música & Artes Escénicas']);
tl.addCallback(scrambleText, lapse, ['Arte & Pensamiento']);
tl.addCallback(scrambleText, lapse, ['Didáctica']);
tl.addCallback(scrambleText, lapse, ['Patrimonio']);
tl.addCallback(scrambleText, lapse, ['Eventos']);
function WordShuffler(holder,opt,newText){
var that = this;
var time = 0;
this.now;
this.then = Date.now();
this.delta;
this.currentTimeOffset = 0;
this.word = null;
this.currentWord = null;
this.currentCharacter = 0;
this.currentWordLength = 0;
var options = {
fps : 20,
timeOffset : 5,
textColor : '#000',
fontSize : "50px",
useCanvas : false,
mixCapital : false,
mixSpecialCharacters : false,
needUpdate : true,
colors : [
'#f44336','#e91e63','#9c27b0',
'#673ab7','#3f51b5','#2196f3',
'#03a9f4','#00bcd4','#009688',
'#4caf50','#8bc34a','#cddc39',
'#ffeb3b','#ffc107','#ff9800',
'#ff5722','#795548','#9e9e9e',
'#607d8b'
]
}
if(typeof opt != "undefined"){
for(key in opt){
options[key] = opt[key];
}
}
this.needUpdate = true;
this.fps = options.fps;
this.interval = 1000/this.fps;
this.timeOffset = options.timeOffset;
this.textColor = options.textColor;
this.fontSize = options.fontSize;
this.mixCapital = options.mixCapital;
this.mixSpecialCharacters = options.mixSpecialCharacters;
this.colors = options.colors;
this.useCanvas = options.useCanvas;
this.chars = [
'A','B','C','D',
'E','F','G','H',
'I','J','K','L',
'M','N','O','P',
'Q','R','S','T',
'U','V','W','X',
'Y','Z'
];
this.specialCharacters = [
'!','§','$','%',
'&','/','(',')',
'=','?','_','<',
'>','^','°','*',
'#','-',':',';','~'
]
if(this.mixSpecialCharacters){
this.chars = this.chars.concat(this.specialCharacters);
}
this.getRandomColor = function () {
var randNum = Math.floor( Math.random() * this.colors.length );
return this.colors[randNum];
}
//if Canvas
this.position = {
x : 0,
y : 50
}
//if DOM
if(typeof holder != "undefined"){
this.holder = holder;
}
if(!this.useCanvas && typeof this.holder == "undefined"){
console.warn('Holder must be defined in DOM Mode. Use Canvas or define Holder');
}
this.getRandCharacter = function(characterToReplace){
if(characterToReplace == " "){
return ' ';
}
var randNum = Math.floor(Math.random() * this.chars.length);
var lowChoice = -.5 + Math.random();
var picketCharacter = this.chars[randNum];
var choosen = picketCharacter.toLowerCase();
if(this.mixCapital){
choosen = lowChoice < 0 ? picketCharacter.toLowerCase() : picketCharacter;
}
return choosen;
}
this.writeWord = function(word){
this.word = word;
this.currentWord = word.split('');
this.currentWordLength = this.currentWord.length;
}
this.generateSingleCharacter = function (color,character) {
var span = document.createElement('span');
span.style.color = color;
span.innerHTML = character;
return span;
}
this.updateCharacter = function (time) {
this.now = Date.now();
this.delta = this.now - this.then;
if (this.delta > this.interval) {
this.currentTimeOffset++;
var word = [];
if(this.currentTimeOffset === this.timeOffset && this.currentCharacter !== this.currentWordLength){
this.currentCharacter++;
this.currentTimeOffset = 0;
}
for(var k=0;k<this.currentCharacter;k++){
word.push(this.currentWord[k]);
}
for(var i=0;i<this.currentWordLength - this.currentCharacter;i++){
word.push(this.getRandCharacter(this.currentWord[this.currentCharacter+i]));
}
if(that.useCanvas){
c.clearRect(0,0,stage.x * stage.dpr , stage.y * stage.dpr);
c.font = that.fontSize + " sans-serif";
var spacing = 0;
word.forEach(function (w,index) {
if(index > that.currentCharacter){
c.fillStyle = that.getRandomColor();
}else{
c.fillStyle = that.textColor;
}
c.fillText(w, that.position.x + spacing, that.position.y);
spacing += c.measureText(w).width;
});
}else{
if(that.currentCharacter === that.currentWordLength){
that.needUpdate = false;
}
this.holder.innerHTML = '';
word.forEach(function (w,index) {
var color = null
if(index > that.currentCharacter){
color = that.getRandomColor();
}else{
color = that.textColor;
}
that.holder.appendChild(that.generateSingleCharacter(color, w));
});
}
this.then = this.now - (this.delta % this.interval);
}
}
this.restart = function () {
this.currentCharacter = 0;
this.needUpdate = true;
}
function update(time) {
time++;
if(that.needUpdate){
that.updateCharacter(time);
}
requestAnimationFrame(update);
}
//this.writeWord(this.holder.innerHTML);
this.writeWord(newText);
console.log(this.currentWord);
update(time);
}
/*tl.to($('h1'), 1, {scrambleText:{text:"Música & Artes Escénicas", chars:'actidea', revealDelay:0.5, speed:1}},'+=5');
tl.to($('h1'), 1, {scrambleText:{text:"Arte & Pensamiento", chars:'actidea', revealDelay:0.5, speed:1}},'+=5');
tl.to($('h1'), 1, {scrambleText:{text:"Didáctica", chars:'actidea', revealDelay:0.5, speed:0.3}},'+=5');
tl.to($('h1'), 1, {scrambleText:{text:"Patrimonio", chars:'actidea', revealDelay:0.5, speed:0.3}},'+=5');
tl.to($('h1'), 1, {scrambleText:{text:"Eventos", chars:'actidea', revealDelay:0.5, speed:0.3}},'+=5');*/
/*function WordShuffler(holder,opt){
var that = this;
var time = 0;
this.now;
this.then = Date.now();
this.delta;
this.currentTimeOffset = 0;
this.word = null;
this.currentWord = null;
this.currentCharacter = 0;
this.currentWordLength = 0;
var options = {
fps : 20,
timeOffset : 5,
textColor : '#000',
fontSize : "50px",
useCanvas : false,
mixCapital : false,
mixSpecialCharacters : false,
needUpdate : true,
colors :['#f44336','#e91e63','#9c27b0','#673ab7','#3f51b5','#2196f3','#03a9f4','#00bcd4','#009688','#4caf50','#8bc34a','#cddc39','#ffeb3b','#ffc107','#ff9800','#ff5722','#795548','#9e9e9e','#607d8b']}
if(typeof opt != "undefined"){
for(key in opt){
options[key] = opt[key];
}
}
this.needUpdate = true;
this.fps = options.fps;
this.interval = 1000/this.fps;
this.timeOffset = options.timeOffset;
this.textColor = options.textColor;
this.fontSize = options.fontSize;
this.mixCapital = options.mixCapital;
this.mixSpecialCharacters = options.mixSpecialCharacters;
this.colors = options.colors;
this.useCanvas = options.useCanvas;
this.chars = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
this.specialCharacters = ['!','§','$','%','&','/','(',')','=','?','_','<','>','^','°','*','#','-',':',';','~']
if(this.mixSpecialCharacters){
this.chars = this.chars.concat(this.specialCharacters);
}
this.getRandomColor = function () {
var randNum = Math.floor( Math.random() * this.colors.length );
return this.colors[randNum];
}
//if Canvas
this.position = {
x : 0,
y : 50
}
//if DOM
if(typeof holder != "undefined"){
this.holder = holder;
}
if(!this.useCanvas && typeof this.holder == "undefined"){
console.warn('Holder must be defined in DOM Mode. Use Canvas or define Holder');
}
this.getRandCharacter = function(characterToReplace){
if(characterToReplace == " "){
return ' ';
}
var randNum = Math.floor(Math.random() * this.chars.length);
var lowChoice = -.5 + Math.random();
var picketCharacter = this.chars[randNum];
var choosen = picketCharacter.toLowerCase();
if(this.mixCapital){
choosen = lowChoice < 0 ? picketCharacter.toLowerCase() : picketCharacter;
}
return choosen;
}
this.writeWord = function(word){
this.word = word;
this.currentWord = word.split('');
this.currentWordLength = this.currentWord.length;
}
this.generateSingleCharacter = function (color,character) {
var span = document.createElement('span');
span.style.color = color;
span.innerHTML = character;
return span;
}
this.updateCharacter = function (time) {
this.now = Date.now();
this.delta = this.now - this.then;
if (this.delta > this.interval) {
this.currentTimeOffset++;
var word = [];
if(this.currentTimeOffset === this.timeOffset && this.currentCharacter !== this.currentWordLength){
this.currentCharacter++;
this.currentTimeOffset = 0;
}
for(var k=0;k<this.currentCharacter;k++){
word.push(this.currentWord[k]);
}
for(var i=0;i<this.currentWordLength - this.currentCharacter;i++){
word.push(this.getRandCharacter(this.currentWord[this.currentCharacter+i]));
}
if(that.useCanvas){
c.clearRect(0,0,stage.x * stage.dpr , stage.y * stage.dpr);
c.font = that.fontSize + " sans-serif";
var spacing = 0;
word.forEach(function (w,index) {
if(index > that.currentCharacter){
c.fillStyle = that.getRandomColor();
}else{
c.fillStyle = that.textColor;
}
c.fillText(w, that.position.x + spacing, that.position.y);
spacing += c.measureText(w).width;
});
}else{
if(that.currentCharacter === that.currentWordLength){
that.needUpdate = false;
}
this.holder.innerHTML = '';
word.forEach(function (w,index) {
var color = null
if(index > that.currentCharacter){
color = that.getRandomColor();
}else{
color = that.textColor;
}
that.holder.appendChild(that.generateSingleCharacter(color, w));
});
}
this.then = this.now - (this.delta % this.interval);
}
}
this.restart = function () {
this.currentCharacter = 0;
this.needUpdate = true;
}
function update(time) {
time++;
if(that.needUpdate){
that.updateCharacter(time);
}
requestAnimationFrame(update);
}
this.writeWord(this.holder.innerHTML);
//console.log(this.currentWord);
update(time);
}*/
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin.min.js"></script>
Raw
style.css
body{color:white;margin:0 auto;max-width:1080px;
font-family: 'Ubuntu Condensed', sans-serif;}
header{background:black;flex:1 0 100%;height:200px;}
h1{font-weight:300;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment