The most common one is the mobile official website. As users continue to look down, the content on the page will be changed in a very consistent way. Elements from scratch, changes in size, and changes in visual containers will make people feel the charm of this product when browsing. Take a look at these pages: OnePlus 9R, ColorOS

In fact, the principle of realizing such interaction is very simple, but it takes some time to debug the interactive experience. I wonder if there is a similar visualization platform of Less Code that can realize such interaction more conveniently. The source of all this is to listen to the page scrolling, scrolling to the corresponding position, to achieve the corresponding animation effect

window.addEventListener("scroll",handleScroll,true)

function handleScroll(){
// Handle the corresponding logic
}
Copy the code

Here are two very useful wheels

WOW.js

It is very simple to scroll to a point to fade elements in and out, and supports animate. CSS

The official documentation

Vue3 demo

npm install wowjs
Copy the code
<template>
    <div class="wow move-up" />
</template>
<script>
    import { defineComponent } from "vue";
    import {WOW} from 'wowjs'
    
    export default defineComponent({
        name: 'app'.mounted() {
            this.$nextTick(() = > {
                new WOW().init()
            })
        },
    })
</script>
<style lang="scss" scoped>
.move-up {
  animation: 2s move-up;
}
@keyframes move-up {
  0% {
    transform: translate3d(0.30px.0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0.0.0); }}</style>

Copy the code

WOW will first use the element style visibility:hidden; animation-name: none; When scrolling to the current element, visibility: visible and animation-name: none; Remove it, and we’ll have our own move-up animation

ScrollMagic.js

The wheel is also a powerful classic use for elements that change their relative position as the scroll bar changes

ScrollMagic website

Look at sticky Elements (pinning) and Section Wipes (Natural) classic effects for ScrollMagic examples

vue3 demo

npm install scrollmagic

<template>
    <div id="trigger"></div>
    <div class="magic"></div>
</template>
<script>
    import { defineComponent } from "vue";
    import ScrollMagic from "scrollmagic";
    export default defineComponent({
        data(){
            // Create a controller instance
            controller: new ScrollMagic.Controller(),
        }
        mounted(){
            const scene = new ScrollMagic.Scene({
                duration: 100.// This scenario takes effect within 100 scrolling distance
                offset: 50.// The scene starts after the element is triggered by a 50px scroll
                triggerElement: "#trigger".// Rolling to the trigger element triggers scrollMagic
            })
            scene.setPin(".magic").addTo(this.controller) //setPin(): Fixes an element for the duration of the scene
                scene.on("enter".function () {
                  console.log("Scene entered.");
                });
                scene.on("progress".(event) = > {
                  console.log(event.type,"Event Name")
                  console.log(event.target,"The object that triggered this event")
                  console.log(event.progress,"Reflect the progress of the current scene 0-1")
                  console.log(event.state,"BEFORE DURING AFTER")
                  console.log(event.scrollDirection,"PAUSED FORWARD REVERSE")}); scene.on("end".function (event) {
                    console.log("Hit end point of scene."); }); }})</script>
Copy the code

ScrollMagic document

In fact, this article mainly introduces two kinds of rolling wheels. If you are interested, you can check their official website for more information