Background image et scale

Version imprimable

27/01/2016, 13h40
pressdell

Background image et scale

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.
27/01/2016, 15h53
CCyrillus

qu'as tu tenté ?

background-size et background-position ?
ou bien
un conteneur avec transform:translateZ() scale() et une perspective ?
27/01/2016, 21h53
pressdell

Bonjour CCyrillus et merci d'avoir répondu!
J'ai simplement appliqué à mon background un "transform: scale(1);"
28/01/2016, 14h34
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é.

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:

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!

28/01/2016, 18h25
NoSmoking

Bonjour,

Citation:

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.
28/01/2016, 18h33
pressdell

Bonjour NoSmoking, et bienvenue à toi dans la discussion.
En effet, il faut descendre quelques pages vers le bas pour voir des pages avec effet de zoom :)

Bonjour,
sur le site en lien, on trouve :

Code:

1
2
3
4
5
6
7
#home-page .block-background.animate {
   transition:all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
 
#about-page #fullscreen-content-wrapper {
   position:absolute;
}

Exemple de bout de code HTML associé :

Code:

1
2
3
4
5
<div data-reactid=".2.0.2.0.0.0.1" class="block-background animate" style="position: absolute; top: 0px; width: 100%; height: 100%; transform-origin: 50% 50% 0px; transform: translate3d(0px, 0px, 0px);">
   <div data-reactid=".2.0.2.0.0.0.1.0" id="fullscreen-content-wrapper" style="width: 1908px; height: 677px;">
      <img data-reactid=".2.0.2.0.0.0.1.0.0" src="image/about_placeholder_0.jpg" class="fullscreenBg" style="width: 1908px; left: 0px; top: -198px;">
   </div>
</div>

01/02/2016, 10h46
pressdell

Bonjour jreaux62 et bienvenue à toi dans la discussion également!

Merci beaucoup pour ta réponse, je n'ai effectivement pas cherché très loin! J'étais focalisé sur le scale.
Comme on dit : "Des chercheurs qui cherchent on en trouve, mais des chercheurs qui trouvent on en cherche!"

Je ne connaissais pas ce "cubic-bezier", je vais m'y plonger.

Concernant le problème d’étirement de ma DIV, peux-tu m'orienter?

Encore merci.
01/02/2016, 11h01
Invité

Citation:

Envoyé par pressdell

Concernant le problème d’étirement de ma DIV, peux-tu m'orienter?

sans doute en mettant le div en position:absolute; dans un autre div en overflow:hidden;, afin de masquer les débordements.
05/02/2016, 10h21
pressdell

Bonjour jreaux62,

Merci pour cette réponse! Je clos le sujet
Encore une fois, merci à vous tous.

Pressdell.