Petit code alliant canvas & JavaScript ! 🙂
JavaScript
Tri JS
Pour trier une galerie en fonction de thèmes définis. 😉
Clock
Nouveau test de Javascript sur les fonctions date, totalement responsive ! 🙂
StarSky
http://codepen.io/Kalhenyan/pen/AXbqmY
Petit essai de Javascript avec des étoiles ! 😀
Uploadé sur CodePen, vous pouvez d’ailleurs y retrouver mes autres (petits) projets en code. 🙂
Mon CodePen
Colors JS
Petit script pour trouver une couleur en RGB. 🙂
Click gauche pour augmenter la valeur / droit pour diminuer.
Version rgba : Color JS Opacity
New Portfolio
Hop ! Voici une base en HTML/JS pour mon prochain portfolio. 🙂
N’hésitez pas à commenter pour améliorations, idées, etc.
Comme il reste encore pas mal de bugs…
Rotate JS
Petite fonction de rotation en Javascript. 😉
Il suffit de déplacer le curseur pour faire varier la vitesse de rotation.
var rotateSquare = function(n) {
var divs = document.getElementsByTagName(« div »);
for (var i = 0; i < divs.length; i++) {
divs[i].style.WebkitTransform = « rotate( » + n + « deg) »;
divs[i].style.msTransform = « rotate( » + n + « deg) »;
divs[i].style.transform = « rotate( » + document.count + « deg) »;
}
document.count = document.count + 10;
};
Hello JS
Petit test pour une fonction variant l’opacité. 😉
JS
var opacity = function(node, n) {
function animBoxY(){
if(node.style.opacity > 0){
node.style.opacity = parseFloat(node.style.opacity) – 0.1;
console.log(node.style.opacity);
}
}function animBoxN(){
if(node.style.opacity <= 1){
console.log(node.style.opacity);
node.style.opacity = parseFloat(node.style.opacity) + 0.1;
console.log(node.style.opacity);
}
}if (n == 1) {
node.style.opacity = 1;
setInterval(animBoxY, 100);
}
if (n == 2) {
node.style.opacity = 0;
setInterval(animBoxN, 100);
}}
// Appel
opacity(element, 1_ou_2);
FPS JS
Juste un petit code pour comparer le nombre d’unité modifié en un délai d’exécution de la fonction donné.
Pour le même temps d’animation, si un nombre d’unité modifié est plus faible (avec un délai d’exécution proportionnel), l’animation est plus fluide mais sans doute plus gourmande en mémoire. 😉
JS
// Style des noeuds
var initNode = function(node, r, g , b) {
node.style.display = « inline-block »;
console.log(node);
node.style.width = « 15rem »;
node.style.height = « 15rem »;
node.style.backgroundColor = « rgb( » + r + « , » + g + « , » + b + « ) »;
node.style.verticalAlign = « middle »;
node.style.textAlign = « left »;
node.style.color = « white »;
node.style.fontSize = « 3rem »;
node.style.padding = « 2rem 2rem 2rem 2rem »;
}// Functions de mouvement des divs
var nodeOne = function() {
var node = document.getElementById(« div1 »);
var result = parseFloat(node.style.width) + 1;
console.log(result);
node.style.width = result + « rem »;if (result < 60) {
setTimeout(nodeOne, 50);
}
if (result >= 60) {
node.style.width = 60 + « rem »;
}
}
var nodeTwo = function() {
var node = document.getElementById(« div2 »);
var result = parseFloat(node.style.width) + 2;
console.log(result);
node.style.width = result + « rem »;if (result < 60) {
setTimeout(nodeTwo, 100);
}
if (result >= 60) {
node.style.width = 60 + « rem »;
}
}
var nodeThree = function() {
var node = document.getElementById(« div3 »);
var result = parseFloat(node.style.width) + 4;
console.log(result);
node.style.width = result + « rem »;if (result < 60) {
setTimeout(nodeThree, 200);
}
if (result > 60) {
node.style.width = 60 + « rem »;
}
}// Création du bouton
var button = function() {
var div1 = document.getElementById(« div1 »);
var div2 = document.getElementById(« div2 »);
var div3 = document.getElementById(« div3 »);var button = document.getElementById(« button »);
button.style.display = « inline-block »;
button.style.cursor = « pointer »;
button.style.position = « absolute »;
button.style.top = « 40% »;
button.style.left = « 5% »;
button.style.width = « 6rem »;
button.style.height = « 3rem »;
button.style.backgroundColor = « white »;
button.style.verticalAlign = « middle »;
button.style.textAlign = « center »;
button.style.color = « coral »;
button.style.fontSize = « 3rem »;
button.style.textTransform = « uppercase »;
button.style.borderRadius = « 2px »;
button.style.padding = « 1rem 1rem 1rem 1rem »;
button.addEventListener(« click », function() {
nodeOne();
nodeTwo();
nodeThree();
}, false);
console.log(button);
}// Initialisation
var initPage = function() {
var node_div1 = document.getElementById(« div1 »);
var node_div2 = document.getElementById(« div2 »);
var node_div3 = document.getElementById(« div3 »);button();
// initNode(node, r, g, b);
initNode(node_div1, 255, 127, 80);
initNode(node_div2, 225, 97, 50);
initNode(node_div3, 195, 67, 20);
}
initPage();
Matrix OnlyJS
N’hésitez pas à commenter pour améliorations, corrections, etc.
Enjoy. 🙂