オブジェクトの残りの部分にアニメーション背景画像のスケールを作成しますか？

Question

私は、このロゴアニメーションに取り組んでいます。ロゴが反応してウィンドウの幅を小さくすると気付くでしょう。しかし、アニメーションされたキャンディーの背景画像が下部に表示されています。私は、ウィンドウのサイズが変更されたときに、上部のオブジェクトの後ろに「隠す」のに苦労しています。だから私はそれを隠すか、それが問題

任意の考えを避けるために、応答/スケール作るしようとしていますか？ 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>

ありがとう：

は、ここに私のコードです！

Answer 1

私はパディングボトムトリックを使用しています。これは、エレメント内で一定の縦横比を得るのに役立ちます（親の高さではなく親の幅に関係します）。

また、いくつかのスタイルを変更する必要がありました。詳細リストを作成するにはあまりにも多くの時間が必要でした。

@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>