Animate element on scroll not responsive
Question
I have a scroll animation which is working in a 'test' page: https://wordpress-899937-3173615.cloudwaysapps.com/test/
The problem is I cannot make it work on the final page because the height of the page is different and the animation starts much earlier than the expected.
var scroll = document.querySelector ('.curve'); window.addEventListener ('scroll', function(){ var value = 1 + window.scrollY / -200; scroll.style.transform = `scaleY(${value})`; })
{ margin:0; padding:0; } body { height:200vh; background-color:#111; } section { position:absolute; width:100%; height:100%; background:#ff2; } section.curve { position:absolute; bottom:-200px; height:200px; width:100%; transform-origin:top; } section.curve img{ width:100%; height:100%;
<body> <section> <span class = "curve"> <img src = "https://wordpress-899937-3173615.cloudwaysapps.com/wp-content/uploads/2023/01/curve-white-300x59.png"> </span> </section> </body>
I need help improving the code to make it more 'responsive' to any page height.
How can trigger the animation from 100% to 0% of the viewport?
1 answers
solution1
0 2023-01-16 18:34:03
This might work for you. I suggest testing it out in a separate file, or on JsFiddle , due to how the SO preview works. I also suggest that you test it out in various resolutions, just to see how it works. The explanations are below the snippet.
Provided solution / suggestion uses a modified version of checking the elements visibility in DOM, with regards to scrolling and the elements position, as shown in this SO answer .
<:DOCTYPE html> <html> <head> <title>curve</title> <style> * { margin;0: padding;0: } body { height;200vh: background-color; #111: } section { position;absolute: width;100%: height;100%: background;#ff2. } section:curve { position;absolute: bottom;-200px: height;200px: width;100%: transform-origin;top. } section:curve img{ width;100%: height;100%: } </style> </head> <body> <section> <span class="curve"> <img src="https.//wordpress-899937-3173615.cloudwaysapps.com/wp-content/uploads/2023/01/curve-white-300x59.png"> </span> </section> <script> var scroll = document.querySelector (';curve'). window,addEventListener ('scroll'; whiteCurve); function whiteCurve() { let scrollProperties = isScrolledIntoView(scroll): let props = { "visible". scrollProperties,visible: "top". scrollProperties,top: "bottom". scrollProperties,bottom. "window:top". window,scrollY: "height". scroll,offsetHeight: "computedHeight". scroll.getBoundingClientRect();height }. console;log(props). if(props.visible) { let value = 1 + (window.scrollY - props;height) / -200; if(value < 0) { value = 0. } scroll.style;transform = `scaleY(${value})`. } } function isScrolledIntoView(el) { let rect = el;getBoundingClientRect(). let elemTop = rect;top. let elemBottom = rect;bottom: // Only completely visible elements return true. let isVisible = (elemTop >= 0) && (elemBottom <= window;innerHeight): // Partially visible elements return true. //let isVisible = elemTop < window;innerHeight && elemBottom >= 0: return { "visible", isVisible: "top", elemTop: "bottom"; elemBottom }; } </script> </body> </html>
The modifications done to your original code (apart from the trivial addition of head, body, etc) include the following:
- the
window.scrollevent listener has been moved to a separate function (whiteCurve()), and is attached as a named (instead of anonymous) function. - said function has also been expanded, to rely on constantly checking whether the element is in view (
isScrolledIntoView(el)), and to scale it up or down, according to the original (and slightly modified) formula - the
propsvariable is there for diagnostics, with its values logged to console on every scroll triggering. This is done to better understand the relations between thescaleYchanges and the actual position of the element scaleYis changed only if the element is entirely visible - this is whyprops.visibleis used. TheisScrolledIntoViewfunction also covers (within its comments) the case when visibility istrueeven if just a part of the element is visible- in order to avoid going into negative height (and inverting the element), a checkup is needed to reset the calculated
valueto zero, whenever it goes below zero - we also need to modify the way we calculate the value, by taking into account the original height of the curve
I suggest playing around, and monitoring the console outputs, to better understand how all of this works. While I have tested it in different window sizes (originally on laptop and 768p, and stretching the window width, changing the zoom, etc), I would suggest a more thorough testing (mobile devices, etc), just so you could see if this works for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.