JSFiddle - React, Tailwind, and code Playground

by velthune

HTML

<div id="worst-container">
    <div id="worst-btn" class="iamAcircle" >Chi è il peggiore?</div>
    <div id="worst-target" class="iamAcircle" >Marco</div>
</div>

CSS

@font-face {
   font-family: 'buh';
   src: url('https://fonts.gstatic.com/s/craftygirls/v4/0Sv8UWFFdhQmesHL32H8o_k_vArhqVIZ0nv9q090hN8.woff2') ;
}

* {
font-family: 'buh', cursive;
}

#worst-container {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: black; //rgb(214, 214, 214);
    text-align: center;
}

#worst-btn {
    background-color: rgba(71, 255, 189, 0.9);
    left: 300px;
    top: 400px;
}

#worst-target {
    background-color: rgba(71, 189, 255, 0.9);
    top: 1400px;
    left: 300px;  
}

.iamAcircle {
    position: absolute;
    width: 320px;
    height: 320px;
    line-height: 300px;
    border-radius: 300px; 
    font-size: 30px; 
    text-align: center;
}

JavaScript

var animate = function(who, where, how, speed) {
    who.animate({
        top: where,
     }, speed, how, function() {       
        console.log("END"); 
    });
}

var checkWorst = function() {
    $targetOut = $(this);
    $targetIn = $("#worst-target");
    animate($targetOut, "1400px", 'easeInBack', 1000);
    setTimeout(function() {
        animate($targetIn, "400px", 'easeOutBack', 1000);
    }, 500);
}

var worstEnd = function() {
    $(this).html("Basta..era per dire! (:");
}

$('#worst-btn').on('click', checkWorst);
$('#worst-target').on('click', worstEnd);