ScrollMagic要素が自動的にページの読み込みでトリガーされています

Question

スクロールダウンを開始するとフェードインするはずのページの中央下部にグラフィック要素が配置されています。私はScrollMagic JS

問題を使用しています

は、私はページをリロードしてからフェードアウトたび要素が自動的に表示されていることです。そしてスクロールダウンを開始すると、再びフェードインして正常に動作します。

初期ページの読み込みを非表示にする必要があります。

どうすればいいですか？要素にdisplay: noneを追加すると、単純にその要素がすべて非表示になるためです。

CSSでease-outの代わりに別の種類のアニメーションを使用したいと思っています。グラフィック要素を起伏しているように見せてくれるものを使用したいと思います。ここでは、このサイトと同様に

：http://lempens-design.com/

DEMOhttps://jsfiddle.net/jtLo27op/3/

HTML

<div class="intro"> 
    <div class="background_image"></div> 
    <div class="container-fluid height100"> 
     <div class="row height100"> 
      <div class="col-md-12 text-center height100"> 
       <img src="assets/img/logo.png" alt="Logo" class="logo"> 

       <div id="animate" class="city-vector"> 
        <img src="assets/img/skyline.png" alt="Skyline" class="skyline"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1> 
     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1> 
     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1> 
     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1> 
     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1> 
     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1> 
    </div> 
</div> 

CSS

html, body { 
    width: 100%; 
    height: 100%; 
} 
body { 
    background-color: #191617; 
} 
.height100 { 
    height: 100%; 
} 
.logo { 
    width: 220px; 
    margin-top: 10em; 
} 
.skyline { 
    display: block; 
    max-width: 100%; 
    position: absolute; 
    bottom:0; 
    left:50%; 
    transform:translateX(-50%); 
} 
.city-vector { 
    opacity: 1; 
    transition: all 3s ease-out; 
} 
.city-vector.fade-in { 
    opacity: 0; 
} 

.intro { 
    height: 100%; 
    position: relative; 
    overflow: hidden; 
} 

.intro::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: url('../img/bg/bg5.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100%; 
    -webkit-filter: blur(3px); 
    -moz-filter: blur(3px); 
    -o-filter: blur(3px); 
    -ms-filter: blur(3px); 
    filter: blur(3px); 
    transform: scale(1.01); 
} 

Javascriptを

$(document).ready(function() { 
    var controller = new ScrollMagic.Controller(); 

    var ourScene = new ScrollMagic.Scene({ 
     triggerElement: '#animate', 
     duration: 361 
    }) 
    .setClassToggle('#animate', 'fade-in') 
    .addTo(controller); 
}); 

Answer 1

あなたのCSSのコードを変更する必要があります。

.city-vector { 
    opacity: 0; 
    transition: all 3s ease-out; 
} 
.city-vector.fade-in { 
    opacity: 1; 
} 

Updated JSfiddle

UPDATE：さて、あなたが望む機能のために、あなたが任意の外部ライブラリを必要としません。私はScrollMagicの経験がないので、使用していない。また、CSSを使って「ページ外に出てくる」アニメーションも追加しました。

JSfiddle

jQueryの

$(document).ready(function() { 
    $(window).scroll(function() { //run function every time window is scrolled 
    var scroll = $(window).scrollTop(); //find how much is scrolled from top 

    if (scroll > 0) { // if the scroll from top is greater than zero... 
     $("#animate").addClass("fade-in"); //then add class 
    } else { // if the scroll from top is not greater than zero... 
     $("#animate").removeClass("fade-in"); //then remove class 
    } 
    }); 
}); 

CSSアニメーション：

.skyline { 
    display: block; 
    max-width: 100%; 
    position: absolute; 
    bottom: 0; 
    opacity: 0; /* I removed this in update */ 
    transition: all 3s ease-out; /* Changed animation duration to 0.5s */ 
    left: 50%; 
    transform: translate(-50%, 100%); 
} 

.city-vector.fade-in .skyline { 
    transform: translate(-50%); 
    opacity: 1; /* and this */ 
} 

UPDATE：新JSfiddle "snappish" 効果を持ちます。