jQuery Girl
  1. jQuery Girl
  3. Comment est aujourd’hui mis en œuvre google doogle World’s Fair?
Intereting Posts
Plug-in jQuery Gridstack – Récupère les atsortingbuts des éléments, corrige la poignée de redimensionnement et verrouille les éléments lorsque d’autres se déplacent Problème avec le formulaire Django lorsqu’il est soumis à l’aide du plugin de formulaire jQuery Comment ajuster la position de l’info-bulle d’un Bootstrap pour un élément donné? Déclencheur pour span text / html on modifié Confirmer la suppression à l’aide de la boîte modale Bootstrap 3 Évitez les débordements dans la zone de clip de la canvas de tissu Analyseur / abstracteur CSS? Comment convertir une feuille de style en object Comment appeler la fonction jQuery en HTML renvoyé par AJAX Quelle est la bonne technique pour les barres de résultats de sondage? Comment ne pas charger certains éléments en fonction de la taille de l’écran avec javascript / jquery Afficher les données JSON dans la structure hiérarchique parent-enfant Comment travailler avec plusieurs propriétés CSS? JQuery problème? Obtenir les dimensions de la vidéo avant le téléchargement, côté client Extension de fichier de recherche jQuery (de chaîne)

Comment est aujourd’hui mis en œuvre google doogle World’s Fair?

Je veux savoir, utilise-t-il la puissance de HTML5 et jquery comme exemple d’exemple, puis-je obtenir pour cela?

En examinant le code, vous verrez que le doodle est constitué de plusieurs images:

Le JavaScript sublimé est ici: http://pastebin.com/r8s9H2jA

Il semble utiliser JavaScript pour créer la loupe et utilise une combinaison de CSS / JavaScript pour positionner les éléments d’animation au bon endroit.

Donc en bref:

  • HTML5: c’est du JavaScript combiné avec du CSS. Cela, en soi, ne se limite pas à la spécification HTML5, donc non .
  • jQuery: non .

Je l’ai inspecté et c’est aussi simple qu’un effet de “zoom d’objective” comme celui-ci: http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html avec une grande image et quelques gifs animés dessus pour les animations 🙂

Non, autant que je sache, aucune des nouveautés HTML5 ou jQuery n’est utilisée (à moins que vous ne comptiez la transition d’échelle utilisée lors de l’affichage de la loupe). Je doute sérieusement que Google mette quelque chose d’aussi gros que jQuery en première page …

Il crée un effet “masque d’image” rond en disposant essentiellement de trois copies du doodle et en construisant une sorte de rectangle arrondi qui ressemble à ceci (ASCII art go) 

 __|¯¯¯¯|__ | | | | |__ __| |____|

Ceci est ensuite recouvert par l’image de la loupe et son épais contour donne l’impression que nous voyons une partie circulaire de l’image de griffonnage.