Dawn theme - fade effect coding

xnyjyh
Excursionist
134 0 6

I have this code:

.header__heading-link, #shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4 {
transition: opacity 0.6s ease;
}
.header__heading-link, #shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4 {
transition: 0.6s ease;
}

 

it only fades evenly, but I'd like the image to fade as linear top to bottom. I have played around with it, but no success. Any suggestions?

 

Reply 1 (1)

xnyjyh
Excursionist
134 0 6

maybe this code is what is needed to change? this is the script...

 

<script>
var headerHeading = document.querySelector('.header__heading-link');
headerHeading.style.opacity = '0';
headerHeading.style.display = 'none';

window.addEventListener('scroll', function() {
if (window.scrollY > 10) {
var sectionElement = document.querySelector('#shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4');
sectionElement.style.opacity = '0';
headerHeading.style.opacity = '1';
headerHeading.style.display = 'block';
} else {
var sectionElement = document.querySelector('#shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4');
sectionElement.style.opacity = '1';
headerHeading.style.opacity = '0';
headerHeading.style.display = 'none';
}
});
</script>