11548 sujets
Bonjour,
Je trouve l'effet peu intéressant et assez gadget; mais oui, c'est possible.
Tu peux par exemple avoir un élément (DIV ou autre) avec du texte en white-space:nowrap, et masquer le texte qui dépasse avec un overflow:hidden. À partir de là, si tu attribues une largeur (width) à l'élément, tu peux afficher seulement une partie du texte et le reste sera coupé.
Jusque là c'est uniquement du CSS. On va pouvoir utiliser JavaScript (pas nécessairement jQuery, même si c'est possible) pour faire varier la largeur (width) de l'élément dans le temps.
Un exemple basique qui utilise jQuery:
Modifié par Florent V. (15 Jun 2010 - 17:38)
Je trouve l'effet peu intéressant et assez gadget; mais oui, c'est possible.
Tu peux par exemple avoir un élément (DIV ou autre) avec du texte en white-space:nowrap, et masquer le texte qui dépasse avec un overflow:hidden. À partir de là, si tu attribues une largeur (width) à l'élément, tu peux afficher seulement une partie du texte et le reste sera coupé.
Jusque là c'est uniquement du CSS. On va pouvoir utiliser JavaScript (pas nécessairement jQuery, même si c'est possible) pour faire varier la largeur (width) de l'élément dans le temps.
Un exemple basique qui utilise jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
<style>
body {
padding: 100px;
}
#test {
width: 650px;
overflow: hidden;
white-space: nowrap;
font-size: 20px;
font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
background: rgba(255,0,0,.25);
}
</style>
</head>
<body>
<p id="test">
CAPS LOCK IS -- WAIT FOR IT -- CRUISE CONTROL FOR COOL.
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
var $test = $('#test');
function testAnimation() {
$test.css({width:'0px'}).animate({width:'650px'}, 5000, 'linear', testAnimation)
}
testAnimation();
});
</script>
</body>
</html>Modifié par Florent V. (15 Jun 2010 - 17:38)