• Aller au menu
  • Aller au contenu
  • Aller à la recherche
  • tutoriels
    • Catégories
    • actualités
    • html
    • css
    • javascript
    • responsive
    • design
    • accessibilité
    • développement
    • vue et nuxt
    • formats
    • web
    • Ressources
    • Les plus lues
    • Outils
    • Guidelines
    • Livres
    • Quiz !
    • Concours
    • Par niveau
    • Débutant
    • Confirmé
    • Expert
  • forum
    • Nouveau sujet/question
    • Catégories
    • Dernières réponses
    • Recherche
  • emploi
    • Offres d'emploi
    • Demandes d'emploi
    • Favoris
    • Poster une offre
    • Poster une demande
  • formations
    • CSS3 Expert
    • Flexbox et Grid Layout
    • HTML5
    • Vue 3
    • Nuxt
    • JavaScript
    • Accessibilité
    • Performances web
    • Intégration d'e-mails mobiles
    • Formation sur-mesure
  • S'inscrire
  • Connexion
  • Concours
  • Modalités
  • Concourir
  • Participants
  • Résultats

Kiwi's Adventure

Retour au concours

Hommage à quelques séries célèbres par

J'ai essayé de faire les animations aux mieux de mes connaissances en y mettant des interactions sur différents éléments.

Testé uniquement sous chrome 52 sous linux.

Voir en ligne https://christopheboucaut.github.io/svg_animate_alsacreation/

Note obtenue : 7.000/10

Commentaires

Chmood
23 Septembre 2016 à 21h48

Wow !
J'ai mis un temps à comprendre qu'on pouvait cliquer sur le kiwi, sur le ver (3 actions à déclencher) et sur le dernier cœur (et j'ai dû en rater d'autres).
Big up pour l'interactivité, des bisous à la pèche et un kaméhamé à toi !

puyo_des_marais
23 Septembre 2016 à 21h58

Oui, c'est plutôt chic de permettre des choix multiples ! (et pour le coup, on est bien dans le jeu vidéo)

arnolem
23 Septembre 2016 à 23h01

Les interactions ne sont pas évidente, ou alors ne fonctionnent pas vraiment sous FF.
En tout cas, il y a du boulot derrière !

Shimrra
24 Septembre 2016 à 11h53

@Chmood : Merci beaucoup :)

@puyo_des_marais : Oui, j'ai essayé de faire au mieux sans le JS. J'aurai voulu faire un truc plus poussé avec des checkbox/label mais j'ai pas réussi à les intégrer dans le SVG.

@arnolem : Oui, je n'ai testé que sur chrome 52 car j'avais eu pas mal de soucis d'animations sur le SVG dans un ancien projet il y a peu et je n'étais pas trop motivé à aller voir les autres navigateurs ^^'. C'est encore assez instable je trouve entre tous les navigateurs sans le JS (SMIL déprécié, IE/EDGE qui ne gère presque pas les animations du SVG via le CSS, etc). Par exemple, rien que cela ne fonctionne d'aucune façon sous IE : https://christopheboucaut.github.io/spinner-svg-geneanet/

Les commentaires sont clos.

 Bon ben tant pis, ça marche  (Jean-Claude Bourret)

  • plan du site
  • contact
  • formations
  • agence web
  • Retourner en haut de page

Alsacréations est une communauté dédiée à la conception de sites et applications web de qualité, grâce aux standards W3C, aux feuilles de styles CSS, aux langages HTML et JavaScript, et à l'accessibilité. Réalisé par l'agence web Alsacreations.fr · À propos et mentions légales · Données personnelles

https://www.alsacreations.com/