Tutorial: Creating mirrored images on our website (using Javascript)!

Discussion in 'HTML & Website Design' started by RJP1, Jul 2, 2007.

  1. #1
    Hi guys,

    I'm new to these forums and would like to throw a tutorial out to you to gain some friends on here! I use this on my latest portfolio site...
    It is to create nice mirror images under an image on your websites using Javascript from Mootools and Digitalia (a big thanks to the guys over there!)

    Find attached 2 files, the reflection.js and mootools.v1.11.js (in zip files, extract it before use)

    Installation:
    Simply add the following code to the header of your website:

    <script type="text/javascript" src="js/mootools.v1.1l.js"></script>
    <script type="text/javascript" src="js/reflection.js"></script>
    Code (markup):
    Then upload the 2 attached files to a folder on your server (in the root) called "js"
    [i.e. root > js > files]

    Adding the reflection to the desired image:
    A simple CSS class named "reflect" has to be added to your images like so...

    <img src="Example.jpg" class="reflect" />
    Code (markup):
    Save your page, refresh your site and voila, awesome reflections with opacity underneath your original picture!
    See my demo here...

    Let me know how it goes, and what you guys think!

    RJP1
     

    Attached Files:

    RJP1, Jul 2, 2007 IP
  2. RJP1

    RJP1 Active Member

    Messages:
    345
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #2
    Please post your working examples below or questions regarding the usage!
    RJP1
     
    RJP1, Jul 2, 2007 IP
  3. RJP1

    RJP1 Active Member

    Messages:
    345
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    I'll be doing some more tutorials very soon, I hope they'll help out you guys!

    RJP1
     
    RJP1, Jul 7, 2007 IP
  4. ziffgone

    ziffgone Peon

    Messages:
    63
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi RJP1,

    Can that effect be applied to other thing than images as well? Such as Text in a DIV?

    Regards...
     
    ziffgone, Jul 7, 2007 IP
  5. RJP1

    RJP1 Active Member

    Messages:
    345
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    Hi ziffgone,

    Good question, although I've never tried, I doubt that will work... The script acts on images. I guess there's no harm in trying though, try adding class="reflect" to the DIV in question.

    Let me know if you get it to work!

    RJP1
     
    RJP1, Jul 8, 2007 IP