Comment animer une image PNG pour une bannière

Le PNG est juste génial, c’est un format d’image libre proposant des fonctionnalités intéressantes comme la transparence, la translucidité, tout ce que propose GIF et même en mieux.

Dans ce tutoriel, je vais aborder les animations des images PNG dans le but de préparer la bannière animée d’un site Web.

Préparation : toutes vos images doivent logiquement disposer de la même dimension pour cela il faut les redimensionner ou les recadrer.

Lorsque c’est fait, rendez-vous sur le site AnimatedPNGs.com cliquez sur Parcourir et transférez vos images. Le delay est fixé à 64ms, il s’agit du temps d’affichage de chaque image. Ce délai est réservé au mini-animation, pour une bannière chaque image doit être affichée quelques secondes, on indiquera un multiple de 1000 par exemple 4000.

2018-03-09_10h18_21

Le délai peut être paramétré différemment pour chaque image :

2018-03-09_10h20_46

Enfin cliquez sur Create Generated Image puis sur Download.

Animatedpng propose d’autres services, la conversion de flash en PNG, de GIF en PNG.

Le code source est visible sur Github : https://github.com/GraFlic/GraFlic

 

 

 

Publicités

Monétiser votre site avec Snipcart

Snipcart est un gestionnaire de panier prenant en charge le paiement par carte bancaire. L’inscription est gratuite, une commission de 2% est retenue sur chaque opération ce qui est modeste.

C’est une solution est idéale pour monétiser un contenu en ligne tout en évitant les grosses usines comme Prestashop.

Pour ce tutoriel, le CMS support sera l’excellent Zwii en version 8.2.5.  J’irai un peu vite sur certains aspects, le tutoriel ne s’adresse donc pas à de grands débutants.

Continuer la lecture de Monétiser votre site avec Snipcart

Comment ajouter un effet popup à une miniature dans Zwii CMS

Zwii un CMS maintenu par Rémi Jean son auteur, c’est un CMS en français très simple d’emploi destiné à une gamme d’utilisateur variée, de débutants à chevronnés. Les dernières versions sorties début mars 2018 apportent un lot important d’améliorations.  Une série d’articles regroupant ces astuces seront publiés sous cette catégorie.

Pour débuter, les images avec un effet popup, l’idée est de créer  un effet d’affichage lors du clic sur une miniature.

Pour les besoins de la démonstration, j’ai utilisé deux images, une taille réelle (200 pixels de large est un maximum) et une autre en miniature.

Cette démo est basée sur la version 8.2.5 dont l’éditeur de texte par défaut est TINYmce.

Une fois le CMS installé, en FTP, éditez  init.js dans core/vendor/tinymce, recherchez

templates: [
que vous remplacez par :
templates: [
        {
          title:"Image Lightbox",
          url:baseUrl+"core/vendor/tinymce/templates/lightbox.html",
          description:"Une image qui s'ouvre dans une lightbox."
        },

Sauvegardez le fichier.

Dans le dossier Templates, y copiez les fichiers lightbox.html et image_vide.png contenus dans cette archive.

C’est prêt, il n’y a plus qu’à utiliser le plugin, une vidéo valant mieux qu’une longue explication :

Il est aussi possible de se passer de la miniature en réduisant la taille de l’image servant de miniature…