CODEWITHSUNDEEP
javascriptjquery
user3669077
user3669077

Reputation: 59

Images to fade in and out on scroll (jquery)

I want a collection of images to fade in on top of each other (display: block; position: fixed;) as the user scrolls down and then fade out (display: none;) as the user scrolls up. I have figured out how to make the scroll down work but not the scroll up. Any help would be much-appreciated

var $img2 = $('#img-scroll2');
var $img3 = $('#img-scroll3');
var $img4 = $('#img-scroll4');
$(document).scroll(function() {
  $img2.css({
    display: $(this).scrollTop() > 100 ? "block" : "none"
  });
  $img2.css({
    opacity: $(this).scrollTop() > 100 ? "1" : "0"
  });
  $img3.css({
    display: $(this).scrollTop() > 500 ? "block" : "none"
  });
  $img3.css({
    opacity: $(this).scrollTop() > 500 ? "1" : "0"
  });
  $img4.css({
    display: $(this).scrollTop() > 1000 ? "block" : "none"
  });
  $img4.css({
    opacity: $(this).scrollTop() > 1000 ? "1" : "0"
  });
});
.textWrapper {
  display: block;
  width: 100%;
  height: 100vh;
}

.sideText {
  float: right;
  width: 40%;
  margin-right: 50px;
  padding-top: 20%;
}

.sizing img {
  height: 101vh;
  margin: -8px 0 0 -8px;
}

.sizing {
  position: fixed;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#img-scroll2,
#img-scroll3,
#img-scroll4 {
  display: none;
  opacity: 0;
}
<div id="img-scroll" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579533882-Q23FII8WTGOF7RSWK6CN/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-016.jpg"
    border="0" /></div>
<div id="img-scroll2" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579447645-I0HOBG4HHM6JEMLB33BI/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-003.jpg"
    border="0" /></div>
<div id="img-scroll3" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579926694-5OKJJFY5ZLU59LTOBPHT/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-019.jpg"
    border="0" /></div>
<div id="img-scroll4" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579540213-CS2C08WJ0NTPFICQF8B6/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-017.jpg"
    border="0" /></div>
<div class="textWrapper">
  <div class="sideText">
    Maecenas in nulla ut turpis cursus congue. Quisque eget erat diam. Vivamus in placerat neque. Suspendisse quis tincidunt massa. Vivamus condimentum gravida nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus
    ac sapien vitae justo laoreet convallis ut ac arcu. Suspendisse ornare eleifend faucibus. Fusce volutpat blandit arcu.
  </div>
</div>
<div style="clear: both;"></div>
<div class="textWrapper">
  <div class="sideText">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, nisl non ullamcorper volutpat, orci ex rutrum nisl, ac dapibus risus ipsum sed massa. Suspendisse potenti. Pellentesque vitae auctor metus. Sed lorem sem, condimentum nec molestie
    eu, rhoncus eget purus. In commodo eleifend interdum. Quisque nec turpis vitae neque condimentum dapibus. Sed ut augue quam. Suspendisse potenti. Proin efficitur magna et molestie finibus. Praesent viverra rhoncus ex quis dapibus. Curabitur consectetur
    volutpat tellus sit amet sollicitudin. Etiam sed ipsum tellus.
  </div>
</div>
<div style="clear: both;"></div>
<div class="textWrapper">
  <div class="sideText">
    Quisque cursus, odio at convallis finibus, sem mi ultrices lectus, convallis lacinia eros eros nec dolor. Suspendisse sollicitudin dolor sed ante ultrices, nec pulvinar felis cursus. Vestibulum scelerisque tellus in lorem consectetur, hendrerit porttitor
    felis venenatis. Nunc sit amet elementum tellus. Donec ultricies mi congue tincidunt pellentesque. Quisque aliquam maximus erat, vel cursus neque luctus non. Sed sed ultrices justo. Integer tempus ante id diam rutrum porta sit amet a lectus. Curabitur
    eget nulla enim. Praesent in aliquam mauris, nec efficitur justo. In hac habitasse platea dictumst. Donec pretium metus sed eleifend ultrices.
  </div>
</div>
<div style="clear: both;"></div>
<div class="textWrapper">
  <div class="sideText">
    Nam convallis est id molestie volutpat. Pellentesque venenatis dapibus arcu sit amet congue. Quisque hendrerit nec purus at tincidunt. In sed velit justo. Nam fermentum leo lacus, tincidunt suscipit ex sagittis sed. Quisque posuere neque ut nisl semper,
    sit amet interdum tortor hendrerit. Nulla sit amet commodo erat.
  </div>
</div>

:-) My code

Upvotes: 0

Views: 77

Answers (2)

Lawrence
Lawrence

Reputation: 33

css:

.textWrapper {
            display: block;
            width: 100%;
            height: 100vh;
        }

        .sideText {
            float: right;
            width: 40%;
            margin-right: 50px;
            padding-top: 20%;
        }

        .sizing img {
            height: 101vh;
            margin: -8px 0 0 -8px;
        }

        .sizing {
            position: fixed;
            -webkit-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
            opacity: 0;
            display: block;
        }

        .active{
            opacity: 1;
        }

