/ Published in: JavaScript
                    
                                        
<p>How to use: HTML: 
<img id="image" src="image.png" alt=""/></p>
<p>JavaScript:
add_reflection (document.getElementById ( 'image'), 1, 1, 0.1, 0); </p>
<p>As a result, the script wrap image in the div, ask him to the desired height and width and put reflection of image</p>
<p>PS Sorry for my english</p>
                <img id="image" src="image.png" alt=""/></p>
<p>JavaScript:
add_reflection (document.getElementById ( 'image'), 1, 1, 0.1, 0); </p>
<p>As a result, the script wrap image in the div, ask him to the desired height and width and put reflection of image</p>
<p>PS Sorry for my english</p>
                            
                                Expand |
                                Embed | Plain Text
                            
                        
                        Copy this code and paste it in your HTML
/**
* @param image document.getElementById('image')
* @param h_coef Stretcher reflection coefficient
* @param opacity_start The initial value of opacity
* @param opacity_end The ultimate value of the opacity
* @param mode 0 = vertical reflection, 1 = horizontal
*/
function add_reflection(image, h_coef, opacity_start, opacity_end, mode)
{
var container = document.createElement('div');
var ref_height, ref_width, div_height, div_width;
if (0 == mode) {
ref_height = Math.floor(image.height * h_coef);
ref_width = image.width;
div_height = Math.floor(image.height * (1 + h_coef));
div_width = ref_width;
}
else {
ref_width = Math.floor(image.width * h_coef);
ref_height = image.height;
div_height = ref_height
div_width = Math.floor(image.width * (1 + h_coef));
}
var reflection;
if (!window.opera && document.all) {
reflection = document.createElement('img');
reflection.src = image.src;
reflection.style.width = image.width + 'px';
if (0 == mode) {
reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(opacity_start*100)+', style=1, finishOpacity='+(opacity_end*100)+', startx=0, starty=0, finishx=0, finishy='+(h_coef*100)+')';
}
else {
reflection.style.filter = 'fliph progid:DXImageTransform.Microsoft.Alpha(opacity='+(opacity_start*100)+', style=1, finishOpacity='+(opacity_end*100)+', startx=0, starty=0, finishx='+(h_coef*100)+', finishy=0)';
}
container.style.width = div_width + 'px';
container.style.height = div_height + 'px';
image.parentNode.replaceChild(container, image);
container.appendChild(image);
container.appendChild(reflection);
}
else {
reflection = document.createElement('canvas');
var context = reflection.getContext('2d');
reflection.style.height = ref_height + 'px';
reflection.style.width = ref_width + 'px';
reflection.height = ref_height;
reflection.width = ref_width;
container.style.width = div_width + 'px';
container.style.height = div_height + 'px';
image.parentNode.replaceChild(container, image);
container.appendChild(image);
container.appendChild(reflection);
context.save();
var gradient;
if (0 == mode) {
context.translate(0, image.height);
context.scale(1, -1);
gradient = context.createLinearGradient(0, 0, 0, ref_height);
}
else {
context.translate(image.width, 0);
context.scale(-1, 1);
gradient = context.createLinearGradient(0, 0, ref_width, 0);
}
context.drawImage(image, 0, 0, image.width, image.height);
context.restore();
context.globalCompositeOperation = "destination-out";
gradient.addColorStop(1, "rgba(255, 255, 255, " + (1 - opacity_end) + ")");
gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity_start) + ")");
context.fillStyle = gradient;
if (-1 != navigator.appVersion.indexOf('WebKit')) {
context.fill();
}
else {
context.fillRect(0, 0, image.width, 2*ref_height);
}
}
}
URL: http://blog.sjinks.org.ua/javascript/356-image-reflection-with-javascript/
Comments
 Subscribe to comments
                    Subscribe to comments
                
                