AOSを使いつつ、body fadeinでページをフワッと表示させたい

AOS.js
https://michalsnik.github.io/aos/

AOS.init({
  offset: 100,
  delay: 200,
  duration: 1000,
  easing: 'ease-in-out',
  once: true,
  mirror: false,
  anchorPlacement: 'top-bottom',
});

https://on-ze.com/archives/341

$('head').append(
'<style>body{display:none;}'
);
$(window).on("load", function() {
$('body').delay(600).fadeIn("slow");
});

これを併用すると、AOSが効かなくなってしまいます。
ご教授願います。

kei344

2020/04/13 03:03

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

行動規範の内容に同意します

回答2件

AOS.jsだけにして、全体を覆う要素にdata-aos="fade"を使えばよいと思います。（試していませんが、body要素でも効くと思います）
delayも必要ならdata-aos-delayを使えばよいです。

js
1<div id="a" data-aos="fade">
2  <div data-aos="fadeInUp"></div>
3  <div data-aos="fadeInUp"></div>
4  <div data-aos="fadeInUp"></div>
5  <div data-aos="fadeInUp"></div>
6  <div data-aos="fadeInUp"></div>
7  <div data-aos="fadeInUp"></div>
8  <div data-aos="fadeInUp"></div>
9</div>
10```**動くサンプル：**[https://jsfiddle.net/fdb3p6zg/](https://jsfiddle.net/fdb3p6zg/)
11
12---
13
14【GitHub - michalsnik/aos: Animate on scroll library】
15[https://github.com/michalsnik/aos](https://github.com/michalsnik/aos)