DEV Community

Cover image for Hero Site Parallax Scroll
Farhana Binte Hasan
Farhana Binte Hasan

Posted on • Edited on

Hero Site Parallax Scroll

#career #devto

Zoom out parallax background:

.bg-image{ height: 100vh; width: 100%; background-image: url(./bg1.jpg); background-position: center; background-repeat: no-repeat; background-size: 160%; background-attachment:fixed; }
Enter fullscreen mode Exit fullscreen mode 
const bgImg = document.getElementById('bg-image'); window.addEventListener('scroll',()=>{ updateImage(); }) function updateImage(){ bgImg.style.opacity = 1 - window.pageYOffset/900; console.log(1 - window.pageYOffset/900); bgImg.style.backgroundSize = 160 - window.pageYOffset / 12 + ('%'); }
Enter fullscreen mode Exit fullscreen mode

live site :zoomout-perallax-background-scroll

Fade-type parallax background:

background: url(./bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;
Enter fullscreen mode Exit fullscreen mode 
const bgImg = document.getElementById('bg-image'); window.addEventListener('scroll',()=>{ updateImage(); }) function updateImage(){ bgImg.style.opacity = 1 - +window.pageYOffset/550+''; // console.log(1 - +window.pageYOffset/550+''); bgImg.style.top = +window.pageYOffset + 'px'; bgImg.style.backgroundPositionY = -+window.pageYOffset/2 + 'px'; }
Enter fullscreen mode Exit fullscreen mode

live site :Fade-type-parallax-background-scroll

Top comments (0)