Animiertes Hintergrundbild skalieren mit Rest des Objekts?

Ich habe an dieser Logoanimation gearbeitet. Sie werden bemerken, wenn Sie die Fensterbreite verkleinern, reagiert das Logo. Jedoch zeigt das belebte Süßigkeitshintergrundbild auf der Unterseite. Es fällt mir schwer, es hinter den obersten Objekten zu verstecken, wenn das Fenster in der Größe geändert wird. So versuche ich, es zu verbergen oder es/ansprechbar machen Maßstab das ProblemAnimiertes Hintergrundbild skalieren mit Rest des Objekts?

Irgendwelche Gedanken zu vermeiden?

Hier ist mein Code: JS FIDDLE

@keyframes animatedBackground2 { 
 
    0% { 
 
    background-position: 0px; 
 
    } 
 
    100% { 
 
    background-position: 0px 956px; 
 
    } 
 
    /* set this to the height of the image */ 
 
} 
 

 
@-webkit-keyframes animatedBackground2 { 
 
    0% { 
 
    background-position: 0px; 
 
    } 
 
    100% { 
 
    background-position: 0px 956px; 
 
    } 
 
    /* set this to the height of the image */ 
 
} 
 

 
@-ms-keyframes animatedBackground2 { 
 
    0% { 
 
    background-position: 0px; 
 
    } 
 
    100% { 
 
    background-position: 0px 956px; 
 
    } 
 
    /* set this to the height of the image */ 
 
} 
 

 
@-moz-keyframes animatedBackground2 { 
 
    0% { 
 
    background-position: 0px; 
 
    } 
 
    100% { 
 
    background-position: 0px 956px; 
 
    } 
 
    /* set this to the height of the image */ 
 
} 
 

 
@-webkit-keyframes Wobble { 
 
    from { 
 
    -webkit-transform: rotate(6deg); 
 
    } 
 
    to { 
 
    -webkit-transform-origin: center center; 
 
    -webkit-transform: rotate(-6deg); 
 
    } 
 
} 
 

 
.candyWobble { 
 
    -webkit-animation: Wobble ease-in-out 0.7s infinite alternate; 
 
} 
 

 
.candy-animate-wrap { 
 
    width: 255px; 
 
    position: absolute; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    border-radius: 100%; 
 
    top: 30px; 
 
} 
 

 
#animate-area2 { 
 
    width: 213px; 
 
    height: 956px; 
 
    display: flex; 
 
    position: absolute; 
 
    background-image: url(https://vapesocietysupplies.com/wp-content/uploads/2017/05/scbg-2.jpg); 
 
    background-position: 0 0; 
 
    background-repeat: repeat-y; 
 
    max-width: 277px; 
 
    animation: animatedBackground2 8s infinite linear; 
 
    -ms-animation: animatedBackground2 8s infinite linear; 
 
    -moz-animation: animatedBackground2 8s infinite linear; 
 
    -webkit-animation: animatedBackground2 8s infinite linear; 
 
}

<div class="candyCo-VSSlogo"> 
 
    <img class="candyWobble" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-textlogo-1.png" style="width:100%;max-width:277px; position:absolute;z-index:2;"> 
 
    <img class="cover" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-VSS-Cover-bg.png" style="width:100%;max-width:277px;position:absolute;z-index:1;"> 
 
    <div class="candy-animate-wrap"> 
 
    <div id="animate-area2"></div> 
 
    </div> 
 
</div>

Dank!

Quelle

2017-05-19 Patrick

wie etwa ein drittes Bild hinter candyWobble und Deckel mit div als Überlauf versteckt? – Syfer

Ich bin mir nicht sicher, was du meinst .. Kannst du mir ein Beispiel über die jsfiddle geben? Danke! – Patrick

Ich habe den Padding-Bottom-Trick verwendet, der hilft, ein konstantes Seitenverhältnis in Ihrem Element zu erhalten (es bezieht sich auf die Elternbreite statt auf die Elternhöhe).

Außerdem mussten einige andere Stile geändert werden ... zu viele, um eine detaillierte Liste zu erstellen.

Sehen Sie das Ergebnis:

@keyframes animatedBackground2 { 
 
    0% { 
 
    background-position: 0px; 
 
    } 
 
    100% { 
 
    background-position: 0px 956px; 
 
    } 
 
} 
 

 
@-keyframes Wobble { 
 
    from { 
 
    transform: rotate(6deg); 
 
    } 
 
    to { 
 
    transform: rotate(-6deg); 
 
    } 
 
} 
 

 
.candy { 
 
    width: 100%; 
 
    max-width: 277px; 
 
    position: relative; 
 
} 
 

 
.candyWobble { 
 
    animation: Wobble ease-in-out 0.7s infinite alternate; 
 
    width: 100%; 
 
    max-width: 277px; 
 
    position: absolute; 
 
    z-index: 2; 
 
} 
 

 
.candy-animate-wrap { 
 
    width: 255px; 
 
    position: absolute; 
 
    height: 0px; 
 
    overflow: hidden; 
 
    border-radius: 100%; 
 
    top: 0px; 
 
    padding-bottom: 99%; 
 
    max-width: 100%; 
 
} 
 

 
#animate-area2 { 
 
    top: 0px; 
 
} 
 

 
#animate-area2 { 
 
    width: 213px; 
 
    height: 956px; 
 
    display: flex; 
 
    position: absolute; 
 
    background-image: url(https://vapesocietysupplies.com/wp-content/uploads/2017/05/scbg-2.jpg); 
 
    background-position: 0 0; 
 
    background-repeat: repeat-y; 
 
    max-width: 277px; 
 
    animation: animatedBackground2 8s infinite linear; 
 
}

<div class="candy"> 
 
    <img class="candyWobble" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-textlogo-1.png"> 
 
    <img class="cover" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-VSS-Cover-bg.png" style="width:100%;max-width:277px;position:absolute;z-index:1;"> 
 
    <div class="candy-animate-wrap"> 
 
    <div id="animate-area2"></div> 
 
    </div> 
 
</div>

Quelle

2017-05-20 16:19:49 vals

Animiertes Hintergrundbild skalieren mit Rest des Objekts?

Antwort

Verwandte Themen