wow.jsのFadeOutしてからの挙動

前提・実現したいこと

web制作にwow.jsを使いたいと思っています。
一度FadeOutした画像は再度サイトを訪れたり
リロードするまで消しておきたいです。

ここに質問の内容を詳しく書いてください。
FadeOutした画像が数秒するとスタートの位置に戻って表示されてしまいます。
どのようにすると一度消えた画像をそのままにしておくことができるのでしょうか？

よろしくお願いいたします。

FiroProchainezo

2019/07/29 06:54

現時点で動作しているソースコードはないのでしょうか？

kaiji

2019/07/29 07:54

ありがとうございます。 htmlへの記述は下記となります。 <link rel="stylesheet" href="css/animate.css"> <script> new WOW().init(); </script> <div id="leftbg"><img class="wow fadeOutLeftBig" data-wow-delay="1s" data-wow-duration="8s" data-wow-iteration="1" src="images/left_bg_move.png" height="1000px" /></div> <div id="rightbg"><img class="wow fadeOutRightBig" data-wow-delay="1s" data-wow-duration="8s" data-wow-iteration="1" src="images/right_bg_move.png" height="1000px"/></div> これでfadeoutはするのですが8秒たつと初期の位置にもどってしまいます。これをfadeoutして消えたままにしておきたいと思っております。どうぞよろしくお願いいたします。

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

回答2件

wow.jsをぱっと見た感じ、ずっと消したままにするというのが見つかりませんでした。(熟読したり、有料版を確認すればあるのかもしれませんが)

とりあえず、期待している動作(一度消えた画像をそのままにしておく)をさせるために、data-wow-durationに設定した時間と同じ時間経過後にimg要素を非表示にするのはいかがでしょうか？

html
1<html lang="ja">
2<head>
3    <meta charset="UTF-8" />
4    <title>wow test</title>
5    <link rel="stylesheet" href="css/animate.css"/>
6</head>
7<body>
8    <div id="leftbg">
9        <img class="wow fadeOutLeftBig" data-wow-delay="1s" data-wow-duration="8s" data-wow-iteration="1"
10             src="images/left_bg_move.png" height="488" alt="left image"
11             id="img1"/>
12    </div>
13    <div id="rightbg">
14        <img class="wow fadeOutRightBig" data-wow-delay="1s" data-wow-duration="8s" data-wow-iteration="1"
15             src="images/right_bg_move.png" height="488" alt="right image"
16             id="img2"/>
17    </div>
18    <script type="text/javascript" src="script/wow.min.js"></script>
19    <script>
20        new WOW().init();
21
22        function invisible(){
23            let img1 = document.getElementById('img1');
24            let img2 = document.getElementById('img2');
25
26            img1.style.display = "none";
27            img2.style.display = "none";
28            console.log("invisible");
29        }
30        window.onload = function(){
31            setTimeout("invisible()", 8000);
32
33        };
34    </script>
35</body>
36</html>
37
38