Petite animation Mario Kart en JS

Pour égayer un classement ou pour voir un peu plus loin.

HTML


<a class="perso" title="10"><img src="prono/22.gif" /><span><b>1<sup>er</sup></b> pseudo<br /><b>10 points</b></span></a>
<a class="perso" title="20"><img src="prono/10.gif" /><span><b>2<sup>ème</sup></b> pseudo<br /><b>20 points</b></span></a>
<a class="perso" title="30"><img src="prono/9.gif" /><span><b>3<sup>ème</sup></b> pseudo<br /><b>30 points</b></span></a>
<a class="perso" title="40"><img src="prono/7.gif" /><span><b>4<sup>ème</sup></b> pseudo<br /><b>40 points</b></span></a>
<a class="perso" title="50"><img src="prono/6.gif" /><span><b>5<sup>ème</sup></b> pseudo<br /><b>50 points</b></span></a>
<a class="perso" title="60"><img src="prono/5.gif" /><span><b>6<sup>ème</sup></b> pseudo<br /><b>60 points</b></span></a>
<a class="perso" title="70"><img src="prono/4.gif" /><span><b>7<sup>ème</sup></b> pseudo<br /><b>70 points</b></span></a>
<a class="perso" title="80"><img src="prono/3.gif" /><span><b>8<sup>ème</sup></b> pseudo<br /><b>80 points</b></span></a>
<a class="perso" title="90"><img src="prono/2.gif" /><span><b>9<sup>ème</sup></b> pseudo<br /><b>90 points</b></span></a>
<a class="perso" title="100"><img src="prono/1.gif" /><span><b>10<sup>ème</sup></b> pseudo<br /><b>10 points</b></span></a>
<div id="route"></div>

CSS


#route {
	background-image: url('prono/0a.gif');
	background-size: contain;
	}
.perso {
	position: absolute;
	}
.perso>img {
	width: 100%;
	}
.perso:hover span, .perso:focus span{
	transform: scale(1) rotate(0); 
	opacity: 1;	 
	}
.perso span {
	position: absolute;
	color: rgb(255,255,255);
	background: rgba(0,0,0,.8);
	padding: 10px;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,.5);
	transform: scale(0) rotate(-12deg);
	transition: all .25s;
	opacity: 0;
	z-index: 101;
	}

JS


var taille, pixels, posX, posY, liste, i;
var obj = document.getElementById("route");
var perso = document.getElementsByClassName('perso');
inforesize();
window.onresize = inforesize;
setInterval(frame, 33); // 33 ms = ~ 30 frames / seconde

function init_ () { // positionne
	liste = new Array ();
	for (i = 0; i < perso.length; i++) {
		var v = pixels / 100 * perso[i].getAttribute('title');
		perso[i].style.left = (posX + v)+'px';
		perso[i].style.top = (posY)+'px';
		liste[i] = new Array (
			(posX + v),
			posY,
			(posX + v),
			posY
			);
		}
	}
	
function inforesize () { // redimensionne
	taille = obj.clientWidth;
	pixels = Math.round(taille * 0.75);
	posX = obj.offsetLeft;
	obj.style.height = obj.style.marginTop = taille * 0.05;
	for (i = 0; i < perso.length; i++) {
		perso[i].style.width = taille * 0.05;
		perso[i].getElementsByTagName('span')[0].style.marginTop = taille * 0.05 * 1.5;
		perso[i].getElementsByTagName('span')[0].style.marginLeft = -taille * 0.05 * 1.5;
		}
	posY = obj.offsetTop - (taille * (0.05 / 4));
	init_();
	}

function posrand (ob1, ob2, ecart) { // déplacement random (actuelle, origine, ecart)
	var t = Math.round(Math.random() * (ob1+3 - ob1-1) + ob1-1);
	if (t > ob2 + ecart)
		t--;
	else if (t < ob2 - ecart)
		t++;
	return t;
	}

function frame () {
	for (i = 0; i < perso.length; i++) {liste[i][2] = posrand(liste[i][2], liste[i][0], 20); //x
		perso[i].style.left = liste[i][2]+'px';
		liste[i][3] = posrand(liste[i][3], liste[i][1], 5);	//y
		perso[i].style.top = liste[i][3]+'px';
		perso[i].style.zIndex = liste[i][3];
		}
	}

Télécharger l'archive (zip)

plan dynamique à partir d'une photo

Je vous propose étape par étape la réalisation d'un plan vidéo animé à partir d'une simple photo. Cet effet que l'on retrouve dans de nombreux documentaires pouvant apporter du dynamisme et de la vie à des images statiques, tel que des photos anciennes, tableaux de maîtres et autres...

Le choix de la photo

J'ai ici récupéré une photo de 1897, prise lors de la célèbre ruée vers l'or, le long du Klondike, estampillée Domaine Public. L'image est de très moyenne qualité, mais suffisante pour l'intégration dans une vidéo documentaire. Le format de la photo se prêtera à un travelling vertical.

Le découpage des plans

Il convient de déterminer la position des éléments dans l'espace en commençant évidemment par les premiers. Dans mon exemple, je n'irais pas jusqu'à évider la flaque d'eau (qui semble surtout refléter le ciel entouré de la masse de gens), mais il est tout à fait faisable d'y apporter un effet ondulé qui apportera toujours plus de réalisme. Le détourage reste sommaire, tant la photo manque de netteté. J'ai volontairement multiplié les plans, mais on aurait pu se contenter de trois quatre.

 

