ScrollMagic 元素在页面加载时自动触发

Question

我的页面底部中央有一个图形元素，当您开始向下滚动时，它应该会淡入。

我正在使用ScrollMagic JS

问题是每当我重新加载页面时元素都会自动显示然后淡出。在我开始向下滚动后，它再次淡入并开始正常工作。

我需要在初始页面加载时隐藏。

我怎样才能做到这一点？因为向元素添加 display: none 只是将其全部隐藏在一起。

我还想使用一种不同类型的动画，而不是 CSS 中的 ease-out，我想使用使图形元素看起来像上升的东西和上升。

类似于此站点：http://lempens-design.com/

演示 https://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

更新：好的，对于您想要的功能，您不需要任何外部库。我没有任何使用 ScrollMagic 的经验，所以我没有使用它。我还添加了使它成为 "rise out of the page" 到 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 */
}

更新：具有 "snappish" 效果的新 JSfiddle。

ScrollMagic 元素在页面加载时自动触发

ScrollMagic element is being triggered on page load automatically

html

javascript

css

jquery

parallax