js:

$(document).scroll(function() {
            var scrollY = window.scrollY;
            var images = $('.sizing');
            if (scrollY<100){
                $(images[0]).addClass('active').siblings().removeClass('active');
            } else if (scrollY>100 && scrollY<=500){
                $(images[1]).addClass('active').siblings().removeClass('active');
            } else if (scrollY>500 && scrollY<=1000){
                $(images[2]).addClass('active').siblings().removeClass('active');
            } else{
                $(images[3]).addClass('active').siblings().removeClass('active');
            }
        });

Upvotes: 0

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

Remove display:none from all images, also remove CSS for display styling from JS.

Try below code it may help you

var $img2 = $('#img-scroll2');
var $img3 = $('#img-scroll3');
var $img4 = $('#img-scroll4');
$(document).scroll(function() {
  $img2.css({
    opacity: $(this).scrollTop() > 100 ? "1" : "0"
  });
  $img3.css({
    opacity: $(this).scrollTop() > 500 ? "1" : "0"
  });
  $img4.css({
    opacity: $(this).scrollTop() > 1000 ? "1" : "0"
  });
});
.textWrapper {
  display: block;
  width: 100%;
  height: 100vh;
}

.sideText {
  float: right;
  width: 40%;
  margin-right: 50px;
  padding-top: 20%;
}

.sizing img {
  height: 101vh;
  margin: -8px 0 0 -8px;
}

.sizing {
  position: fixed;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#img-scroll2,
#img-scroll3,
#img-scroll4 {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="img-scroll" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579533882-Q23FII8WTGOF7RSWK6CN/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-016.jpg"
    border="0" /></div>
<div id="img-scroll2" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579447645-I0HOBG4HHM6JEMLB33BI/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-003.jpg"
    border="0" /></div>
<div id="img-scroll3" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579926694-5OKJJFY5ZLU59LTOBPHT/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-019.jpg"
    border="0" /></div>
<div id="img-scroll4" class="sizing"><img src="https://images.squarespace-cdn.com/content/v1/5919161f4402437088478122/1570579540213-CS2C08WJ0NTPFICQF8B6/ke17ZwdGBToddI8pDm48kOBnpiLBdaQ0X3vrSezq3-kUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z2Yj_GA-p8dUs-xhuG4ixUBqjRHjRV_BmqW5Uawimi1UY6liCGkj4dr9PBmyqqYlee/Bayview-017.jpg"
    border="0" /></div>
<div class="textWrapper">
  <div class="sideText">
    Maecenas in nulla ut turpis cursus congue. Quisque eget erat diam. Vivamus in placerat neque. Suspendisse quis tincidunt massa. Vivamus condimentum gravida nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus
    ac sapien vitae justo laoreet convallis ut ac arcu. Suspendisse ornare eleifend faucibus. Fusce volutpat blandit arcu.
  </div>
</div>
<div style="clear: both;"></div>
<div class="textWrapper">
  <div class="sideText">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, nisl non ullamcorper volutpat, orci ex rutrum nisl, ac dapibus risus ipsum sed massa. Suspendisse potenti. Pellentesque vitae auctor metus. Sed lorem sem, condimentum nec molestie
    eu, rhoncus eget purus. In commodo eleifend interdum. Quisque nec turpis vitae neque condimentum dapibus. Sed ut augue quam. Suspendisse potenti. Proin efficitur magna et molestie finibus. Praesent viverra rhoncus ex quis dapibus. Curabitur consectetur
    volutpat tellus sit amet sollicitudin. Etiam sed ipsum tellus.
  </div>
</div>
<div style="clear: both;"></div>
<div class="textWrapper">
  <div class="sideText">
    Quisque cursus, odio at convallis finibus, sem mi ultrices lectus, convallis lacinia eros eros nec dolor. Suspendisse sollicitudin dolor sed ante ultrices, nec pulvinar felis cursus. Vestibulum scelerisque tellus in lorem consectetur, hendrerit porttitor
    felis venenatis. Nunc sit amet elementum tellus. Donec ultricies mi congue tincidunt pellentesque. Quisque aliquam maximus erat, vel cursus neque luctus non. Sed sed ultrices justo. Integer tempus ante id diam rutrum porta sit amet a lectus. Curabitur
    eget nulla enim. Praesent in aliquam mauris, nec efficitur justo. In hac habitasse platea dictumst. Donec pretium metus sed eleifend ultrices.
  </div>
</div>
<div style="clear: both;"></div>
<div class="textWrapper">
  <div class="sideText">
    Nam convallis est id molestie volutpat. Pellentesque venenatis dapibus arcu sit amet congue. Quisque hendrerit nec purus at tincidunt. In sed velit justo. Nam fermentum leo lacus, tincidunt suscipit ex sagittis sed. Quisque posuere neque ut nisl semper,
    sit amet interdum tortor hendrerit. Nulla sit amet commodo erat.
  </div>
</div>

Upvotes: 1

Related Questions