Slide in an element when the user has scrolled down 350 pixels from the top of the page (add the slideUp class): - Javascript DOM Event

Javascript examples for DOM Event:onscroll

  1. HOME
  2. Javascript
  3. DOM Event
  4. onscroll

Description

Slide in an element when the user has scrolled down 350 pixels from the top of the page (add the slideUp class):

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
.slideUp {//w ww  .  j  a v  a 2s.  c om
    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%);
    }
}

body {height:1500px;}
.col-1 {float:left}
.col-2 {float:left;padding-left:25px;}
img {width:180px;height:100px;visibility:hidden;}
hr {margin-top:400px;}
</style>
</head>
<body>

<p>When you have scrolled 350px from the top, an image will slide in.
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.

</p>

<hr>
<div class="col-1">
  <img id="myImg" src="http://java2s.com/resources/a.png" width="304" height="228">
</div>

<div class="col-2">
  Just some text..
</div>

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

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

</body>
</html>

Related Tutorials