Discussion :

[pressdell]

Bonjour tout le monde,

En regardant un peu ce qui se faisait en terme de Webdesign ces derniers temps, je suis tombé sur le site http://www.panoply.cc/ (très beau, soit dit en passant).
Je m'interroge sur la méthode utilisée pour l'effet de "zoom out" des backgrounds que l'on obtient lors d'un changement de page.
J'ai bien pensé à un "transform:scale", mais je n'ai pas réussi à l'appliquer à un background.
Sauriez-vous par quel moyen obtenir l'effet désiré?

Je n'ai pas de code à fournir, ayant testé cet effet hier soir par pure curiosité...

Merci par avance pour vos indications.

Pressdell.

[CCyrillus]

qu'as tu tenté ?

background-size et background-position ?
ou bien
un conteneur avec transform:translateZ() scale() et une perspective ?

[pressdell]

Bonjour CCyrillus et merci d'avoir répondu!
J'ai simplement appliqué à mon background un "transform: scale(1);"

[CCyrillus]

okay, en fait scale(1) n'a aucun effet sauf sur le hardware (calcul d'affichage refiler généralement au ressources de la carte graphique).

La valeur 1 ne grossit ni ne réduit la taille à l'écran d'un conteneur ,par exemple: la valeur 2 grossie 2 fois et la valeur 0.5 réduit de moitié.

[pressdell]

Coucou CCyrillus,

Effectivement, mon exemple n'était pas le bon J'aurai du préciser que la valeur 1 était la valeur définitive de la transformation.
On partirait donc d'un "transform: scale(1.2);" par exemple, vers un "transform: scale(1);"
J'ai attribué une durée à cette "animation", et tout fonctionne correctement pour une image dans une DIV par exemple, mais pas sur un background (j'ai du faire une connerie, je contrôlerai ce soir..).

Concernant l'animation, j'aimerai qu'elle se déclenche à l'apparition du background (lors d'un changement de page sur le site en exemple).
Est-ce que préciser la transformation dans un "hover" suffit?

EDIT : SASS désolé...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
    .toto{
        height: 100%;
        background:url(../img/CONSOLE.jpg) no-repeat top center fixed;
	@include background-size(cover);
        transition-property: transform $duree;
        transform: scale(1);
    }
    .toto:hover{
        transform: scale(1.2);
    }

J'ai créé une DIV toto sur toute la hauteur de la page qui prend en cover une photo.
Tout fonctionne bien, sur un hover l'image s'étire!
Mais, elle s'étire un peu trop Le haut de mon image passe sous ma précédente div (page du dessus), et l’ascenseur horizontal apparaît...bref c'est laid!
J'ai bien essayé en ajoutant un "width: 100%;" dans le css de "toto", mais ça ne m'avance pas plus.
[/EDIT]

Encore merci pour tes réponses!

[NoSmoking]

Bonjour,

Je m'interroge sur la méthode utilisée pour l'effet de "zoom out"...

je n'ai pas vu, sur le lien que tu as donné, d'effet de zoom au changement de page mais un effet de fadeOut/fadeIn.