Le Blog Topheman par Christophe Rosset

Parallax.js – support du headtracking

25 septembre 2013

Accèder à la Démo

Le parallax

Vous avez probablement croisé l'effet parallax en surfant sur le web (divers plans qui bougent en fonction de la souris par exemple). Parallax.js est une des librairies qui permettent de produire cet effet (l'un de ses intérêts est qu'elle permet de se baser aussi sur l'orientation de votre téléphone/tablette).

Le headtracking

Après avoir fini mon précédent projet Playground 2, j'ai commencé à me documenter sur le webRTC, afin de voir comment y appliquer cette techno. C'est en faisant différents tests que je suis tombé sur la librairie headtrackr.js. Après avoir montré ses possibilités à un de mes collègues, celui-ci m'a présenté le site de Parallax.js en me disant que je trouverai probablement une chose intéressante à faire …

Parallax.js avec le support du headtracking

Comme vous avez pu le comprendre, je suis parti de deux librairies :

pour apporter le support du headtracking dans Parallax.js, de la façon la plus transparente et la plus simple possible, tout en exposant au développeur un maximum de méthodes pour qu'il puisse en personnaliser le fonctionnement.

Pour les développeurs

Les sources sont ouvertes sur github et j'ai ajouté les APIs concernant le headtracking dans une section spécifique du README (en attendant de voir si cette fonctionnalité doit être intégrée à la branche principale).

Amusez vous bien à bouger votre tête devant la webcam et faites vos propres parallax !…

3 réponses à “Parallax.js – support du headtracking”

  • Sydney

    hey topheman … i really loved your mix of parallax and headtracker… but there is a issue i cant access microphone after using headtracker library in same page….. plz help me…

  • @Sydney I'm pleased that you liked it. I'll look into the problem (it may be a browser bug on the getUserMedia API though. Maybe, your browser doesn't free correctly the webRTC connection).

    Could you tell me on which OS / browser you are ?