Texte dynamique en ligne ??
montanana
-
Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention -
Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je me tourne vers vous pour avoir un petit renseignement.
ayant les droits d'administration sur un site que je dois rajeunir, je voudrais remplacer une vieille animation située sur ma page d'accueil par un texte déroulant dynamique.
dois-je obligatoirement acheter flash ou existe-t-il un site un site permettant de créer ceci ?
cordialement
anna lebret
je me tourne vers vous pour avoir un petit renseignement.
ayant les droits d'administration sur un site que je dois rajeunir, je voudrais remplacer une vieille animation située sur ma page d'accueil par un texte déroulant dynamique.
dois-je obligatoirement acheter flash ou existe-t-il un site un site permettant de créer ceci ?
cordialement
anna lebret
A voir également:
- Texte dynamique en ligne ??
- Partager photos en ligne - Guide
- Tableau croisé dynamique - Guide
- Mètre en ligne - Guide
- Transcription audio en texte word gratuit - Guide
- Formulaire en ligne de meta - Guide
4 réponses
pas besoin de flash pour faire défiler un texte. une petite fonction javascript suffit amplement. enfin 2 pour faire jolie...
J'adore faire des trucs qui ne servent a rien !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<style type="text/css">
#cont {
/* style du conteneur */
width: 500px;
height: 250px;
margin-left: 200px;
margin-top: 100px;
box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.5) inset;
}
.text {
/* style du contenu fixer la hauteur évite un bug du au temps de chargement */
margin: 10px;
margin-top: 10px;
text-align: justify;
height: 750px;
}
.button {
width: 150px;
height: 35px;
line-height: 35px;
border: 1px solid #480010;
background-color: #500520;
color: #ffffff;
font-weight: bold;
text-align: center;
border-radius: 3px;
cursor: pointer;
margin: 10px;
}
</style>
<script type="text/javascript">
<!--
function mTimeStamp() {
var d = new Date();
return d.getTime();
}
function defile(cont) {
/*
faire défiler le contenu d'un élément
cont || arguments[0] = élément ou id de l'élément dont le contenu doit défiler
arguments[1] = speed (nombre de pixels par secondes)
arguments[2] = fréquence (nombre de rafraichissement en milli secondes 100 == 10 rafraichissement par secondes
*/
if(typeof(cont) == 'string') cont = document.getElementById(cont);
if(!cont.defile) cont.defile = {
'speed' : 100,
'frequency' : 10
};
var ind = 0;
var top = 0;
var i = 0;
var duration = 0;
var decalage = 0;
if(arguments[1]) cont.defile.speed = arguments[1];
if(arguments[2]) cont.defile.frequency = arguments[2];
var elm = new Array();
var text = cont.innerHTML;
cont.style.position = 'relative';
cont.innerHTML = '';
for(i = 0;i < 50;i++) {
elm[i] = document.createElement('div');
cont.appendChild(elm[i]);
elm[i].innerHTML = text;
elm[i].style.position = 'absolute';
elm[i].style.left = '0px';
elm[i].style.top = '0px';
elm[i].style.width = cont.clientWidth+'px';
if(elm[i].offsetHeight * i > cont.clientHeight) break;
}
document.defileGo = true;
var inter = setInterval(function () {
if(!document.defileGo) {
cont.innerHTML = text;
clearInterval(document.defileInter);
}
duration = (elm[0].offsetHeight + cont.clientHeight) / cont.defile.speed * 1000;
decalage = duration / elm.length;
for(i = 0; i < elm.length;i++) {
ind = (mTimeStamp() + decalage * i) % duration / duration;
top = Math.round((elm[i].offsetHeight + cont.clientHeight) * ind - cont.clientHeight);
elm[i].style.top = top * -1 +'px';
elm[i].style.clip = 'rect('+top+'px,'+cont.clientWidth+'px,'+( top + cont.clientHeight) +'px,0px)';
}
},cont.defile.frequency);
}
function goStop(cont) {
if(document.defileGo) document.defileGo = false;
else defile(cont);
}
//-->
</script>
</head>
<body>
<div class="button" onclick="goStop('cont');">Go - Stop</div>
<div class="button" onclick="document.getElementById('cont').defile.speed += 10;document.getElementById('input').value = document.getElementById('cont').defile.speed;">Accelérer</div>
<div class="button" onclick="document.getElementById('cont').defile.speed -= 10;document.getElementById('input').value = document.getElementById('cont').defile.speed;">ralentir</div>
<div><input id="input" type="text" onchange="document.getElementById('cont').defile.speed = this.value;" value="100" /></div>
<div id="cont"><div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium dolor dui, vitae iaculis elit.
Donec ac erat tellus. Donec vel volutpat orci.
Curabitur libero purus, tristique id accumsan non,
ornare id ante. Nullam sit amet quam vehicula massa
sollicitudin sagittis. Ut sagittis rutrum odio eget
tempus. Cras hendrerit pharetra orci ut placerat.
Vivamus nisi lacus, convallis sit amet blandit ac,
tristique vitae urna. Maecenas ultrices, dui et rhoncus
tincidunt, mauris tortor fringilla nunc, nec dapibus nisl
ante a nunc. Nam lacinia arcu eget dolor ultrices et cursus leo accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium dolor dui, vitae iaculis elit.
Donec ac erat tellus. Donec vel volutpat orci.
Curabitur libero purus, tristique id accumsan non,
ornare id ante. Nullam sit amet quam vehicula massa
sollicitudin sagittis. Ut sagittis rutrum odio eget
tempus. Cras hendrerit pharetra orci ut placerat.
Vivamus nisi lacus, convallis sit amet blandit ac,
tristique vitae urna. Maecenas ultrices, dui et rhoncus
tincidunt, mauris tortor fringilla nunc, nec dapibus nisl
ante a nunc. Nam lacinia arcu eget dolor ultrices et cursus leo accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium dolor dui, vitae iaculis elit.
Donec ac erat tellus. Donec vel volutpat orci.
Curabitur libero purus, tristique id accumsan non,
ornare id ante. Nullam sit amet quam vehicula massa
sollicitudin sagittis. Ut sagittis rutrum odio eget
tempus. Cras hendrerit pharetra orci ut placerat.
Vivamus nisi lacus, convallis sit amet blandit ac,
tristique vitae urna. Maecenas ultrices, dui et rhoncus
tincidunt, mauris tortor fringilla nunc, nec dapibus nisl
ante a nunc. Nam lacinia arcu eget dolor ultrices et cursus leo accumsan.
</div></div>
<script type="text/javascript">
<!--
defile(document.getElementById('cont'),100);
//-->
</script>
</body>
</html>
