[Sayoko Miura]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】v5.5.0
【お使いのブラウザ】Google Chrome

---

お世話になっております。

トップページをスクロールに連動して表示するようにしたいと思っています。

動き自体はスクロールに連動して要素をアニメーションするAOS（Animate On Scroll Library）

AOS – Animate on scroll library

AOS – Animate On Scroll library using CSS3

michalsnik.github.io

を使うとできるので、AOSを使う予定です。

しかし、実装するには、動かしたいブロックのタグに

data-aos=”fade-in”（fade-inさせたい場合）

を追加する必要があるのですが、トップページのウィジェットを使用して作成したブロックのタグに属性を追加する方法が分かりません。

よろしければ教えてください。

♥ 0

いいねをした人: 居ません

[Sayoko Miura]

2019.3.30のSnow Monkey ミートアップでご相談して、以下の方法で解決しましたので、フォーラムで共有させていただきます。

キタジマさん、ありがとうございました！！！

function.php に以下を記述し、置き換えで属性を追加します。

「hoge」はウィジェットに付いているid名を書いてください。

「fade-in」は動きに合わせて記述します。

add_filter(
    'inc2734_wp_awesome_widgets_render_widget',
    function( $widget ) {
        $widget = str_replace( 'id="hoge"', 'id="hoge" data-aos="fade-in"', $widget );
        $widget = str_replace( 'id="hoge"', 'id="hoge" data-aos="fade-in"', $widget );
        $widget = str_replace( 'id="hoge"', 'id="hoge" data-aos="fade-in"', $widget );
        return $widget;
    }
);

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

ありがとうございます！

♥ 0

いいねをした人: 居ません

[投稿者]

投稿