LPで文字列をアニメーション表示後に本文の画像のスクロールを横スクロールする

5月 6, 2022

WordPressサイトで、タイトル内容を実現したいと言う事です。

サンプルページ のような動作を希望されています。このサイトは、WordPressではなく、独自に作り込んでいるようです。

WordPressならば、これを実現できるプラグインがあるかと言う話になると思いますが、たぶんJavaScriptライブラリなどに頼って、HTMLを作り込んだ方が良い気がします。

LPで文字列をアニメーション表示

実装には、AnimationFrame を使用しています。

仕組みとしては、アニメーションしたい文字列を画像として用意しておき、AnimationFrameの仕組みを利用して、画面上で隠す文字列をsvgでマスキングしている感じですね。

最初は文字列を全て隠しておき、その後は文字を書くように隠す場所を減らしていくと言うことです。

    r = function() {
        i.prototype.docElem || (i.prototype.docElem = window.document.documentElement,
        e = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(t) {
            return window.setTimeout(t, 1e3 / 60)
        }
        ,
        t = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame || function(t) {
            return window.clearTimeout(t)
        }
        )
    }
/* .... */
    i.prototype.draw = function() {
        var t = this;
        if (this.currentFrame += this.speed,
        this.currentFrame <= 0)
            this.stop(),
            this.reset();
        else {
            if (!(this.currentFrame >= this.frameLength))
                return this.trace(),
                void (this.handle = e(function() {
                    t.draw()
                }));
            this.stop(),
            this.currentFrame = this.frameLength,
            this.trace(),
            this.selfDestroy && this.destroy()
        }
        this.callback(this),
        this.instanceCallback && (this.instanceCallback(this),
        this.instanceCallback = null)
    }
    i.prototype.trace = function() {
        var t, e, n, r;
        for (r = this.animTimingFunction(this.currentFrame / this.frameLength) * this.frameLength,
        t = 0; t < this.map.length; t++)
            e = (r - (n = this.map[t]).startAt) / n.duration,
            e = this.pathTimingFunction(Math.max(0, Math.min(1, e))),
            n.progress !== e && (n.progress = e,
            n.el.style.strokeDashoffset = Math.floor(n.length * (1 - e)),
            this.renderPath(t))
    }

下記サイトの、「9. ユニークなテキストアニメーション」が、若干近い感じですが、こちらの方が動きがあります。サンプルページは、一文字ずつ人が書いたように描画していく、一番オーソドックスなアニメーションですね。

下記の方が、サンプルページには近かったです。

最初は、自作したのかと思ったのですが、vivus と言う便利なライブラリを使ったのかも知れません。

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

http://maxwellito.github.io/vivus/

本文の画像のスクロールを横スクロールする

実装には、Infiniteslide.js v2 を使用しています。

要素を無限スクロールさせるjQueryプラグインです。
CSS3 Animationを使用しているため、滑らかです。

https://wood-roots.com/sample/infiniteslidev2/

このサイトには、slick.min.jsは置かれているので、slick を使用しているのかなと思ったのですが、違うようです。このサイトは、コンテンツのスクロールに凝っているので、どこかで使用しているのかも知れませんが。