Change images size relative to scroll distance using jQuery

70
April 28, 2021, at 5:20 PM

I have been trying my best to create a JS feature where an image changes size depending on how much I have scrolled. Not changing size from A to B in an instant, but gradually changes relative to scroll distance. When the image reaches min-size the rest of the page scrolls.

I couldn’t make I work properly, so I started over and made an animation instead that activates when scroll is detected. But it does not look nice and it's not what I want. So I need to go back to the first solution and I hope someone can help or point me in the correct direction.

Apple are doing exactly what I want on their new iMac page: https://www.apple.com/imac-24/ (Scroll down to the section with “The Croods - A New Age” presentation).

Here’s my animation js:

$(".photo_main").animate({
    width: minsize+"px",
    height: "auto",
    top: "10px",
    left: "10px"
}, 300, "swing", function() {
    $(".photo_main").addClass('animated');
    releaseScroll();
});
READ ALSO
Javascript recursion, memory leak?

Javascript recursion, memory leak?

I am trying to implement a class that will perform an action once every second, it works as expected but I am unsure about memory leaksThis code I'm writing will have an uptime of several months

123
java.lang.IllegalArgumentException: Failed to find configured root that contains /data/data/**/cache/storage/CAPTURE-20210427_125521.jpg

java.lang.IllegalArgumentException: Failed to find configured root that contains /data/data/**/cache/storage/CAPTURE-20210427_125521.jpg

I am developing a flutter app in which I'm using webview_flutter pluginNow inside the webview I want upload a file from the device

148
Php datetime convert to ISO 8601

Php datetime convert to ISO 8601

I have an app that would call an Amazon api, the datetime requirements should be an ISO 8601 formatI tried the Carbon like

67