Title: Adding Javascript/JQuery/CSS# effect to Site
Last modified: December 17, 2017

---

# Adding Javascript/JQuery/CSS# effect to Site

 *  [Michael1799](https://wordpress.org/support/users/michael1799/)
 * (@michael1799)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-javascript-jquery-css-effect-to-site/)
 * Hi Everyone,
 * 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="http://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](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](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.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fadding-javascript-jquery-css-effect-to-site%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [tkgnewseed](https://wordpress.org/support/users/tkgnewseed/)
 * (@tkgnewseed)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-javascript-jquery-css-effect-to-site/#post-9793509)
 * Cannot access the site but you might check to make sure you do not have 2 instances
   of jquery core js.
 * Also, you might try putting them in the footer.
 *  Thread Starter [Michael1799](https://wordpress.org/support/users/michael1799/)
 * (@michael1799)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/adding-javascript-jquery-css-effect-to-site/#post-9799498)
 * Hey tkgnewseed,
    Thanks for the tip!
 * 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! 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Adding Javascript/JQuery/CSS# effect to Site’ is closed to new replies.

## Tags

 * [javescript](https://wordpress.org/support/topic-tag/javescript/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [Michael1799](https://wordpress.org/support/users/michael1799/)
 * Last activity: [8 years, 5 months ago](https://wordpress.org/support/topic/adding-javascript-jquery-css-effect-to-site/#post-9799498)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics