Azuk Posté 31 Octobre 2013 Posté 31 Octobre 2013 (modifié) Bonjour à toutes et à tous, Tout d'abord, désolé de ne pas être davantage précis, mais je sais ce que je veux faire, sans pour autant quoi utiliser... C'est la raison pour laquelle le titre n'est pas plus précis. En gros voilà, d'ici quelques semaines, j'aimerais réalisé mon portfolio ! Au départ, j'étais parti sur quelque chose de très simple (site vitrine, HTML/CSS avec JQUERY probablement), car j'avais en tête que ça devait l'être de toutes manières. Finalement, m'est venu une autre idée qui est la suivante: J'aimerais avoir un avatar, un portrait qui s'affiche au centre de ma page web, dans le top, celui-ci ne serait pas une photo, mais une illustration vectorielle par exemple, voire un visage en 3D que je créerai. Pour cet avatar, j'aimerais qu'il suive des yeux la direction de ma souris sur ma page web. Donc, je ne demande pas forcément que la tête se tourne, mais juste les yeux qui suivent la direction de ma souris. (Je ne demande pas que la tête se tourne également car ça doit être beaucoup plus compliqué à mettre en place.) Et selon la section dans laquelle on se trouve, un phylactère apparaitrait à côté du perso avec quelques infos... Ma question ici, est liée à la mise en place de ce dont je vous parle avec la souris et etc... Comment pensez-vous que je pourrais mettre ceci en place !? Je ne vois pas comment je peux faire suivre les yeux du perso selon l'emplacement de la souris... J'espère m'être fait compris, en vous remerciant ! :-) Modifié 31 Octobre 2013 par Azuk
captain_torche Posté 31 Octobre 2013 Posté 31 Octobre 2013 Une manière de le faire serait de créer un "masque" avec le visage et des trous à la place des yeux. Dessous, tu aurais deux blocs représentant les yeux, avec une image d'iris. Tu captures la position du curseur en JavaScript, et tu adaptes ensuite la position des iris.
jcaron Posté 31 Octobre 2013 Posté 31 Octobre 2013 Tu fais ton portrait en SVG. Tu donnes un ID aux éléments qui correspondent aux yeux (pupille et œil). Tu ajoutes un handler sur onmousemove sur le body, tu récupères la position de la souris, et tu ajustes la position de la pupille par rapport à celle de l'œil. Ça ne devrait pas être trop dur une fois que tu as le SVG. Pour que le visage se tourne ça dépend de l'effet exact que tu veux obtenir, mais je pense qu'il doit mieux valoir trouver une librairie qui fait le gros du boulot. Note qu'il faut aussi penser aux gens (nombreux) qui consultent sur téléphone ou tablette: il n'y a alors pas de souris. Tu peux gérer les "touches" plutôt que la souris, mais il faut que ce soit évident d'une façon ou d'une autre... Jacques.
Azuk Posté 31 Octobre 2013 Auteur Posté 31 Octobre 2013 (modifié) Donc finalement, pour la mise en place du portrait, faut juste prévoir 3 div, le visage (masque), et ensuite deux divs pour les yeux, je metterais tout ça donc en forme avec le CSS. Puis finalement utilisé JQUERY pour la fonctionnalité liée à la souris... Si j'ai bien capté, c'est ce que vous m'expliquez ! Pour les gens qui consultent via le smartphone ou tablette, je m'étais dit qu'au pire des cas, si il y a juste l'avatar avec les phylactères selon les sections c'est pas grave... Enfin, encore faut-il que je le rende responsive ce portfolio, j'hésite tout de même, car j'imagine que la plupart voire toutes les boîtes auprès desquelles je postulerai pour ce stage, consulteront celui-ci via l'ordi. Merci pour vos réponses, elles m'éclairent déjà davantage dans la direction qu'il faut prendre ! Modifié 31 Octobre 2013 par Azuk
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant