SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a blur effect on image

    Hi all, I wonder if it is possible to make a JS blur effect on an image while it's moving.

    It probably is but I haven't seen it done before with JS, only ActionScript for Flash, I wonder what is the reason for this.

    So the way I have been thinking this could be achieved is by loading several times the same image giving them transparency and offsetting them a pixel or two from each other.

    Any input or ideas regarding this issue would be greatly appreciated.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You could use something like the Pixeltastic library to perform blurs, it's JS creating a canvas element. Since JS doesn't have any real image manipulation, canvas is the real hero here.
    Pixastic: JavaScript Image Processing : Blur
    Pixastic: JavaScript Image Processing : Blur Fast

    While you could certainly apply animation effects to a container of canvas, or use canvas to move the elements themselves, there might be some performance issues there, especially with larger images.

    To perform a manual blur as you described, using JS & transparency you could insert 8 images and transpose them on the top with an offset.

    I knocked up a super quick example:

    Code HTML4Strict:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Testing img blur</title>
        <style>
    		#container { position:relative; width:300px; height:300px; overflow:hidden; top:150px; left:150px; }
    		#container img { position:absolute; opacity:0.125; }
    		#container #i0 { opacity:1; top:0; left:0; }
    		#i1 { top:-2px; left:-2px; }
    		#i2 { top:-2px; left:0px; }
    		#i3 { top:-2px; left:2px; }
    		#i4 { top:0px; left:-2px; }
    		#i5 { top:0px; left:2px; }
    		#i6 { top:2px; left:-2px; }
    		#i7 { top:2px; left:0px; }
    		#i8 { top:2px; left:2px; }
    		</style>
    	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	<script type="text/javascript">
     
    		$(document).ready(function(){
    			amt = 0;
    			$("#container").click(function(){
    				amt = amt == 150 ? -150 : 150; 
    				$(this).animate({"left":$(this).position().left + amt, "top":$(this).position().top + amt, }, 1000);
    			})
    		});
    	</script>
    </head>
    <body>
    <div id="container">
    	<img src="http://placekitten.com/300/300" id="i0"/>
    	<img src="http://placekitten.com/300/300" id="i1"/>
    	<img src="http://placekitten.com/300/300" id="i2"/>
    	<img src="http://placekitten.com/300/300" id="i3"/>
    	<img src="http://placekitten.com/300/300" id="i4"/>
    	<img src="http://placekitten.com/300/300" id="i5"/>
    	<img src="http://placekitten.com/300/300" id="i6"/>
    	<img src="http://placekitten.com/300/300" id="i7"/>
    	<img src="http://placekitten.com/300/300" id="i8"/>
    </div>
    </body>
    </html>

    Of course you'd generate the additional images with JS and generate the styles depending on what level of blur you wanted.

    This is only a very basic level of blur though, nothing like what you could achieve using Canvas
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for this info, appreciated!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •