Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Effects’ Category

Seadragon is a technology, by Microsoft, for deeply zooming images of any size. It provides almost perfect transitions independent from the sizes of the images.

Seadragon Ajax is an interface for using/embedding this technology to any website.

Seadragon Ajax

Seadragon can be used in 2 ways:

Developers can customize viewers & controls with the Seadragon Ajax Library. It is also available at the Silverlight platform.

jQuery Corners is a jQuery plugin for creating nice-looking, anti-aliased rounded corners without using any images.

The plugin is unobtrusive & works well with all major browsers including iPhone.

jQuery Rounded Corners

The corners to be rounded & the radius of the corners can be easily set.

And, a great feature is the ability to round form buttons.

Update 26.01.2011: The URL of the resource is updated as the developer's website is no longer available.

  • Tags:
  • Filed under: Effects, Goodies
  • 6 Comments
  • Easy Reflections, a PHP script that enables you to create reflections (Web 2.0 look) of any image.

    Supported image types are GIF, JPG & PNG.

    PHP Image Reflection Script

    There is a built-in caching mechanism to prevent creating same images again & again.

    And, fade levels used can be configured.

    The script works with both PHP4 & PHP5 and requires GD extension 2.0.1+ installed.

  • Tags:
  • Filed under: Effects, Goodies, License Free
  • 1 Comment
  • Jumpeye Components is giving away 3 FlashEff Premium Unlimited Licenses ($249 value/each) to WebResourcesDepot readers.

    Details of the giveaway & how to join it can be found below the post.

    What is FlashEff?

    FlashEff is a Flash CS3 (and Flash CS4 ready) AS3 component for easing the animation process & creating stunning animations.

    Tip: To see the beauty of the effects, click here to go to the effects gallery.

    Flash Text Effects

    It is also a collection of over 100 patterns (and growing) that enable cool animations and interactive actions on visual objects and texts. FlashEff can be used/customized from both, the visual interface and API.

    The visual interface, FlashEff Panel, is a powerful online utility that loads inside your Flash CS3 IDE and configures everything for the FlashEff component.

    FlashEff Effects

    Using FlashEff, you can:

    • Create amazing animations with images, movieclips or text.
    • Create animated buttons without coding.
    • Perform commands and trigger actions on any event such as rollOver, press or doubleClik.
    • Add static or animated fitlers to any visual object within Flash CS3.
    • Most of the patterns can be combined to create complex animated objects.

    FlashEff Pattern Creation Contest With $2500 Worth Prize!

    Do you have advanced AS3 skills? Then create a pattern for FlashEff, submit it until 31 October 2008 & get the chance to be one of the winners who will earn $2500 worth prize.

    Click here to see the details of the Pattern Creation Contest.

    How To Win The Free Licenses?

    Simply comment to this post & that’s all.

    Winners will be selected randomly from commenters 1 week later (29 September 2008 – Thursday) with the SQL query below:

    SELECT * FROM wp_comments WHERE comment_post_id=533 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

    Good luck to all : ). 

    jParallax is a jQuery plugin which enables you to create Parallax effects.

    This effect simply moves layers in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts & create a depth.

    jQuery Parallax

    Info: If you’re new to parallax effects, check the demo to see it (Parallax in Wikipedia).

    jParallax simply provides the necessary options for creating the animation like layer controlling, positioning & timing.

    Raphaël is a JavaScript library that facilitates using & creating vector graphics in websites.

    It uses SVG & VML for creating graphics. As every graphic generated is a DOM object, you can manipulate them via JavaScript.

    JavaScript Vector Graphics

    This graphics JavaScript library is very ideal for creating charts, images effects like rotation or reflection.

    An example:

    Creating graphics is much easier with Raphaël compared to writing everything from scratch as a circle can be created with:

    paper.circle(320, 240, 50).attr({fill: "#223fa3", stroke: "#223fa3", "stroke-width": 3, "fill-opacity": 0.5});

    The library currently works in all major browsers except Firefox 2 & it is still under development.

    WideImage is an object-oriented PHP image library.

    Color Palette Icon
    It is written in PHP 5 and requires only GD2 library for manipulating images.

    The library is very suitable for new generation web applications (for easier mashups) as it supports loading images from any URL besides loading them from a file, string or a valid image source.
     

    Some features of WideImage:

    • Transformations: crop, resize, rotate, flip, mirror
    • Conversions: graysclae, negative, truecolor, palette
    • Colors/channels: merge, mask, filter, get channels, correct gamma…

    jqPuzzle is a jQuery plugin which enables you to create sliding puzzles from any image.

    The created JavaScript puzzle can have the shuffle & solution options besides the moves made & seconds played.

    JavaScript Puzzle

    jqPuzzle is highly configurable as the options in the interface can be enabled/disabled, number of rows & columns of the puzzle to be created can be defined & more.

    How to use?

    After inserting the jquery.jqpuzzle.js & jquery.jqpuzzle.css files to your webpage, simply give the class="jqPuzzle" to any image. That’s all.

    JavaScript Image Effects is a library that you can instantly create effects like rotate, blur, emboss & more.

    Emboss Effect

    Using such a library is very functional in situations where you may need to add an effect to lots of images, need to provide an interface to the users for creating effects & so.

    How to use?

    After inserting the imagefx.js file into your webpage, you have 2 options:

    <script type="text/javascript" >
    jsImageFX.doImage(document.getElementById("myimage"), "blur");
    </script>

    or

    <img src="image.jpg" imagefx="blur" /> 

    where both are very easy to apply.

    Every image effect is not available in every browser and a comprehensive browser compatibility chart can be found in the website

    Magic Toolbox is a set of JavaScript image effect solutions.

    These include zoom, magnify and thumb features.

    JavaScript Magnify Effect

    These JavaScript solutions do not rely on JavaScript framework, they are well-documented and some have installation instructions for other like Joomla, Drupal, osCommerce & more.

    They are free only for non-commercial use and need a license for commercial websites.

    Uptime Robot
    feed-holder
    FeedBurner
    HotScripts Marketplace
    PSD2HTML.com