In this tutorial I will show you how to fade image on scroll. In this article I will be using a jQuery library called as crossfade.js. With just few lines of code you can get this effect.
Including crossfade.js and jQuery in Webpage
You can directly include crossfade.js and jQuery from CDN.
Image Fade On Scroll Effect
Here are some points you need to remember while using the library.
- The elements you initialize Crossfade.js on must be “fixed”, “absolute” or “relative” positioned.
- Any content inside the element you initialize Crossfade.js on will need to be set to “position: relative” to make sure it’s visible above the injected <canvas> element.
Here is the complete code. We created such kind of effect with just few lines of code
<!DOCTYPE html>
<html>
<head>
<title>Fade Image On Scroll</title>
</head>
<body>
<!-- This is the element which contains the image. We need to provide real image and 100% blurred image to the element data attributes. Just make sure this element is positioned. -->
<div class="element" data-crossfade-start="https://cdn.rawgit.com/mikefowler/crossfade.js/master/demo/02.jpg" data-crossfade-end="https://cdn.rawgit.com/mikefowler/crossfade.js/master/demo/02-blur.jpg">
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.rawgit.com/mikefowler/crossfade.js/master/dist/crossfade.jquery.js"></script>
<script type="text/javascript">
$(function () {
$('.element').crossfade();
});
</script>
</body>
</html>
<html>
<head>
<title>Fade Image On Scroll</title>
</head>
<body>
<!-- This is the element which contains the image. We need to provide real image and 100% blurred image to the element data attributes. Just make sure this element is positioned. -->
<div class="element" data-crossfade-start="https://cdn.rawgit.com/mikefowler/crossfade.js/master/demo/02.jpg" data-crossfade-end="https://cdn.rawgit.com/mikefowler/crossfade.js/master/demo/02-blur.jpg">
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.rawgit.com/mikefowler/crossfade.js/master/dist/crossfade.jquery.js"></script>
<script type="text/javascript">
$(function () {
$('.element').crossfade();
});
</script>
</body>
</html>