L'extension des fonds

Pour permettre le glissement des différents éléments lors du montage vidéo, il est essentiel de couvrir tous les détourages inférieurs aux premiers plans, voir d'avantage. Ici le sol boueux et le ciel, à coup de tampon, pansement ou autre, faites comme vous voulez ! On pourra y revenir ultérieurement suivant le travelling pour ne travailler que les zones nécessaires. Les premiers plans glisseront d'avantage que ceux du fond, effet de perspective oblige. Ainsi, plus nous reculons dans les plans, moins ces retouches seront nécessaires.

Nous verrons plus bas qu'en faisant partir ces élements du haut vers le bas, nous nous économiserons pas mal de travail en excluant les zones latérales. Exemple avec la façade de l'hôtel, ou j'ai entre autre utilisé le point de fuite pour répliquer la fenêtre. Sans être baclé, nous ne nous attarderons par sur les détails. La séquence ne faisant que quelques secondes, l'oeil n'aura pas vraiment le temps d'en apprécier tous les détails. L'objectif étant de ne laisser aucune zone vide.

J'intègre également aux éléments qui en nécessitent, le sol à part, en y appliquant un masque aux larges dégradés : il est essentiel que les objets et personnages n'ai pas cette illusion de flotter lors de leurs déplacements et donc, de les ancrer au sol.

Ceci fait, le rendu des différents calques superposés est évidemment très proche de l'original à quelques détails près.
Je peux maintenant séparer mes 9 plans pour pouvoir les intégrer au montage vidéo. J'utilise ici Vegas, mais cela reste appliquable à votre logiciel favori.

Le montage vidéo

Importés et superposés, j'applique un déplacement à chacun du haut vers le bas. Comme dit plus haut, les premiers plans devraient avoir un déplacement plus prononcé que ceux de derrière, le fond restant fixe. Dans mon exemple, l'écart est régulier et le résultat reste correct.

Dans le même temps, la caméra fera défiler l'ensemble de bas en haut comme pour dynamiser d'avantage et justifier tout ça. On aurait également pu ajouter un léger dé-zoom, un effet sépia... à votre bon coeur m'sieurs, dames.

Le rendu

Un autre exemple

Script simple robinet à Bitcoins

Quelques étapes pour mettre en place votre faucet ou robinet à Bitcoins
Commencer par extraire le contenu de l'archive et modifier le fichier conf.php notamment admin_mdp

Le site peut être rendu inaccessible le temps de la mise en place avec open et ?acces_regie pour passer
Adapter la mémoire d'APC s'il est activé, et renseigner les données SMTP pour utiliser la validation des comptes par mail.


Accéder à l'administration en passant par la page /admin.php?pass=test
avec test pour le mot de passe administrateur par defaut

L'administration est simple
- La liste des inscrits et l'édition des variables
- L'état de la caisse : Les satoshis générés, les dépenses et les gains
- Les demandes de withdraw
- Des statistiques avec le trafic par heure et par jour
- La gestion des publicités
- Et gérer la mémoire

Il n'y a plus qu'à essayer et commencer à parier !

Il est possible de changer les devises en entrant dans le code
De même pour ajouter un captcha. Il y a une base à intégrer en fonction du service
Il est très simple de créer d'autres modules en complément ou principal type vidéo, galerie, playlist, jeux...

 

Télécharger sur

satoshibox | pastecoin | bitcoinfilebox | en direct

Démo utilisateur | administrateur
 

 



script simple faucet / robinet à bitcoins original
PHP, JS - HTML, CSS
Créez votre faucet en partageant vos revenus publicitaires !
 

- simple et rapide pour l'utilisateur : une adresse bitcoin et un mail
- inscription confirmable par mail
- Multilangue anglais, français
- simple anti-adblock
- système d'affiliation
- backend simple
- léger et sans base de donnée

modules inclus :

- paris : permet de parier à partir ses satoshis avec 1 chance sur 2 jusqu'à 1024
- actualité RSS : Afficher les flux de plusieurs sites
- citations : des phrases spirituelles en français et en anglais

Administration :

- gestion de la mémoire
- détails des utilisateurs
- supervision des sommes genérées
- statistiques journalières et heure par heure
- demandes de virement
- édition des encards publicitaires ou modules

Configuration :

- satoshis par defaut
- durée entre deux claims
- plusieurs pramètres
- durée en entre deux paris
- mise maximum
- contrôle de la caisse
- montant du withdraw
- satoshis de bienvenue
- satoshis de parrainage
- liens de referal
- nom et adresse du site
- informations mail
- fermer le site temporairement
- ouvrir les inscriptions
- masquer les publicités
- confirmer les inscription par mail
- session par cookies
- mode APCu
- ajouter des modules

ajouter plus de langues :

utiliser comme base avec "en" le code langue :
lang_en.php, faq_en.php et mod_phrases_en.php

J'en fait des caisses hein ? mais c'est juste un faucet PHP
Pour les nanani nanana, voyez avec Paul

 

Télécharger sur

satoshibox | pastecoin | bitcoinfilebox | en direct

Démo utilisateur | administrateur