Smooth Hintergrund Übergang und Zoom-Animation in einem passt nicht in den Container

Ausgehend von einigen Beispielen habe ich hier auf SO Ich habe versucht, zwei Effekte zu mischen: glatte Hintergrundwechsel innerhalb der langsamen Zoom-Animation. Die Sache ist, sobald die Zoom-Animation von der Skala 1.0 to 1.{whatever} anfängt, wächst sie außerhalb der div-Grenze, während ich die festen div-Dimensionen behalten möchte. Bitte beachten Sie, dass background-size:cover; in den Code eingefügt wird und nur für den anfänglichen Maßstab funktioniert.Smooth Hintergrund Übergang und Zoom-Animation in einem passt nicht in den Container

Sie Beispiel finden kann ich hier bin zu kämpfen: http://mattosuch.eu/test.html

Dank

Quelle

2017-07-15 Mateusz Osuch

Sie könnten einen äußeren div zu jedem div Elemente erstellen, die Skalierung und CSS geben neu div wie folgt erstellt.

div.outer{ 
height: 200px; /*Equal to real height of your inner div with `transform:scale(1,1)`*/ 
width: 200px; /*Equal to real width of your inner div with `transform:scale(1,1)`*/ 
overflow: hidden;  
}

Quelle

2017-07-15 12:26:23

Sie können nur CSS, Animation und Pseudo-Elemente zu fälschen Hintergrund-Animation über den Fading-Effekt nutzen:

Hier ist ein Beispiel mit 3 Bild als Hintergrund verwendet Verblassen und Zoomen nach jeder anderen.

div { 
 
    margin: 1em; 
 
    box-shadow: 0 0 5px; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: url(http://seraphe.nazwa.pl/docs/photojoy/wp-content/uploads/2017/07/Lucy6-scaled.jpg) center; 
 
    background-size: auto 100%; 
 
    position: relative; 
 
    overflow: hidden; 
 
    animation: scale 12s infinite; 
 
    position: relative; 
 
} 
 

 
div:before, 
 
div:after { 
 
    content: ''; 
 
    background: url(http://seraphe.nazwa.pl/docs/photojoy/wp-content/uploads/2017/07/Zosia-8-scaled.jpg) center; 
 
    background-size: auto 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    animation: scale 12s -6s infinite, hide 12s -6s infinite; 
 
    z-index: 2; 
 
    opacity: 0; 
 
} 
 

 
div:after { 
 
    background: url(http://seraphe.nazwa.pl/docs/photojoy/wp-content/uploads/2017/07/Nadia1-scaled.jpg)center; 
 
    background-size: auto 100%; 
 
    animation: scale 12s 6s infinite, hide 12s 6s infinite; 
 
} 
 

 
@keyframes scale { 
 
    80% { 
 
    background-size: auto 200%; 
 
    } 
 
} 
 

 
@keyframes hide { 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    from, 
 
    to { 
 
    z-index: 1; 
 
    } 
 
}

<div> 
 
    <!-- empty div to show fading backgrounds. Without CSS or a screen reader it is empty --> 
 
</div>

1 Element (+ 2pseudos Elemente) bietet die Möglichkeit, 3 zu laden.

Sie können Fading über Deckkraft und Skalierung über Hintergrundgröße durch Animationen animieren.

Sie können die Länge Ihrer Animation sowie die Werte und die Anzahl der zu animierenden Schritte zurücksetzen. Sie können auch Hintergrundposition verwenden und mehrere Hintergrundbildpositionen wechseln, während die Deckkraft auf 0 gesetzt ist. Beispiel: 4 für Bild, ein Pseudo verwendet mehrere bg-Bilder, die die Position wechseln, während sie nicht gesehen werden. https://codepen.io/gc-nomade/pen/zzbXem

Quelle

2017-07-15 13:05:33

Okay, dank Ihnen und Kollegen oben habe ich es geschafft, das Problem zu beheben. Aber jetzt skaliert es auch die Kindelemente, während ich nur den Hintergrund des Elternteils skalieren möchte. Irgendein Rat? –

@MateuszOss Wenn Sie die Skalierung verwenden, verwenden Sie auch die Skalierung für das direkte untergeordnete Element, um es wieder zu skalieren, während das übergeordnete Element skaliert wird. der bg-ansatz würde das auch vermeiden, dass der überlauf schnell und einfach behoben wird;) –

@MateuszOsuch mit kind, pseudos und bg skaliert. https://codepen.io/gc-nomade/pen/zzbXem –

Smooth Hintergrund Übergang und Zoom-Animation in einem passt nicht in den Container

Antwort

Verwandte Themen