JavaScript Function doc.Support LQDN banner

Posts Tagged ‘CSS3


Quand Hollande dit que son ennemi c’est la finance,
c’est comme quand toi tu dis que ton ennemi c’est le nutella. (@schloren)

 

Je vais devoir utiliser la recherche à l’élastique pour fouiller dans la mégadonnée
si je veux retrouver l’egoportrait de @bortzmeyer. (@laurentchemla)

 

En Fr, on aime les entrepreneurs comme on aime les enfants qui jouent
dans leur bac à sable sans déranger les parents https://www.youtube.com/watch?v=GIxtD-a9S90 (@ebarges)

 

Great programmers delete code. Great interface designers delete UI. (@lukew)

 

Lifehack: Turn a 5-minute task into a [...]


Lire la suite...

Concevoir un élément animé en 3D pour le multi-screen avec jQuery et CSS3.

 

La présentation que je fais pour #ParisJS est ici !

https://docs.google.com/document/d/1khVWiDeFj-KY2OhVqbZN_w1aef2iCC0yhhLEdj8p8yY/edit?usp=sharing

 

flatClock3d-google-doc

No image, no webGL, no native !

 

 

With this prototype,  on desktop browsers you can move around  the 3D CSS clock model with your mouse. On mobile browsers, rotation is triggered by the mobile orientation …

 

C’est un prototype (plus un Framework qu’un plugin) qui permet de tester les fonctionnalités sur différents types d’écrans et de navigateurs : Desktop, mobile, tablette…
La rotation 3D est pilotée par la souris (le “pointer”) ou simplement par l’orientation du mobile…
Crédit : The code to 3D rotate a CSS box was originally inspired from there : http://www.laplace2be.com/projects/phone/
(It’s seem “laplacetobe” have been inspired too by http://lenticular.attasi.com ;)
I have refactored the code following Twitter boostrap plugin guideline :
http://twitter.github.io/bootstrap/javascript.html

 

Avec le triptyque suivant pour la partie cross-browsers du projet :

 

[UPDATE]

La présentation que je fais pour #ParisJS est ici !

https://docs.google.com/document/d/1khVWiDeFj-KY2OhVqbZN_w1aef2iCC0yhhLEdj8p8yY/edit?usp=sharing

 

On my HTC One S with Chrome browser and Firefox browser…

 

2013-05-30_15-33-35  2013-05-30_15-37-26

 

Here on your PC…

 

 

Some others infos here :

http://www.b2bweb.fr/molokoloco/pixels-polished-jquery-css3-analogue-clock/

 

jquery-scrollView-pluginVisual helper while scrolling web page. Draw an indicator providing user with infos on the current viewport while scrolling.   “One view for each screen that user need to scroll to get to the bottom of the HTML view”   User can also click to directly go to the corresponding screen in the viewport.

 

It include :

  • $.scrollToMe();
  • $.scrollScreen();
  • + Find scrollElement
  • + getHash() || setHash(), …

 

Nb : It seem to have a bug on Firefox 21,  with right fixed positioning of “.scrollScreen” even if the plugin don’t touch this properties. In the end, plugin manipulate the left to emulate right:0; …

 

 

Made an other (older) plugin here :

 

A noter aussi…

#jQuery colonize, traverse DOM tree to find paragraphs next to each chapter, extract them and wrap them within a DIV.

Theses DIVs allow the control of multicols configuration via #CSS3.

 

The plugin take care to vertically split colums if it’s total height exceed viewport height. We can also include or exclude some TAGs of the selection…

The configuration can be with CSS colWidth or CSS colCount.
You can see a real example hereMy Book Readr : Etienne Chouard.

 

…the new “BootStrapped” plugin version …

 

jQuery.colonizr.js (V0.9.0)

 

Feel free to contribute via comments or Github :)

 

 

 

Real life example :

http://www.b2bweb.fr/molokoloco/etienne-chouard-centralite-du-tirage-au-sort-en-democratie/

Voici un projet que j’aimerais enfin présenter (6 mois après !). Je ne sais pas par où commencer tellement le sujet est vaste ^^

 

Pour cerner le sujet en quelques ligne : jQuery BoxFX est un émetteur de particules DOM
C’est un plugin jQuery léger (~1000 lignes) et hyper-customisable qui permet de créer/animer des éléments dans une page. De manière simple. En moins de dix lignes de configuration, pour les développeurs ou les designers…

 

Pour faire une animation il faut une surface, cela donne les coordonnées X et Y. C’est la “Box”. Cela peut être une DIV, le BODY… Ensuite il nous faut des trucs à faire bouger dedans… des abeilles ? !! Non trop intelligentes les abeilles… on va prendre des “graines” (seeds) On vas secouer des graines dans une boite ^^

Le principe et de générer, X fois par secondes, un élément HTML, de lui appliquer des propriétés CSS3 (de départ), de l’insérer dans le DOM. Quasi immédiatement, le plugin applique les propriétés CSS de fin, le navigateur se chargeant de faire l’animation, et, au bout d’un certain temps, on recycle l’élément. Le plugin fonctionne aussi très bien avec les Keyframes. Un des avantages est de pouvoir manipuler des éléments en masse, sans éditer de CSS en masse !!

 

Sur les page web nouvelle génération, il s’agit souvent de flux d’infos : le mur facebook avec des news, Twitter, votre site d’actus préféré, les commentaires autour des morceaux sur soundcloud… Des petites boites avec un contenu qui passent et peuvent disparaissent une fois vue… Un flux de de donné sous forme d’items…
BoxFX est capable de prendre un tableau de donné et de le dépiler dans un nombre d’éléments HTML que vous définissez. Cela peut être 50 news a faire défiler une fois dans une dizaine de “boites” ou à l’inverse 3 mots a faire tourner en boucle dans 100 petites boites.

 

Tout est expliqué dans le README du projet (qui est assez conséquent et en Anglais… Courage !)

 

Au fond, le plugin peut s’utiliser de toutes les manières :

  • Créer des éléments ou utiliser des collections existantes
  • Gérer les transitions, des images-clés (keyframes) et s’occuper de la compatibilité entre les navigateurs
  • Créez des animations, pleines de graphisme ou seulement automatiser l’insertion DOM
  • Gérer en masse les propriétés CSS de l’animations, ou régler finement sur la base de l’index d’élément
  • Appliquer des “effets” sur tous les éléments et les gérer dans le temps
  • Associer des données JSON (ou pas!), et se servir d’un template dynamique

(C’est la suite de http://www.b2bweb.fr/molokoloco/emitter-sprites-particules-factory-with-jquery-css3/)

 

Rien ne vaut une démo… donc :

 

 

Voici un exemple concret pour votre site :

 

$emitter1 = $('div#emitterZone1').boxFx({
	seeds             : '<div>N°{id} - {title}</div>',
	data              : [
            {id:1, title:'toto'}, {id:2, title:'tutu'}, {id:3, title:'toto'}, {id:4, title:'tutu'},
            {id:5, title:'toto'}, {id:6, title:'tutu'}, {id:7, title:'toto'}, {id:8, title:'tutu'}
        ],
	effect            : '',
	newAtTop          : true,
	stopAtEnd         : 'detach',
	delay             : 4000,
	maxSeeds          : 10,
	emitterRadius     : 0, 
	styles            : {},
	keyframes         : [{
		duration         : '24000ms',
		timingFunction   : 'linear',
		iterationCount   : '1',
		direction        : 'normal',
		steps            : [{
				step: '0%',
				opacity: .7,
				transform : function() { return 'translate(-100px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; } // rotate('+$.getRand(-6, 6)+'deg) 
			}, {
				step: '30%',
				opacity: 0
			}, {
				step: '70%',
				opacity: 0
			}, {
				step: '100%',
				opacity: .7,
				transform : function() { return 'translate('+($.q.windowWidth + 100)+'px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; }
		}]
	}]
});
 
$('a#stop').click(function() { $emitter1.trigger('stop'); });

[UPDATE : Projet en cours de refonte ici : https://github.com/molokoloco/jQuery.boxFx]

 

J’ai voulu tester ce que pouvais donner un émetteur de particule en DOM jQuery/CSS (Sans canvas)…

C’est un plugin léger et hyper-customisable, son principe et de (re)générer, X fois par secondes, un élément HTML, de lui appliquer des propriétés CSS3 (de départ), de l’insérer dans le DOM.

Le plugin applique quasi immédiatement les propriétés CSS de fin, et, au bout d’un certain temps, recycle l’élément : L’animation n’est pas faite avec jQuery $.animate() mais grâce aux propriétés CSS3 de transition, afin de bénéficier de l’accélération matériel (GPU)

 

 

 

En arrière plan, le plugin contient quelques méthodes qui permettent aux propriétés “cssFrom” et “cssTo” de supporter automatiquement l’ajout du “browser prefix” :

 

  • Fix and apply styles on element with correct browsers prefix
  • $(e).crossCss({borderRadius:’10px’}) >>> $(e).css({WebkitBorderRadius:’10px’})
  • Use Modernizer : https://github.com/Modernizr/Modernizr/blob/master/modernizr.js
  • Modernizr.prefixed(“borderRadius”); // e.g FF3.6 ‘MozBorderRadius’, FF4 ‘borderRadius’

 

$.fn.crossCss = function(css) {
	return this.each(function() {
		var $this = $(this);
		if (typeof css != 'object') return $this;
		for (var p in css)
			if (Modernizr.prefixed(p))
				css[Modernizr.prefixed(p)] = css[p];
		return $this.css(css);
	 });
};

 

Support cross-browser : Transition, borderRadius, borderImage, maskImage, Transform, boxShadow, etc

 

Le plugin écoute (bind) plusieurs événement via des méthodes publiques : start, stop, update, …
Exemple d’utilisation :

 

// Permet de mettre à jour, depuis n'importe quelle fonction, une ou des propriétés de l'émetteur
$emitter1.trigger('update', [{emitterRadius:16, rate:0}]);

Il envois (trigger) un évènement à chaque emission de particule (Cf. source) :

 

// Ecouter si un nouveau sprite à été émis
$emitter1.bind('emit', function(e, $sprite) { 
    $sprite.html('Ok'); // On modifie en live le contenu
});

 

Si la valeur “options.rate” est mise à Zéro, le plugin utilise la fonction “requestAnimationFrame()”, à la place de “setTimeout()”, afin de maximiser les performance.

 

Pour le moment il fait des bulles dans l’espace… mais on peu tout imaginer, des tweets, une cascade verticale, des images, beaucoup beaucoup de possibilités… de la synchro audio/vidéo,… Par exemple tapez une lettre entre les deux balises “<div></div>”
C’est pour cela que le code est ouvert sur Github ! :)

 

J’ai fais ce que j’ai pu pour chasser les bugs, mais il doit bien en rester ^^, vos commentaires sont les bienvenus…

PS : Cette ancienne démo est rigolote aussi :
http://jsfiddle.net/molokoloco/wRS8A/

@paulrouget à lancé un défis a @GeoffreyDorne pour refaire la bannière de son blog :
https://twitter.com/#!/paulrouget/status/123672623761719296

 

J’ai voulu tester ce que pouvais donner un émetteur de particule en DOM jQuery/CSS plutot qu’en canvas, histoire de comparer les performances…

C’est un plugin très customisable avec un principe d’emitter de particules contenu dans une div.
L’animation n’est pas faite avec $.animate() mais grâce aux propriétés CSS3 de transition, ce qui permet de bénéficier de l’accélération matériel (GPU)

 

La petite démo est ici  (V0.1)  : http://jsfiddle.net/molokoloco/KASGN/

 

boxFx-test1

 

 

boxFx-test2

 
La grosse démo est ici (V0.3) : http://jsfiddle.net/molokoloco/NGm4M/

 

boxFx-test3

 

[Update ! New code here http://www.b2bweb.fr/molokoloco/emitter-sprites-particules-factory-with-jquery-css3/]

 

Je voulais partager mon nouveau plugin jQuery d’horloge analogique. C’est un script léger, sans image, et uniquement basé sur CSS3 et jQuery.
J’ai essayé d’écrire un code compatible sur les différents navigateurs et c’est commenté… Merci à cet article “quick-look-math-animations-javascript” et d’autres, pour l’inspiration…

 

La petite démo est ici : http://jsfiddle.net/molokoloco/ajcRz/

La grosse démo (V2) est ici : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]

 

 

I want to share my new jQuery analogue clock plug-in.
This is à lightweight code, with no images, and only powered with jQuery and CSS3.
I’ve intended to write a annotated cross-browser -past and futur-proof CSS3 code and a simple as possible jQuery extend… Thank to this article “quick-look-math-animations-javascript” and others, for the inspiration…

 

You can watch the demo here : http://jsfiddle.net/molokoloco/ajcRz/

Demo V2 : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]

 

GitHub sources :

 

Shared by molokoloco

I have posted under jQuery forum about CSS3 cross-browser properties… waiting for their response… http://forum.jquery.com/topic/css-feature-detection-css3-shadow

After reading this an that, i have made a JavaScript function to help us detect browser specific CSS style name properties, like “MozBorderRadius”. This is cool to do have automated the task, for jQuery to do the job very simply ;)

This one is not really tested nor integrated with jQuery (sorry)
… but it seem to work in Firefox and Chrome, for example http://jsfiddle.net/molokoloco/f6Z3D/

 

You can play with it here : http://jsfiddle.net/molokoloco/f6Z3D/

The code is here : https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.browsercssprefix.mlklc.js

 
[Edit : I found a rock solid plugin who can handle that very fine : jQuery CSS3 Finalise]
 

2 pages