Alternative to the Event Trainer that fires on completion

Question

The marquee has been discontinued and the alternative is to implement a css to perform the same text scrolling effect, which is valid.

But a need arose to get the moment when the scrolling of the text comes to an end, event that was present in marquee by means of the onfinish, it is possible to get the event using css and jQuery?

Answer 1

A simple jQuery lib is https://github.com/aamirafridi/jQuery.Marquee

Just call $("seu seletor(es)").marquee(); inside $(function() {...}) or $.ready(function() {...}) and apply overflow: hidden;:

To pause use pauseOnHover, to catch the event use the bind("finished", function() {...}) in the element

$(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>

jQuery.Marquee API

It is possible to configure directly in the method, thus:

$('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
});

• List of options: https://github.com/aamirafridi/jQuery.Marquee#options
• List of events (use with .bind for example): https://github.com/aamirafridi/jQuery.Marquee#Events

• Methods: https://github.com/aamirafridi/jQuery.Marquee#methods

  example:

    var $mq = $('.marquee').marquee();
  
    $("button.playpause").click(function() {
         $mq.toggle(); //Alterna entre pausar e mover
    });
  

Related Posts

• How to make a flag without the <Marquee tag\>?
• Marquee has been discontinued in HTML5?

Answer 2

For those who might have the same need, I have found an alternative to the marquee, using the Jquery Scrollbox