añadiendo efecto shuffle

This commit is contained in:
2019-03-27 15:56:06 -06:00
parent 76cd23dffb
commit 205cbc599a
4 changed files with 71 additions and 3 deletions
BIN
View File
Binary file not shown.
+69 -2
View File
@@ -8,9 +8,13 @@
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="css/estilos.css">
<script type="text/javascript" src="js/main.js">
</script>
<!-- <link rel="shortcut icon" href="image/png" href="img/favicon.png"> -->
<title>Flisol 2019</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
@@ -22,12 +26,75 @@
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Texto principal</span>
<span class="heading-primary-sub">texto secundario</span>
<!-- <span class="heading-primary-main">Aprende sobre esta</span>
<span class="heading-primary-sub">gran comunidad</span> -->
<div class="content">
<div class="random">
<span class="nbr ltr">0</span>
<span class="nbr ltr">0</span>
<span class="nbr ltr">0</span>
<span class="nbr ltr">0</span>
<span class="nbr ltr">0</span>
<span class="nbr ltr">0</span>
<span class="nbr ltr">0</span>
<span class="nbr ltr">0</span>
<span class="nbr ltr">0</span>
<span class="nbr ltr">0</span>
<span class="nbr ltr">0</span>
</div>
</div>
</h1>
<a href="#" class="bot bot-white bot-animated">¡Registrate Gratis!</a>
</div>
</header>
<script type="text/javascript">
$(document).ready(function() {
var $randomnbr = $('.nbr');
var $timer = 25;
var $it;
var $data = 0;
var index;
var change;
var letters = ["F", "l", "i", "s", "o", "l", "-", "2", "0", "1", "9"];
$randomnbr.each(function() {
change = Math.round(Math.random()*100);
$(this).attr('data-change', change);
});
function random() {
return Math.round(Math.random()*9);
};
function select() {
return Math.round(Math.random()*$randomnbr.length+1);
};
function value() {
$('.nbr:nth-child('+select()+')').html(''+random()+'');
$('.nbr:nth-child('+select()+')').attr('data-number', $data);
$data++;
$randomnbr.each(function() {
if(parseInt($(this).attr('data-number')) > parseInt($(this).attr('data-change'))) {
index = $('.ltr').index(this);
$(this).html(letters[index]);
$(this).removeClass('nbr');
}
});
};
$it = setInterval(value, $timer);
});
</script>
</body>
</html>
+1
View File
@@ -0,0 +1 @@
+1 -1
View File
@@ -5,7 +5,7 @@
<title>Flisol</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link rel="stylesheet" href="css/estilos.css" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">