To find a way to realize the animation effect of scrolling at the front end.

you need to achieve an animation effect similar to the iPhone X home page of Apple"s official website, that is, the scroll bar gradually enlarges a picture and continues to scroll to show the text. The canvas, used on Apple"s official website does not have too many ideas about how to write it. Most demo are scrolled, that is, they scroll to a certain point to perform the animation until they are finished, but it is not the desired effect. It needs to be scrolled frame by frame with the scroll bar. If the scroll bar scrolls in the opposite direction, the animation is executed in the opposite direction, and the animation stops if you stop scrolling. How to achieve animation effects like this, plug-ins or native js are also available. I hope Daniel will not hesitate to give us advice.

Jquery-plug-in jquery canvas javascript

Jun.02,2021

you can try the inertia scrolling and parallax effects plug-in luxy.js

DEMO: https://min30327.github.io/lu.

in Vanilla.js.

luxy.js / targetsUpdate
:) I'm not really familiar with this either.
luxy.js is a visual difference plug-in that does not seem to support changes in the width and height of the element. The font magnification effect of demo is also the parallax effect caused by changing the 3D position of the element (it does not really magnify the hiahia). But the update event on the element is executed in the function targetsUpdate,

targetsUpdate : function(target){
                target.top += (this.scrollTop * Number(this.settings.targetSpeed) * Number(target.speedY) - target.top) * this.settings.targetPercentage;
                target.left += (this.scrollTop * Number(this.settings.targetSpeed) * Number(target.speedX) - target.left) * this.settings.targetPercentage;
                var targetOffsetTop = ( parseInt(target.percentage) - target.top - parseInt(target.offset) );
                var offsetY = Math.round(targetOffsetTop * -100) / 100;
                var offsetX = 0;
                if(target.horizontal){
                    var targetOffsetLeft = ( parseInt(target.percentage) - target.left - parseInt(target.offset) );
                    offsetX = Math.round(targetOffsetLeft * -100) / 100;
                }
                target.elm.style.transform = 'translate3d(' + offsetX + 'px ,' + offsetY + 'px ,' + 0 +')';
            },

if you want to achieve the above effect, adding the css3 effect you want here should work, right? Of course, the changes made here will affect the global effect. If only individual elements need to be scaled, you can imitate this function to add a single zoom function, or pass parameters under the current function and determine (scaling can be achieved by attributes such as css3/cubic-bezier)
to change the location of the source code of the element 3D.

target.elm.style.transform = 'translate3d(' + offsetX + 'px ,' + offsetY + 'px ';

of course, Animate.css-based wow.js is also a very good plug-in

animate.css

Previous: Mysql cannot set password

Next: What is the meaning of zeppelin configuration localrepo

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9b25f-1832.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9b25f-1832.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?