Selain menggunakan Photoshop, anda guna bleh menggunakan Javascript untuk membuat efek 'Reflect' atau Pantulan pada gambar anda. Contohnya seperti berikut:

[img_assist|nid=1233|title=|desc=|link=none|align=none|width=500|height=342]

Caranya:

Salin dan letakan koding dibawah ini kedalam laman web anda diantara tag <head> dan </head>

<style type="text/javascript">
/**
 * reflection.js v2.0
 * http://cow.neondragon.net/stuff/reflection/
 * Freely distributable under MIT-style license.
 */
 
/* From prototype.js */
if (!document.myGetElementsByClassName) {
    document.myGetElementsByClassName = function(className) {
        var children = document.getElementsByTagName('*') || document.all;
        var elements = new Array();
     
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            var classNames = child.className.split(' ');
            for (var j = 0; j < classNames.length; j++) {
                if (classNames[j] == className) {
                    elements.push(child);
                    break;
                }
            }
        }
        return elements;
    }
}

var Reflection = {
    defaultHeight : 0.3,
    defaultOpacity: 0.5,
   
    add: function(image, options) {
        Reflection.remove(image);
       
        doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
        if (options) {
            for (var i in doptions) {
                if (!options[i]) {
                    options[i] = doptions[i];
                }
            }
        } else {
            options = doptions;
        }
   
        try {
            var d = document.createElement('div');
            var p = image;
           
            var classes = p.className.split(' ');
            var newClasses = '';
            for (j=0;j<classes.length;j++) {
                if (classes[j] != "reflect") {
                    if (newClasses) {
                        newClasses += ' '
                    }
                   
                    newClasses += classes[j];
                }
            }

            var reflectionHeight = Math.floor(p.height*options['height']);
            var divHeight = Math.floor(p.height*(1+options['height']));
           
            var reflectionWidth = p.width;
           
            if (document.all && !window.opera) {
                /* Fix hyperlinks */
                if(p.parentElement.tagName == 'A') {
                    var d = document.createElement('a');
                    d.href = p.parentElement.href;
                } 
                   
                /* Copy original image's classes & styles to div */
                d.className = newClasses;
                p.className = 'reflected';
               
                d.style.cssText = p.style.cssText;
                p.style.cssText = 'vertical-align: bottom';
           
                var reflection = document.createElement('img');
                reflection.src = p.src;
                reflection.style.width = reflectionWidth+'px';
                reflection.style.display = 'block';
                reflection.style.height = p.height+"px";
               
                reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
                reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';
               
                d.style.width = reflectionWidth+'px';
                d.style.height = divHeight+'px';
                p.parentNode.replaceChild(d, p);
               
                d.appendChild(p);
                d.appendChild(reflection);
            } else {
                var canvas = document.createElement('canvas');
                if (canvas.getContext) {
                    /* Copy original image's classes & styles to div */
                    d.className = newClasses;
                    p.className = 'reflected';
                   
                    d.style.cssText = p.style.cssText;
                    p.style.cssText = 'vertical-align: bottom';
           
                    var context = canvas.getContext("2d");
               
                    canvas.style.height = reflectionHeight+'px';
                    canvas.style.width = reflectionWidth+'px';
                    canvas.height = reflectionHeight;
                    canvas.width = reflectionWidth;
                   
                    d.style.width = reflectionWidth+'px';
                    d.style.height = divHeight+'px';
                    p.parentNode.replaceChild(d, p);
                   
                    d.appendChild(p);
                    d.appendChild(canvas);
                   
                    context.save();
                   
                    context.translate(0,image.height-1);
                    context.scale(1,-1);
                   
                    context.drawImage(image, 0, 0, reflectionWidth, image.height);
   
                    context.restore();
                   
                    context.globalCompositeOperation = "destination-out";
                    var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
                   
                    gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
                    gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
       
                    context.fillStyle = gradient;
                    context.rect(0, 0, reflectionWidth, reflectionHeight*2);
                    context.fill();
                }
            }
        } catch (e) {
        }
    },
   
    remove : function(image) {
        if (image.className == "reflected") {
            image.className = image.parentNode.className;
            image.parentNode.parentNode.replaceChild(image, image.parentNode);
        }
    }
}

function addReflections() {
    var rimages = document.myGetElementsByClassName('reflect');
    for (i=0;i<rimages.length;i++) {
        var rheight = null;
        var ropacity = null;
       
        var classes = rimages[i].className.split(' ');
        for (j=0;j<classes.length;j++) {
            if (classes[j].indexOf("rheight") == 0) {
                var rheight = classes[j].substring(7)/100;
            } else if (classes[j].indexOf("ropacity") == 0) {
                var ropacity = classes[j].substring(8)/100;
            }
        }
       
        Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
    }
}

var previousOnload = window.onload;
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }
</style>

 

Kemudian untuk setiap gambar yang ingin menggunakan efek ini, tambahkan class="reflect" pada koding gambar tersebut. Contohnya.

<img src="https://www.drupalnote.my/logo.png" class="reflect" alt="logo"/>

 

Anda juga boleh memuat turun fail yang dikepilkan bersama dengan artikel ini untuk memudahkan anda. Jika anda menggunakan fail ini, anda perlu menambah kod luaran untuk memanggil fail javascript tersebut iaitu:

<script type="text/javascript" src="https://www.drupalnote.my/reflection.js"></script>

Teknik ini akan memudahkan anda menggunakan teknik reflect atau pantulan untuk semua page tanpa perlu menyalin koding yang panjang untuk setiap laman.

Artikel: 
Penilaian: 
No votes yet