Skip to content

Instantly share code, notes, and snippets.

@florian583

florian583/smooth.html

Created November 5, 2015 22:56
Show Gist options
  • Save florian583/d3326c389a064ce2ee79 to your computer and use it in GitHub Desktop.
Save florian583/d3326c389a064ce2ee79 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
smooth.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<!-- include Google's AJAX API loader -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
<style>
#carre1 {
width:200px;
float:none;
height:200px;
text-align:center;
font-family: 'Oswald', sans-serif;
line-height:200px;
font-size:22px;
background-color:#2980b9;
display: inline-block;
}
#carre2 {
width:200px;
float:none;
height:200px;
text-align:center;
font-family: 'Oswald', sans-serif;
line-height:200px;
font-size:22px;
background-color:#8e44ad;
display: inline-block;
}
#carre3 {
width:200px;
float:none;
height:200px;
text-align:center;
font-family: 'Oswald', sans-serif;
line-height:200px;
font-size:22px;
background-color:#e74c3c;
display: inline-block;
}
#carre4 {
width:200px;
float:none;
height:200px;
text-align:center; font-family: 'Oswald', sans-serif;
line-height:200px;
font-size:22px;
background-color:#95a5a6;
display: inline-block;
}
#carre5 {
width:200px;
float:none;
height:200px;
text-align:center; font-family: 'Oswald', sans-serif;
line-height:200px;
font-size:22px;
background-color:#34495e;
display: inline-block;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" style="padding-top:10px;">
<center><input type="text" id="userInput"></input>
<button onclick="TailleInput()">Resize!</button>
<button onclick="Croix()">Croix!</button></center>
</div>
<div class="container-fluid" style="padding-top:100px;">
<div class="col-lg-12 centered" style="float: none; margin: 0 auto;">
<center>
<div class="col-lg-12 centered" id="col1" style="float:none; margin: 0 auto;">
<div id="carre1" style="">1</div>
<div id="carre2" style="">2</div>
<div id="carre3" style="">3</div>
<div id="carre4" style="">4</div>
<div id="carre5" style="">5</div>
</div>
<div class="col-lg-12 centered" id="col2" style="float:none; margin: 0 auto;">
</div>
<div class="col-lg-6 centered" id="col3" style="float:none; margin: 0 auto;">
</div>
</center>
</div>
<script type="text/javascript">
// Variables
var saveUserInput = 0;
var html1 = '<div id="carre1" style="display:none;">1</div>';
var html2 = '<div id="carre2" style="display:none;">2</div>';
var html3 = '<div id="carre3" style="display:none;">3</div>';
var html4 = '<div id="carre4" style="display:none;">4</div>';
var html5 = '<div id="carre5" style="display:none;">5</div>';
// Fonction taille carrés
function TailleInput()
{
var userInput = document.getElementById("userInput").value;
saveUserInput = userInput;
document.getElementById("carre1").style.width = userInput;
document.getElementById("carre1").style.lineHeight = userInput+"px";
document.getElementById("carre1").style.height = userInput;
//
document.getElementById("carre2").style.width = userInput;
document.getElementById("carre2").style.lineHeight = userInput+"px";
document.getElementById("carre2").style.height = userInput;
//
document.getElementById("carre3").style.width = userInput;
document.getElementById("carre3").style.lineHeight = userInput+"px";
document.getElementById("carre3").style.height = userInput;
//
document.getElementById("carre4").style.width = userInput;
document.getElementById("carre4").style.lineHeight = userInput+"px";
document.getElementById("carre4").style.height = userInput;
//
document.getElementById("carre5").style.width = userInput;
document.getElementById("carre5").style.lineHeight = userInput+"px";
document.getElementById("carre5").style.height = userInput;
//
}
// Fonctions changements couleurs BG + Numéro
function changement1() {
if(saveUserInput != null) {
TailleInput();
}
carre1.onmouseover = function(){
var random = Math.floor((Math.random() * 50) + 1);
for(var i=0; i<1000; i++){
var color ='#'+Math.random().toString(16).substr(2,6);
}
this.innerHTML = random;
$('#carre1').animate({backgroundColor: color})
}
}
function changement2() {
if(saveUserInput != null) {
TailleInput();
}
carre2.onmouseover = function(){
var random = Math.floor((Math.random() * 50) + 1);
for(var i=0; i<1000; i++){
var color ='#'+Math.random().toString(16).substr(2,6);
}
this.innerHTML = random;
$('#carre2').animate({backgroundColor: color})
}
}
function changement3() {
if(saveUserInput != null) {
TailleInput();
}
carre3.onmouseover = function(){
var random = Math.floor((Math.random() * 50) + 1);
for(var i=0; i<1000; i++){
var color ='#'+Math.random().toString(16).substr(2,6);
}
this.innerHTML = random;
$('#carre3').animate({backgroundColor: color})
}
}
function changement4() {
if(saveUserInput != null) {
TailleInput();
}
carre4.onmouseover = function(){
var random = Math.floor((Math.random() * 50) + 1);
for(var i=0; i<1000; i++){
var color ='#'+Math.random().toString(16).substr(2,6);
}
this.innerHTML = random;
$('#carre4').animate({backgroundColor: color})
}
}
function changement5() {
if(saveUserInput != null) {
TailleInput();
}
carre5.onmouseover = function(){
var random = Math.floor((Math.random() * 50) + 1);
for(var i=0; i<1000; i++){
var color ='#'+Math.random().toString(16).substr(2,6);
}
this.innerHTML = random;
$('#carre5').animate({backgroundColor: color})
}
}
function clickcentre() {
carre3.onclick = function(){
Croix();
}
}
// First initialisation
changement1();
changement2();
changement3();
changement4();
changement5();
clickcentre();
// Fonction formation Croix
function Croix() {
document.getElementById("carre1").remove();
document.getElementById("carre2").remove();
document.getElementById("carre3").remove();
document.getElementById("carre4").remove();
document.getElementById("carre5").remove();
$(html1).hide().appendTo("#col1").fadeIn(1500);
$(html2).hide().appendTo("#col2").fadeIn(1500);
$(html3).hide().appendTo("#col2").fadeIn(1500);
$(html4).hide().appendTo("#col2").fadeIn(1500);
$(html5).hide().appendTo("#col3").fadeIn(1500);
changement1();
changement2();
changement3();
changement4();
changement5();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment