jquery Archives - Idéematic

11 JUIN 2014

Scroll Magic, devenez magicien du scrolling

Préparez votre chapeau et votre baguette magique, en deux temps trois mouvement vous allez devenir un magicien de l’animation web.
Attirer des internautes sur sa page c’est bien, s’ ils y restent c’est mieux! Lors d’une visite, il est important de maintenir l’intérêt de l’internaute afin qu’il ne se lasse pas de scroller l’écran sous peine de quitter le site. Pour cela, il existe plusieurs techniques, dont les interactions et animations proposées par Scroll Magic.

Présentation

Scroll Magic est la dernière version Scrollorama. Comme ses prédécesseurs, il s’agit d’un plugin jQuery utilisant le CSS3 pour produire différentes animations lors du scrolling, telles que des transitions, des zooms, des effets parallaxes, des slides, des changements de couleurs…
Sur la page web, dès que le lecteur a atteint un certain niveau de la page lors de son scrolling, l’animation va automatiquement se lancer.

Les points de ce plugin reposent sur les éléments suivants :

performances optimisées
flexibilité
compatibilité Mobile
prêt pour le webdesign sensible
programmation orientée objet et objet chaînage
gestion des événements
support pour le défilement à l’intérieur de conteneurs div
vastes capacités de débogage et de journalisation

Exemple :

Il s’agit d’un tweening, un procédé qui utilise des images intermédiaires successives pour optimiser leur enchainement en toute fluidité.

Petit plus sympa, le site propose l’accès aux codes sources de différents exemples d’animations facilitant ainsi leurs mises en place.
Vous trouverez toute la documentation nécessaire à son installation et déploiement ici et les ressources sur GitHub.
Afin de vous faire une idée plus concrète des capacités du plugin, voici deux sites l’utilisant :

Appliance Tec Limited
Tunnel Rats

Alors séduit?

03 AOûT 2012

Idéematic, l'agence web recrute à Strasbourg !

Stages en agence web :

Pour accompagner les étudiants en informatique et en design dans la pratique des métiers du web, nous proposons un contexte de terrain sur des projets passionnants.

Conduit par notre directeur technique et directeur de projet, notre équipe transmet son savoir-faire pour consolider les compétences de développeurs et intégrateurs web.

L’agence Idéematic Strasbourg recrute des stagiaires (pour une durée de 1 à 6 mois).

Important : Du fait de notre structure, nous ne pouvons à ce jour proposer ces contextes à des profils débutants.

09 DéC 2011

Les galeries et sliders en Javascript et css3

Lors de notre précédent article consacré au html5 et à flash, nous faisions très largement hommage à l’utilisation de ce dernier pour diverses animations. Outre les effets de mouvements et de manipulations des éléments de pages, nous aurions pu faire référence à ce qui s’est particulièrement démocratisé dans le contexte de présentations d’images : les galeries et sliders. Une nouvelle fois, grâce aux différents frameworks (librairies de fonctions) javascript, les développeurs du web entier ont pu à loisir reproduir ces effets initialement apparus à l’aide flash.

Ce mode de présentation est du reste tellement pratique et ergonomique qu’il n’est plus seulement utilisé pour faire défiler des images mais aussi des contenus textuels.

Du coup, on est parti des diaporamas à la mode diapositive de nos grand parents (simple succession d’images) à des manipulations très originales.

28 NOV 2011

Générateurs d’animations HTML 5

En 1996, Macromedia a racheté à FutureWave ce qui par la suite est devenu le moteur de rendu vectoriel le plus populaire pour l’exploitation d’animations et de vidéos dans le contexte d’une page web : Flash.
Ce bien connu de tous s’intègre sous la forme d’un plugin que l’on télécharge et installe pour être ensuite lié à chaque navigateur voulant l’utiliser.

Racheté finalement par Adobe en 2005, il est passé de la version 7 à la version 11 très récemment.
De nombreux sites utilisant cette technologie gravitent un peu partout sur la toile.
Voici un très bon exemple de rendu ici : http://www.lotie.com et d’autres là :
http://www.thefwa.com
Dans une gamme concurrente, Microsoft propose Silverlight depuis fin 2007.

14 NOV 2011

La parallaxe

Enfant, nous avons souvent posé notre regard contre la vitre pour observer lors de longs voyages en voiture le paysage qui défilait sous nos yeux. Au premier plan les panneaux de signalisations passaient très vite. Plus loin, nous avions le temps de voir les vaches dans le pré qui défilait alors moins rapidement. Encore plus loin les collines quittaient notre champs de vision que bien plus tard.
Cette profondeur de champs donnent à chaque plan une vitesse de déplacement qui lui est propore du point de vue de l’observateur.
Cet effet ou conséquence, est ce que l’on nomme la parallaxe.
On retrouve d’ailleurs ce terme apparu XVIe siècle dans différents domaines comme la psychologie, la métrologie, l’astronomie, ou la photographie.

10 NOV 2011

Le responsive web design

Ces dix dernières années, les dimensions des écrans d’ordinateurs de bureaux ont principalement évolués entre 15 et 27 pouces.
Si un 15 pouces correspond à une définition de 800 x 600 pixels pour une diagonale d’environ 38 cm, un 27 pouces représente une définition de 2560 x 1440 pixels pour une diagonale d’environ 68,58 cm.

Dans cette variété importante de formats et de résolutions, l’internaute a donc le loisir d’utiliser son navigateur favori dans de nombreuses tailles de fenêtre.

Les statistiques mondiales w3counter.com permettent d’observer dans le temps les résolutions d’écrans utilisées à travers une fréquentation de moins de 30000 sites web.

w3counter

Dans ce contexte, on comprend que l’approche du webdesign ait logiquement été liée à cette importante contrainte de supports d’affichage.