0%

滚动样式

发表于 更新于 分类于

时不时会有些需求 ,如宣传页然后要求页面滚动跟随之类的要求.最近有些想法:

  • 最好不用 react 之类,最近看资料然后感觉 svelte 不错.
  • 样式之类 ,个人挺头疼的
  • 手机适配感觉其实挺难的,但是感觉大部分需求其实还没到用框架的底部,如宣传页面,几个页面,如果设计出的强,照着他给的宽高严格写就行了.然后加一些 meta 头信息

言归正传,页面滚动相关的 css 如下:

方案一 scrolltrigger 库

方案二 Animate Text on Scroll

![scrollcss2][./pics/scrollcss2.gif]
Animate text along a path on scroll using SVG and a scoop of vanilla JavaScript. Tutorial by Stephen Shaw (@shshaw) of the @keyframers.
* 💻 Final Code & Demo: https://cdpn.io/pen/NWKyNqK

  • 📺 Video: https://youtu.be/Tae96ze3xwY

  • 💡 Inspiration: New York Times article, shared by Jen Simmons https://www.nytimes.com/interactive/2…
    Additional Resources:

  • Affinity Designer Vector Design App https://affinity.serif.com/en-us/designer/

  • SVGOMG by Jake Archibald https://jakearchibald.github.io/svgomg

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    console.clear();

    var textPath = document.querySelector("#text-path");

    var textContainer = document.querySelector("#text-container");

    var path = document.querySelector(textPath.getAttribute("href"));

    var pathLength = path.getTotalLength();
    console.log(pathLength);

    function updateTextPathOffset(offset) {
      textPath.setAttribute("startOffset", offset);
    }

    updateTextPathOffset(pathLength);

    function onScroll() {
      requestAnimationFrame(function () {
        var rect = textContainer.getBoundingClientRect();
        var scrollPercent = rect.y / window.innerHeight;
        console.log(scrollPercent);
        updateTextPathOffset(scrollPercent * 2 * pathLength);
      });
    }

    window.addEventListener("scroll", onScroll);