Helping out a friend with the above site and am trying to add a ‘slide-up’ JS effect to some images on a page. To do this I’m using the below code files;

JS file;

<script>
window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 750 || document.documentElement.scrollTop > 350) {
        document.getElementById("myImg").className = "slideUp";
    }
}
</script>

CSS in the style sheet;

.slideUp {
 animation-name: slideUp;
 -webkit-animation-name: slideUp;
 animation-duration: 1s;
 -webkit-animation-duration: 1s;
 visibility: visible;
}

@keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

@-webkit-keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

Image on the page I hope to ‘slide up’;

<img src="https://one-pillow.com.au/wp-content/uploads/2017/11/idea-pillow.png" id="myImg" alt="" width="150" height="150" class="responsive_image"/>

All the files have been uploaded and I am linking these together in the header using the Google jQuery link;

<!– Google jQuery Tag –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script&gt;
<!– Google jQuery Tag –>`

I got this link for jQuery from here: https://www.w3schools.com/jquery/jquery_get_started.asp

I am able to create the effect separate notepad++ docs but not in my wordpress site. Is there something I’m missing or am doing wrong?

Any help/advice/links to articles is much appreciated.
Thank you in advance to anyone who can help.

Also, you might try putting them in the footer.

Sorry about the access! The password to view the site is gibblefibble76.
Shows you the whole website.

I’ll get to work on what you suggested, if you have time to view the site a second time I’d be eternally greatful.

Cheers! ??