JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<p>Proin amet tristiquhttp://jsfiddle.net/mariomc/RB3Ku/7/#rune, porta, natoque dignissim nunc, ut vel, sed. Mauris porta nec nec rhoncus! Nisi mattis et tincidunt aenean! Risus amet habitasse! Rhoncus, turpis integer amet penatibus.</p>
<div class="counter">1</div> 
<p>Proin amet tristique, porta, natoque dignissim nunc, ut vel, sed. Mauris porta nec nec rhoncus! Nisi mattis et tincidunt aenean! Risus amet habitasse! Rhoncus, turpis integer amet penatibus. Amet? Mus, turpis purus scelerisque aliquam turpis porta, vel nisi etiam magna, sit etiam placerat! Nisi pellentesque etiam lectus est, vel aenean facilisis nunc est nec. Dictumst enim turpis adipiscing phasellus enim, sed est odio turpis dictumst pellentesque tincidunt diam elementum! Risus a mattis, scelerisque a nisi massa, vut magna turpis natoque, facilisis eu magnis etiam, eu urna odio ridiculus! Cursus a? Rhoncus ultricies magna nec? Elit dolor? Sed dolor nisi auctor nec aliquam, aenean dis turpis, elementum amet odio. Nisi massa nunc dapibus integer scelerisque aenean mauris platea? Mus augue, lacus.

Mus amet nisi magna aliquam? Proin platea pellentesque mauris sagittis cursus ac? Porttitor sagittis pulvinar, sagittis pellentesque! Hac non? Vel elementum sit magna mus pid. Integer! Tincidunt est lundium ut sit et sit. Lectus augue? Dolor nisi mattis ridiculus quis dis, turpis urna enim et, enim aenean eros pulvinar enim mattis mauris amet lacus in, sed platea elit amet, adipiscing cum lorem elit! Purus nascetur diam integer mattis augue porttitor, mauris! Et odio elementum, diam. Aenean tincidunt habitasse odio pid urna nec ac nisi turpis a tincidunt hac ac hac est odio massa. Pellentesque dolor. Augue! Turpis dictumst porttitor aenean eros tristique est pid proin magna, cras, dis. Aenean. Sagittis porttitor! Tortor lacus nec et duis! Dictumst, dignissim nunc.</p>
<p>Proin amet tristique, porta, natoque dignissim nunc, ut vel, sed. Mauris porta nec nec rhoncus! Nisi mattis et tincidunt aenean! Risus...

CSS

.counter{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.5em;
    text-align: center;
    background-color: #89be7d;
    color: #FFF;
    line-height: 60px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

JavaScript

(function($){
    $(document).ready(function(){
        var scrollSpeed = 1000;
        var fadeInSpeed = 500;
        var fadeOutSpeed = 500;
        var $button = $(".button");
        var $counter = $(".counter");
        var pulsateCounter = function(){
            console.log("one pulse");
			$counter.delay(200).fadeTo(fadeOutSpeed, 0, function(){
                $counter.text(function(index, text){ return parseInt(text) + 1; });
			}).delay(50).fadeTo(fadeInSpeed, 1);
        };
        $button.on("click", function(e){
            $("body").animate({scrollTop: 0}, {
                duration: scrollSpeed,
                complete: pulsateCounter                                                    
            });

    });
    });
})(jQuery);