Главная » Javascript » Эффект отражения. JavaScript

Эффект отражения. JavaScript

Итак, сегодня мы посмотрим как сделать красивый эффект отражения с помощью javascript. Что нам для этого понадобится? Для этого нам понадобится немного свободного времен и любая картинка для тестов. Для создания такого эффекта, как вы видите слева на картинке нам понадобится написать небольшой скриптик, который будет на базе существующей картинки создавать область canvas и применять к ней эффект оптикания


Вот собственно сам скрипт:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
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.5,
    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) {
                if(p.parentElement.tagName == 'A') {
                    var d = document.createElement('a');
                    d.href = p.parentElement.href;
                }  
                   
                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) {
                    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(); }

Как им пользоваться? Для того, чтоб использовать данный скрипт вам необходимо просто к вставляемой картинке добавить класс reflect

1
<img src="" class="reflect"/>

и подключить сам скрипт в код странички, в хэдэр.

1
<script type="text/javascript" src="/download/reflection.js"></script>

Если вы хотите настроить размеры отображаемой области просто поправте строки

1
2
    defaultHeight : 0.5,
    defaultOpacity: 0.5,

здесь defaultHeight это высота в отношении 1 = 100% и соответственно 0,5 это 50% от размера картинки, так же с defaultOpacity это процент полупрозрачности.
Вот так просто создавать эффект отражения




Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка