Home>

The feed-in code doesn't work.
There was no error itself. Also, when I checked in console, the code in .add class wasn't working.

                                                                                                                                                        <span>Hi</span>                                  g
                                  <span>h</span>                                <span>Q</span>                                  u
                                      <span>al</span>                                      it
                                      <span>y</span>                                <span>W</span>                                  e
                                  <span>b</span>                                <span>D</span>                                  e
                                  <span>si</span>                                  g
                                  <span>n</span>                                                                                                                                                                                        <span>Re</span>                                        <span>s</span>                                          po
                                          <span>si</span>                                          v<span>e</span>                                        <span>D</span>                                          es
                                          <span>i</span>                                          g
                                          <span>n</span>                                                                                                                                                                                                <span>C</span>                                        <span>o</span>                                          d
                                          <span>i</span>                                          n
                                          <span>g</span>                                                                                                                                                                                                <span>W</span>                                        <span>o</span>                                          rd
                                          <span>p</span>                                          re
                                          <span>ss</span>                                                                                                                                                                                    <p>We accept consultations on creating a homepage.</p>                                                                        <p>Inquiries</p>                                                                        
.effect-scroll {
  opacity: 1;
  transform: translate (0, 0);
}
# header-subulogo {
  padding-top: 150px;
  opacity: 0;
  transform: translate (0, 10px);/* Specify the height to move with fade-in * /
  transition: all 2000ms;
}
jQuery (function () {
  jQuery (window) .scroll (function () {
    jQuery ("# ​​header-subu"). each (function () {
      var elemPos = $(this) .offset (). Top;/* Get the position of the element * /
      var scroll = $(window) .scrollTop ();/* Get scroll position * /
      var windowHeight = $(window) .height ();/* Get screen width (to operate when entering the bottom of the screen) * /
      if (scroll>elemPos --windowHeight) {
       /* Works when scrolling to element position * /
        jQuery (this) .addClass ("effect-scroll");
      }
    });
  });
  jQuery (window) .scroll ();
});
  • Answer # 1

    I tested the code first, but what kind of animation was originally desired
    I'm not sure. I didn't understand what ".effect-scroll" meant.
    So
    When the target is scrolled and displayed on the screen, the class is added.

    Simply javascript has 3 mistakes

    jQuery (function () {
        jQuery (window) .scroll (function () {
            // id = "header-subu" doesn't exist "# header-subulogo"?
            jQuery ("# ​​header-subulogo"). each (function () {
                var elemPos = $(this) .offset (). Top;/* Get the position of the element * /
                var scroll = $(window) .scrollTop ();/* Get scroll position * /
                // var windowHeight = $(window) .height ();/* Get screen width (to operate when entering the bottom of the screen) * /
                // $(window) .height ();is the height including scrolling
                var windowHeight = window.innerHeight;// Screen height
                if (scroll>elemPos --windowHeight) {
                   /* Works when scrolling to element position * /
                    jQuery (this) .addClass ("effect-scroll");
                }
            });
        });
        // What is this processing?
        // jQuery (window) .scroll ();
    });

    Even if I write it in CSS as it is, nothing works
    Since the purpose of operation is unknown, it is reset because it is faded in.
    If it is different, please fix it.

    .effect-scroll {
    / * Commented
        opacity: 1;
        transform: translate (0, 0);
    * /
        opacity: 0;
        animation-name: fadeIn;
        animation-duration: 4s;/* Animation time * /
        animation-timing-function: ease-out;/* Animating easing * /
        animation-delay: 1s;/* Time to start animation * /
        animation-iteration-count: 1;/* Number of iterations * /
        animation-direction: normal;/* Whether to perform reciprocating processing * /
        animation-fill-mode: forwards;/* What to do with the post-animation style * /
    }
    # header-subulogo {
        padding-top: 150px;
        opacity: 0;
    / * Commented
        transform: translate (0, 10px);/Specify the height to move with fade-in /
        transition: all 2000ms;
    * /
    }
    @keyframes fadeIn {/ * Write the value set by animationtion-name * /
      0% {opacity: 0}/* Opacity 0% at the start of animation * /
      100% {opacity: 1}/* Opacity 100% at the end of the animation * /
    }