Comment ils font !

Bonsoir, bonjour,

En me baladant sur le web, je suis tombé sur un site internet avec un effet sur une image que j'aimerai bien reproduire.

http://www.marmoelite.it/en/?p=home

J'aimerai savoir comment ils ont réalisés cet effet sur l'image en arrière plan sur le premier écran.

Auriez-vous une idée et un conseil pour reproduire cela ?

Merci à tous !

En effet, ça rend plutôt bien.

Pour ce faire, ils ont utilisé la bibliothèque pixi.js

Parfait pour la prévention contre l'alcoolisme cet effet ! burp

hehe

merci toile47 pour le lien.

Un tuto ou une explication sur le net pour réaliser cet effet ? je ne suis pas forcément à l'aise sur le Javascript

Le javascript n'est pas le seul domaine a comprendre .

1) Lors du chargement de la page ; l 'image prend ( scale) toute la place du navigateur .
width 100% height auto et debug dans firefox

a ligne 3 contient la feuille de style embarquée suivante :

        @-moz-document url-prefix() {
          .home{
            background: url(../images/home_hero_1.jpg) center center no-repeat;
            background-size: cover;
          }
        }

url-prefix

2) la librairie pixi utilise 2 des 3 moteurs de rendu ou API graphiques disponible sur le navigateur qui sont : WebGL et canvas ( pas SVG) .

Le projet sur github est basé sur WebGL avec au cas ou webgl n'existe pas sur le client une alternative avec canvas (fallback ).

Le site de pixi est très bien fait avec beaucoups d 'informations pour faire son premier script ...Il faut savoir lire l anglais mais bon ..pas trop difficile avec ce tutoriel !!!

Cordialement

Sinon il y a aussi un joli effet sur le même site à la page about avec une signature dynamique en SVG.
Modifié par 75lionel (18 Sep 2016 - 22:45)

Bonjour 75lionel,

Merci pour ton retours, je pense que je vais abandonner l'idée ça semble à première vus un peu trop complexe pour moi ...

Merci pour ton explication en tout cas, même si je ne comprends pas tout.