QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Fade Image On Scroll Effect

Fade Image On Scroll Effect

fade-image

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.

<!DOCTYPE html>
<html>
<head>
    <title>Fade Image On Scroll</title>
</head>
<body>
    <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>
</body>
<body>

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

View Demo

<!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>
Nov 4, 2014Narayan Prusty
Some Websites Not Opening In BSNL Broadband SolutionHTML5 Mobile App Development Using Intel XDK
Comments: 1
  1. Hesam
    7 years ago

    Dear Friends,
    What effect used in news box contains image and text, when we scroll down page ?
    How do I get this effect ?

    http://seventhqueen.com/themes/kleo/news-magazine/

    Cheers,

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 1 Comment Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Including crossfade.js and jQuery in Webpage
  • Image Fade On Scroll Effect
Related Articles
  • Full Screen Scrolling with Page Piling Effect
  • Full Screen Scrolling with Page Split Effect
  • Change Navigation Style On Scroll
  • Lazy Loading Images And Its SEO Impact
  • How To Detect Element Entered Viewport
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license