1 Replies - 300 Views - Last Post: 05 July 2018 - 12:45 AM

#1 shin777   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 68
  • Joined: 19-June 13

onscroll event.. what am I doing wrong?

Posted 04 July 2018 - 11:36 PM

[b]HTML[/b]
  <div class="pimg2">
    <div class="ptext1">
        Test1
    </div>
  </div>
<script src="js/javascript.js"></script>



[b]CSS[/b]

.ptext1{
  position:absolute;
  top:50%;
  width:100%;
  text-align:center;
  color:white;
  font-size:25px;
  font-size: 2vw;
  letter-spacing:8px;
  text-transform:uppercase;
}
.slideUp {
  animation-name: slideUp;
  animation-duration: 7s;

}

@keyframes slideUp {
    0% {
        opacity: 0; 
		margin-left: -20%;
    } 
    100% {
        opacity: 1;
		margin-left: 0;
    }
}


[b]javascript[/b]

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
        document.getElementsByClassName("ptext1").className = "slideUp";
    }
}



I am trying to get Test1 text to fly in from left to center as I scroll down. What am I doing wrong here? :(

Is This A Good Question/Topic? 0
  • +

Replies To: onscroll event.. what am I doing wrong?

#2 andrewsw   User is online

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6561
  • View blog
  • Posts: 26,599
  • Joined: 12-December 12

Re: onscroll event.. what am I doing wrong?

Posted 05 July 2018 - 12:45 AM

What happens? What doesn't happen? Are there errors in your browser's console?

document.getElementsByClassName("ptext1").className = "slideUp"; getElementsByClassName returns a collection, you cannot change the className of this collection. You would do that for individual elements.

window.onscroll = Assigning code to an event attribute like this is an old practice, addEventListener should be used.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1