我已经使动画在滚动状态下工作，但是我想应用的样式阻止了它的工作

Question

I have butchered the below from a few sources, I want to animate the text moving up highlighting on scroll. But I want it to look like this:

Heading

I've got some CSS there which does it but it stops the animation working, I want this animation to work across my site for various headings, not 100% sure if the code here will do that or not!

HTML

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
<div id = "spacer"></div>
  <div class='boostheadings'><h2>TAKE NOTE, MAKE <span class="onAppear">PROGRESS</span></h2></div>  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>  

CSS

/*.boostheadings {
  font-family: "montserrat";
  font-size: 7vw;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
}
*/

.onAppear {
 background-image: linear-gradient(120deg, #32d2ff 0%, #32d2ff 100%);
  transform: skew(30deg);
  background-repeat: no-repeat;
  background-size: 100% 20%;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
}
.visible {
    background-image: linear-gradient(120deg, #32d2ff 0%, #32d2ff 100%);
  background-repeat: no-repeat;
  background-position: 0 88%;
  transition: background-size 1s ease-in;
    background-size: 100% 90%;
    transform: skew(30deg);
}

}

JS

var onAppear = [];

document.addEventListener("DOMContentLoaded", function() {
  onAppear = [].map.call(document.querySelectorAll(".onAppear"), function(item ) {
    return item;
  });
}, false);

window.addEventListener("scroll", function() {
  onAppear.forEach(function(elem) {
    var vwTop = window.pageYOffset;
    var vwBottom = (window.pageYOffset + window.innerHeight);
    var elemTop = elem.offsetTop;
    var elemHeight = elem.offsetHeight;

    if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
     elem.classList.add("visible");
    } else {
      elem.classList.remove("visible");
    }
  });
}, false);

https://codepen.io/anon/pen/xYKMbM

Answer 1

 var onAppear = []; document.addEventListener("DOMContentLoaded", function() { onAppear = [].map.call(document.querySelectorAll(".onAppear"), function(item ) { return item; }); }, false); window.addEventListener("scroll", function() { onAppear.forEach(function(elem) { var vwTop = window.pageYOffset; var vwBottom = (window.pageYOffset + window.innerHeight); var elemTop = elem.offsetTop; var elemHeight = elem.offsetHeight; if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) { elem.classList.add("visible"); } else { elem.classList.remove("visible"); } }); }, false); 

 .boostheadings { font-family: "montserrat"; } .skewed { display: inline-block; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); transform: skew(-20deg); } .onAppear { background-image: linear-gradient(120deg, #32d2ff 0%, #32d2ff 100%); background-repeat: no-repeat; background-size: 100% 20%; background-position: 0 88%; transition: background-size 0.25s ease-in; } .visible { background-image: linear-gradient(120deg, #32d2ff 0%, #32d2ff 100%); background-repeat: no-repeat; background-position: 0 88%; transition: background-size 1s ease-in; background-size: 100% 90%; } 

 <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <div id = "spacer"></div> <div class='boostheadings'> <h2> <span class="skewed">TAKE NOTE, MAKE</span> <span class="onAppear skewed">PROGRESS</span> </h2> </div> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> 

In this snippet I did not go through the rest of your code, just the thing that prevented your animation.

In order to make sure it works, you can skew elements inside h2 tag as separate elements, not the whole .boostheadings div.

So in your case 2 span elements should be skewed (I wrapped first part of sentence in span, just before span with animation), which cannot be transformed as inline elements, so I gave them class "skewed" then in css gave them display: inline-block and skew transform.