avatar
Sexe : Féminin
Date d'inscription : 12/06/2016
Messages : 303
Ancien.ne du Staff
Voir le profil de l'utilisateur

animation lampe flottante (balancement et grésillement)

Créé par: linus | Validé par: Jamy | Difficulté: Moyen | Navigateur(s): Chrome, Firefox, IE | Version: Toutes


Rendu


Spoiler:

Présentation du tutoriel


dans ce tutoriel je vais vous expliquer comment réaliser une animation de lampe qui se balance en css, comme je l'ai fait pour une commande
tout ce qui concerne le graphisme (découpage de l'image et création du sprite de l'ampoule) ne sera pas expliqué, n'étant pas moi-même graphiste
pour ce tuto on part d'une image toute simple que j'ai trouvée sur google :



bien évidemment vous pouvez reproduire ce tutoriel pour n'importe quelle autre image du genre

Explications




autre animation possible :



Un petit merci rendra les explications visibles !
Si vous avez une question sur ce tuto, cette section est disponible.
avatar
Sexe : Masculin
Date d'inscription : 05/04/2016
Messages : 567
Ancien.ne du Staff
Voir le profil de l'utilisateur
Hello ! Un très beau tutoriel et très clair en plus de ça ! c:
J'ai une petite suggestion : ce serait peut-être sympa de faire une petite parenthèse sur le transform-origin ? Histoire de bien comprendre le point d'origine de ce balancier c:

Je n'ai rien à dire sinon, c'est nickel o/
avatar
Sexe : Féminin
Date d'inscription : 31/10/2013
Messages : 2932
Very Important People
Voir le profil de l'utilisateur
Je valide !! Comme dis en MP, tu pourrais faire l'ajout un peu plus tard, car je suis d'accord, ça pourrait être sympa !
avatar
Sexe : Féminin
Date d'inscription : 12/06/2016
Messages : 303
Ancien.ne du Staff
Voir le profil de l'utilisateur
j'ai rajouté deux lignes sur le transform origin du coup
avatar
Invité
Invité
Oh merci beaucoup ça en jette dis donc ! Très joli tuto !!
avatar
Sexe : Féminin
Date d'inscription : 25/08/2016
Messages : 121
Membre timide
Voir le profil de l'utilisateur
Trop génial ça !
Merciii
avatar
Sexe : Féminin
Date d'inscription : 22/01/2017
Messages : 23
Merci beaucoup ! C'est très jolie et original !
avatar
Sexe : Féminin
Date d'inscription : 27/12/2016
Messages : 53
Newbie
Voir le profil de l'utilisateur
Oh merci beaucoup :D
avatar
Sexe : Féminin
Date d'inscription : 10/01/2017
Messages : 124
Membre timide
Voir le profil de l'utilisateur
avatar
Sexe : Féminin
Date d'inscription : 02/06/2017
Messages : 129
Membre timide
Voir le profil de l'utilisateurhttp://loveinstitue.forumactif.com/
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1723
Designer
Voir le profil de l'utilisateur


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Masculin
Date d'inscription : 07/05/2017
Messages : 294
Fidèle au poste !
Voir le profil de l'utilisateur
Merci pour le tuto ;)
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1723
Designer
Voir le profil de l'utilisateur
Hey @Linus ! Juste pour préciser, la lampe ne se balance plus quand je l'installe, c'est normal >< ?


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Masculin
Date d'inscription : 29/11/2017
Messages : 157
Membre timide
Voir le profil de l'utilisateurhttp://petit-poisson.forumactif.com
avatar
Sexe : Féminin
Date d'inscription : 17/04/2017
Messages : 54
Newbie
Voir le profil de l'utilisateur
avatar
Sexe : Masculin
Date d'inscription : 09/01/2018
Messages : 46
Merci beaucoup ! C'est très COOL !
avatar
Sexe : Féminin
Date d'inscription : 21/06/2016
Messages : 11
Newbie
Voir le profil de l'utilisateur
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum