FULLSCREEN IMAGE BLUR EFFECT WITH HTML5

1
0



Today we want to share a neat image blur effect with you. Using canvas, we want to blur images on the transition to another one, creating a smooth effect.

VIEW DEMO               DOWNLOAD SOURCE

Today we want to share a neat image blur effect with you. Using canvas, we want to blur images on the transition to another one, creating a smooth effect.

We will be using Stack Blur, which is a fast, almost Gaussian blur for Canvas by Mario Klingemann from Quasimondo.

The images used in the demo are by Geoff Peters. They are licensed under the Attribution 2.0 Generic (CC BY 2.0) License.

HOW IT WORKS:

The main idea is to add some images in our structure that will serve as background images. We will add the canvas element which will contain a blurred version of the image. When we navigate, we’ll add the blurred canvas behind the current image and fade the current image out. With the blurred canvas image now visible, we can either show the new image immediately (unblurred) or show it blurred and then “sharpen” it.

You can set that by changing the variation between 1 and 2:

animOptions         = { speed : 700, variation : 1, blurFactor : 10 }

The speed is the animation speed between each transition (from normal to blurred) and the blurFactor is basically the radius for the blur effect used in Stack Blur.

DEMOS:

  • Demo 1: Here we use variation 2, showing the coming image without blurring it first.
  • Demo 2: In this demo we use variation 1 for blurring both, the current image and the coming one.

We hope you liked our little experiment and find it inspiring and useful!

23 thoughts on “FULLSCREEN IMAGE BLUR EFFECT WITH HTML5”

  1. Can I just say what a comfort to uncoveer someone who
    actually knows what they are discussing on the web.
    You certainly know how tto bring a prblem to light and make it important.
    A lot more people must check tuis out and understand this side
    of the story. I was surprised that youu aren’t more popular
    because youu surely have the gift.

  2. I every time used to study paragraph in news
    papers but now as I am a user of internet so
    from now I am using net for content, thanks to web.

  3. Cinnabon Register and receive a free minibon for signing up.
    In the template gallery of this website, you will find the widely used
    and most suitable template options for your website. Lastly, always make
    sure that the programs you download are free from bugs
    and unwanted files.

  4. Thanks for sharing excellent informations. Your web site is very cool.
    I’m impressed by the details that you have on this web site.

    It reveals how nicely you perceive this subject. Bookmarked this website
    page, will come back for more articles. You, my
    pal, ROCK! I found simply the information I already searched everywhere and
    just could not come across. What a great web-site.

    My webpage: personal injury lawyer port st lucie

  5. I don’t know if it’s just me or if perhaps everybody else experiencing
    issues with your blog. It appears as if some of the written text on
    your content are running off the screen. Can somebody else please comment and let me know
    if this is happening to them too? This could be a issue with
    my browser because I’ve had this happen previously.

    Kudos

  6. I have to thank you for the efforts you’ve put in penning this website.
    I really hope to see the same high-grade blog posts from you later on as well.

    In truth, your creative writing abilities has motivated me to get my very own site now
    😉

  7. Hey there! I know this is sort of off-topic but I needed to ask.
    Does running a well-established website such as yours take a massive amount work?
    I am brand new to blogging but I do write in my journal
    everyday. I’d like to start a blog so I can share my own experience and feelings online.
    Please let me know if you have any suggestions or tips for brand new aspiring bloggers.
    Thankyou!

    Feel free to visit my homepage: pick up lines for guys funny dirty

    1. Try wordpress like other aspiring bloggers to showcase your blog.

      If you need to have some special features or design on your blog then try hiring a web developer from freelancing sites or else contact some web development companies.

  8. All the products are tested for their quality and durability.

    At Dave and Busters, you will both enjoy playing the game and winning instant tickets at the same
    time. Exclusively at Target: Hop Blu-ray Combo Pack
    with free wearable bunny ears and printable Easter party
    kit.

  9. Heyy there! I know this is somewhat off topic but I was wondering iff you knew where I could
    find a captcha plugin for my comment form?
    I’m using the szme blog platform as yours and I’m having difficulty fining one?
    Thanks a lot!

  10. I appreciate, cause I found just what I was taking a look for.
    You’ve ended my 4 day lengthy hunt! God Bless you man. Have
    a great day. Bye

  11. Nice post. I was checking constantly this blog and I am impressed!
    Very useful info specifically the last part :) I care for such info a lot.
    I was seeking this particular info for a very
    long time. Thank you and best of luck.

  12. I feel that is among the such a lot important information for me.
    And i am happy reading your article. However
    wanna commentary on few basic issues, The web site taste is ideal, the articles is in reality
    excellent : D. Just right job, cheers

Leave a Reply to personal injury lawyer port st lucie Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>