L'image de fond de zoom lent

J'ai été cherché partout mais je n'arrive pas à trouver une réponse définitive sur la façon de faire de l'image de fond lentement zoom avant à l'aide de CSS. De l'aide serait appréciée. Mon code jusqu'à présent effectue un zoom avant sur des éléments de texte, mais pas le fond.

CSS:

body {
    background-image: url("../img/background.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
    -webkit-animation: zoomin 5s 1;
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }

}
InformationsquelleAutor Darkstar | 2015-06-06
  1. 2

    Je n'ai pas pu obtenir le corps à l'échelle requise, ma conjecture est que l'utilisateur de la feuille de style est primordial pour une raison quelconque. Cependant, comme une solution de contournement, vous pouvez utiliser un intérieur div comme ceci:

    HTML:

    <style>
div {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
    -webkit-animation: zoomin 5s 1;
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }

}
</style>
<body>
	<div style="position:absolute;top:0;bottom:0;left:0;right:0;"></div>
</body>

    • Escapade, cela a fonctionné mais la qualité d'image semble diminuer à mesure qu'elle évolue lentement.
    • Ok, essayez différente de l'image-rendu de propriétés. Une explication peut être trouvée à cette lien
    InformationsquelleAutor jaunt
  2. 0

    Voici un simple exemple:

    Exemple De Travail

    Nous, fondamentalement, suffit d'utiliser transform: scale; et déclencher le changement par l'ajout d'une classe avec jQuery sur un événement (j'ai choisi pour déclencher dès que le DOM).

    HTML:

    <main id="kb">
    <img src="https://iso.500px.com/wp-content/uploads/2014/08/2048-5.jpg" alt="baby elephants" />
</main>

    CSS:

    html,
body {
    width:100%;
    height:100%;
}

#kb {
    width:100%;
    height:100%;
    position:relative;
}

#kb img {
    transform-origin: 20% 80%;
    transition: transform 70s linear;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-1024px;
    margin-top:-703px;
}
#kb img.zoom {
    transform: scale(2);
}

    JS:

    $(document).ready(function(){
    $('#kb > img').addClass('zoom');
});

    Si vous souhaitez augmenter ou diminuer la vitesse il suffit de changer la valeur de "transition" dans le CSS.

    • On dirait que vous écrasait votre exemple, ou le lien est mauvais. De toute façon, il n'y a pas de démo.
    InformationsquelleAutor HelloWorld