the user7892745 wont work for me, need some little adjustement
1° "pos" not understand wot should be, but the console log say "undefined"
so I've remove " , pos"
2° " myReuseableStylesheet.insertRule" give me error " is not a function"
so I used "innerHTML" insted of "insertRule"
3° finally I've moved "
document.head.appendChild( myReuseableStylesheet );" at the end
but after this it work fine and it's exact what I looking for.
thanks a lot user7892745 :D
maybe the problem I had, come form the way I use it
this is the script i used with it
var getclass = document.getElementsByClassName("cls");
var countclass = getclass.length;
for (var i=0; i <countclass; i++ ){
getclass[i].addEventListener('mouseover', function(){
// get the data-name value to show element whose id are the same
var x= this.getAttribute("data-name");
var y =document.getElementById(x);
y.style.display="block";
// because the element to show have fixed width, but different text length, they have different height
// so I need to get the highness, then use the value of height to define the 100% value of animation
// or the longer ones will be cutted an the shorten have a lot of empty space a the end
var yHeig= Math.round(parseInt(getComputedStyle(y).getPropertyValue('height')));
yHeig_ = yHeig - 10; // to shorten a bit the time from end and new passage
console.log(yHeig+" - "+ yHeig_);
addKeyFrames(
'showMe',
'0%{top:35px;}' +
'100%{top:-'+ yHeig_ +'px;}'
);
y.style.animation="showMe 7s linear infinite";
},false);
getclass[i].addEventListener('mouseout', function(){
var x= this.getAttribute("data-name");
document.getElementById(x).style.display="none";
},false);
}
i know thath a html marquee cuold seem symple to do the same thing, but dont work well,
