Итак, сегодня мы посмотрим как сделать красивый эффект отражения с помощью 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 это процент полупрозрачности.
Вот так просто создавать эффект отражения
Эффект отражения. JavaScript