Scale Image on Scroll

Ask the community
, ,
1

Hey Guys, I have an image on my website that I want to scale down when the user scrolls, but I can’t figure out how to make it work.
Basically, on the 4th section of my website, There’s an image that I want to have initially be very large, but as the user scrolls down it becomes smaller and moves a bit to the right to not block any content.

I’ve been trying to figure out the code for this, but I haven’t found anything remotely similar to work with. All I can see is making background scrolling images and more info on scroll effects (sticky, etc).

I’ve tried a lot of code, but here’s what I’ve got at the moment:
import wixWindow from ‘wix-window’ ;

$w . onReady ( function () {
const image = $$ ( “#astronautMan” );
const initialWidth = 2002 ;
const initialHeight = 2270 ;

image . style ( ‘width’ , ${ initialWidth } px );
image . style ( ‘height’ , ${ initialHeight } px );

image . onViewportEnter (() => {
const scrollPosition = wixWindow . scrollY ;
const newWidth = Math . max ( 0 , initialWidth - scrollPosition * 0.5 );
const newHeight = Math . max ( 0 , initialHeight - scrollPosition * 0.5 );

image . style ( 'width' ,  ` ${ newWidth } px` ); 
image . style ( 'height' ,  ` ${ newHeight } px` );

});
});

Unfortunately, it does nothing. Would really appreciate some help / being pointed in the right direction.

EDIT: While messing with the code, I’ve noticed that I don’t think there’s any sort of Velo code that can actually change the size of an image. I’ve tried a couple of different syntaxes, but nothing works. So, if I can’t scale image with Velo, would there be another way to achieve this?

Thanks!

2

To scale an image on scroll, you can use JavaScript and CSS to update the image’s size based on the scroll position. Here’s an example of how you can achieve this:
HTML:

Image
CSS: #container { height: 500px; /* Set the desired height of the container */ overflow: scroll; }

#image {
width: 100%; /* Set the initial width of the image /
transition: width 0.2s; / Add a transition effect for smooth scaling */
}
JavaScript:


window.addEventListener('scroll', function() {

var container = document.getElementById(‘container’);
var image = document.getElementById(‘image’);

// Calculate the scale factor based on the scroll position
var scaleFactor = (container.scrollTop + container.clientHeight) / container.scrollHeight;

// Set the new width of the image
image.style.width = scaleFactor * 100 + ‘%’;
});
Make sure to replace “path/to/your/image.jpg” with the actual path to your image file. The #container element is used as a scrollable container, and the #image element is the image you want to scale.
Regarding the Pinterest image downloader, please note that downloading images from Pinterest may violate their terms of service and copyright policies

3

Hey!

Here’s a quick example I made - https://noahlwix.editorx.io/scroll-scale

And the code I used:

import { timeline } from 'wix-animations'
import wixWindow from 'wix-window';

let rotateDegree

$w.onReady(function () {
    setInterval(() => {
        wixWindow.getBoundingRect()
            .then((windowSizeInfo) => {
                let scrollY = windowSizeInfo.scroll.y;
                rotateDegree = timeline()
                    .add($w('#imageX1'), { "scale": scrollY/500 }, 0)
                rotateDegree.play()
            });
    }, 10)
});

You’ll need to adjust the imageX1 for your image ID and the /500 to a number that works for you