Code

Lien

Rotate JS

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;
};

Lien

Hello JS

 

Hello JS

Petit test pour une fonction variant l’opacité. 😉

Source de l’image

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);

Lien

FPS JS

 

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();