Search code examples
javascriptjqueryhtmlcssparallax

ScrollMagic element is being triggered on page load automatically

I have a graphic element positioned at the bottom center of my page that is supposed to fade-in when you start scrolling down.

I am using ScrollMagic JS

The problem is that element is being displayed automatically whenever I reload the page and then fades out. And after I start scrolling down, it fades back in again and starts working normally.

I need to hide on initial page load.

How may I achieve that? Because adding display: none to the element simply hides it all together.

I would also like to use a different kind of animation, instead of ease-out in CSS, I would like to use something that makes the graphic element to look like as it is rising up and rising down.

Similar to this site here: 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);
});
Solution

  • You have to change your CSS code:

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

    Updated JSfiddle

    UPDATE: Okay, for the function you want, you don't need any external libraries. I don't have any experience with ScrollMagic, so I just didn't use it. I've also added the animation that makes it "rise out of the page" through 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 animation:

    .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: New JSfiddle with "snappish" effect.