오브젝트의 나머지 부분과 함께 애니메이션 배경 이미지 스케일을 만드시겠습니까?

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>