Uma lib jQuery simples é https://github.com/aamirafridi/jQuery.Marquee
Basta chamar $("seu seletor(es)").marquee();
dentro de $(function() {...})
ou $.ready(function() {...})
e aplicar overflow: hidden;
:
Pra pausar use pauseOnHover
, pra pegar o evento use o bind("finished", function() {...})
no elemento
$(function() {
$('.box1, .box2').marquee();
$('.box3').bind("finished", function() {
console.log("Terminou!");
}).marquee({
"duration": 1000,
"pauseOnHover": true
});
});
.box1, .box2, .box3 {
width: 200px;
height: 64px;
overflow: hidden;
}
.box1 {
background: #fc0;
}
.box2 {
background: #f0f0f0;
}
.box3 {
background: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js" type="text/javascript"></script>
<h2>Simples</h2>
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
<h2>Pra duplicar o conteudo e dar o efeito continue</h2>
<!-- duration é o tempo que leva para terminar, quanto maior mais devagar, gab é o espaço entre as duplicatas e `duplicated` é para causar o efeito que está andando em circulos -->
<div class="box2" data-duration="5000" data-gap="10" data-duplicated="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit END.
</div>
<h2>Evento finished</h2>
<div class="box3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit END.
</div>
API do jQuery.marquee
É possível configurar diretamente no método, assim:
$('seu seletor').marquee({
//Velocidade em milesegundos
duration: 15000,
//Espaço em pixels entre as o elementos
gap: 50,
//Tempo em milesegundos antes de iniciar
delayBeforeStart: 0,
//direção 'left', 'right', 'up', 'down'
direction: 'left',
//Se true faz o elemento ser duplicado para causar o efeito de continuidade
duplicated: true
});
Postagens relacionadas
onfinish