Question

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

我正在使用ScrollMagic JS

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

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

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

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

此处与此网站类似：http://lempens-design.com/

DEMO 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没有任何经验，所以我没有使用它。我还添加了动画，使其通过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 */
}

更新：新JSfiddle具有“快速”效果。

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

1 个答案: