añadiendo efecto shuffle
This commit is contained in:
Binary file not shown.
@@ -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>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
+1
-1
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user