Hello Corvid Community, I’ve written a code for a shrinking header and tried to implement it with custom element but it doesn’t act like I wrote in the code, its just the image static…
Can you guys help me with the code and where to put it to make it work?
This is the code :
const STYLE = `
@keyframes shrink {
from {
height: 100 %;
width: 100 %;
}
to {
height: 10 %;
}
}
#custom-header-wrapper {
background-color: # 000000 ;
display: flex;
justify-content: center;
align-items: center;
height: 100 %;
width: 100 %;
animation-duration: 1.8 s;
animation-delay: 1 s;
animation-name: shrink;
animation-fill-mode: forwards;
animation-timing- function : ease- in ;
}
#custom-header-wrapper img {
height: 75 %;
width: auto;
object-fit: cover;
}
`;
class Header extends HTMLElement {
connectedCallback() {
const style = document.createElement( ‘style’ );
style.innerHTML = STYLE;
this .appendChild(style);
const wrapper = document.createElement( ‘div’ );
wrapper.id = ‘custom-header-wrapper’ ;
const image = document.createElement( ‘img’ );
image.src =
'https://static .wixstatic.com/media/f9a193_88923d41923f470da9dcb1ffe85c9d59~mv2.png’ ;
wrapper.appendChild(image);
this .appendChild(wrapper);
}
}
customElements.define( ‘custom-header’ , Header);
Any help is welcomed, thanks!