├── .gitignore ├── white_brick_wall.png ├── example.css ├── main.css ├── license.txt ├── realshadow-min.js ├── example.html ├── index.html ├── README.md └── realshadow.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /white_brick_wall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrshll/real-shadow/master/white_brick_wall.png -------------------------------------------------------------------------------- /example.css: -------------------------------------------------------------------------------- 1 | .top {text-align: center} 2 | 3 | .container { 4 | border-radius:30px; 5 | width:500px; 6 | margin: 0 auto; 7 | padding: 20px; 8 | text-align: left 9 | } 10 | 11 | .menu {margin-left:-20px} 12 | .menu li {display: inline;} 13 | .menu button { 14 | display: inline-block; 15 | width:50px; 16 | line-height:40px; 17 | margin:0 20px; 18 | background:transparent; 19 | border:none 20 | } 21 | 22 | .text { 23 | padding: 20px; 24 | margin:30px 0 0 0; 25 | } 26 | 27 | .menu button, .text {border-radius:10px} -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #fff url(white_brick_wall.png); 3 | font: 15px "Helvetica Neue",Calibri,Helvetica,Arial,sans-serif; 4 | color: #666; 5 | padding: 0; margin: 0; 6 | } 7 | 8 | h1 { 9 | margin-bottom: 0; 10 | color: #999; 11 | } 12 | 13 | a { 14 | color: #66f; 15 | text-decoration: none 16 | } 17 | 18 | .container { 19 | text-align: center; 20 | padding: 10px 0; 21 | } 22 | /*.wrapper {margin:0 300px}*/ 23 | 24 | .block { 25 | margin: 20px 30px; 26 | display:inline-block; 27 | width:50px; 28 | height:50px; 29 | } 30 | 31 | .big { 32 | width: 380px; 33 | height: 100px; 34 | line-height: 100px; 35 | margin-bottom: 200px; 36 | border-radius: 10px; 37 | } 38 | 39 | .c {background:rgba(193,193,193,.5)} 40 | .cr {background:rgba(255,0,0,.5)} 41 | .cg {background:rgba(0,200,0,.5)} 42 | .cb {background:rgba(0,0,255,.5)} 43 | .crg{background:rgba(255,255,0,.5)} 44 | .cgb{background:rgba(0,200,255,.5)} 45 | .cbr{background:rgba(255,0,255,.5)} 46 | .crgb{background:rgba(255,255,255,.5)} 47 | 48 | .round {border-radius:10px} 49 | .circle {border-radius:30px} 50 | .ur {border-radius:5px 50px 5px 5px} 51 | .ll {border-radius:5px 5px 5px 50px} -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright 2012 Ivan Indamix, https://github.com/Indamix 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /realshadow-min.js: -------------------------------------------------------------------------------- 1 | /*! Real Shadow v1.1.2 https://github.com/Indamix/real-shadow | https://raw.github.com/Indamix/real-shadow/master/license.txt */ 2 | (function(b,r,m){function s(u,e){var a=b(e),c=a.offset(),f=a.attr("rel"),a={dom:e,x:c.left+(a.outerWidth()>>1),y:c.top+(a.outerHeight()>>1)};f?a.c={r:-1!==f.indexOf("r"),g:-1!==f.indexOf("g"),b:-1!==f.indexOf("b")}:d.c&&(a.c=d.c);a.inset=d.inset?"inset":"";g.push(a)}function p(){for(var d=g.length,e,a,c;d--;)a=g[d],c=b(a.dom),e=c.offset(),a.x=e.left+(c.outerWidth()>>1),a.y=e.top+(c.outerHeight()>>1);i()}function i(b){b===m&&(b={pageX:d.pageX!==m?d.pageX:q.width()>>1,pageY:d.pageY!==m?d.pageY:0}); 3 | for(var e=g.length,a;e--;){a=g[e];var c=b.pageX-g[e].x,f=b.pageY-g[e].y,j=Math.pow(c*c+f*f,h.pow),j=j/h.div+1;j>h.nMax&&(j=h.nMax);for(var k=Math.atan2(c,f)-t,c=d.length,f=[],i=Math.cos(k),k=Math.sin(k),n=void 0,l=1;l>0)+"px "+(n*i>>0)+"px "+(Math.pow(l,1.7)>>0)+"px rgba("+(a.c?(a.c.r?100:0)+","+(a.c.g?100:0)+","+(a.c.b?100:0)+",":"0,0,0,")+".05)"+a.inset);a.dom.style.boxShadow=f.join(",")}}var d={followMouse:!0,length:7},q=b(r),t=Math.PI,g=[];b.fn.realshadow=function(h){b.extend(d, 4 | h);!g.length&&d.followMouse&&b(document.body).mousemove(i);q.resize(p);b.each(this,s);i();return this};b.fn.realshadow.update=p;var h={nMax:2.3,pow:0.8,div:1500}})(jQuery,this); -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Real Shadow Example 4 | 5 | 6 | 7 | 8 |
9 |

Real Shadows

10 | by Indamix 11 |

Move the mouse cursor across the page

12 |
13 | 14 |
15 | 22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 24 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 25 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 26 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 27 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 28 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

29 | 30 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 31 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 32 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 33 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 34 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 35 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

36 |
37 | 38 | 39 | 40 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Real Shadow: jQuery Plugin 9 | 10 | 11 | 12 | Fork Me on GitHub 13 | Tweet 14 | 15 | 16 |
17 |

Real Shadow

18 | by Indamix 19 |

Move the mouse cursor across the page

20 |
21 |
22 | 23 | 24 | 25 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Real Shadow](http://indamix.github.com/real-shadow/) - jQuery Plugin that casts photorealistic shadows 2 | Perfect for eye-catching demos and landing pages. 3 | 4 | Works in any browser supporting CSS box-shadow property. 5 | 6 | ## What's new 7 | + possibility to update shadows during/after jQuery animations 8 | + possibility to set custom shadow length 9 | + inset shadows 10 | + optimizations 11 | + corrected shadow positions 12 | + chaining support 13 | 14 | ## Basic Usage 15 | 16 | ```javascript 17 | $(selector).realshadow(); // options are optional 18 | 19 | $(selector).realshadow({ 20 | 21 | followMouse: false, // true by default 22 | 23 | pageX: x, // x coordinate of the light source 24 | pageY: y // y coordinate of the light source 25 | 26 | c: { // shadow color 27 | r: 1, // red channel for shadow 28 | g: 1, // green channel for shadow 29 | b: 1, // blue channel for shadow 30 | } 31 | 32 | }); 33 | ``` 34 | 35 | To specify different colors for each element, you can use "rel" attribute: 36 | 37 | ```html 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | ``` 46 | 47 | ```javascript 48 | $('span').realshadow(); 49 | ``` 50 | 51 | ## Inset Shadows 52 | 53 | ```javascript 54 | $(selector).realshadow({ 55 | inset: true 56 | }); 57 | ``` 58 | 59 | ### Update shadows during/after jQuery animations 60 | ```javascript 61 | // before: apply Real Shadow to elements: 62 | $(selector).realshadow(/* options, if needed */); 63 | 64 | // update shadows during jQuery animation, i.e. each animation step: 65 | $(selector).animate(/* animated properties */, {step: $.fn.realshadow.update}); 66 | 67 | // update shadows after jQuery animation is over: 68 | $(selector).animate(/* animated properties */, $.fn.realshadow.update); 69 | ``` 70 | If you update shadows during jQuery animation, you don't need to update shadows after jQuery animation is over. 71 | 72 | ### Custom shadows length 73 | ```javascript 74 | $(selector).realshadow({ 75 | length: 5 // default is 7 76 | }); 77 | ``` 78 | 79 | 80 | If you suppose that the usage of Real Shadow is unclear, feel free to contact me. -------------------------------------------------------------------------------- /realshadow.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Real Shadow v1.1.2 3 | * https://github.com/Indamix/real-shadow 4 | * 5 | * Copyright 2012, Ivan Indamix 6 | * Licensed under the MIT license 7 | * https://raw.github.com/Indamix/real-shadow/master/license.txt 8 | */ 9 | (function($, window, undefined){ 10 | 11 | // TODO add fn(height) to pass shape form 12 | var settings = { 13 | followMouse: true, 14 | length: 7 15 | }, 16 | $window = $(window), 17 | pi = Math.PI, 18 | els = []; 19 | 20 | $.fn.realshadow = function(options){ 21 | $.extend(settings, options); 22 | if (!els.length && settings.followMouse) $(document.body).mousemove(frame); 23 | $window.resize(update); 24 | $.each(this, add); 25 | frame(); 26 | return this; 27 | }; 28 | 29 | $.fn.realshadow.update = update; 30 | 31 | function add(i, el){ 32 | var $el = $(el), 33 | offset = $el.offset(), 34 | c = $el.attr('rel'), 35 | p = { 36 | dom: el, 37 | x: offset.left + ($el.outerWidth () >> 1), 38 | y: offset.top + ($el.outerHeight() >> 1) 39 | }; 40 | 41 | if (c) 42 | p.c = { 43 | r: c.indexOf('r') !== -1, 44 | g: c.indexOf('g') !== -1, 45 | b: c.indexOf('b') !== -1 46 | } 47 | else 48 | if (settings.c) p.c = settings.c; 49 | 50 | p.inset = settings.inset ? 'inset' : ''; 51 | 52 | els.push(p); 53 | } 54 | 55 | function update(){ 56 | var i = els.length, 57 | offset, el, $el; 58 | 59 | while (i--) { 60 | el = els[i]; 61 | $el = $(el.dom); 62 | offset = $el.offset(); 63 | el.x = offset.left + ($el.outerWidth () >> 1); 64 | el.y = offset.top + ($el.outerHeight() >> 1); 65 | } 66 | 67 | frame(); 68 | } 69 | 70 | function castShadows(el, angle, n, length){ 71 | var shadows = [], 72 | cos = Math.cos(angle), 73 | sin = Math.sin(angle), 74 | r; 75 | for (var i = 1; i < length; ++i) { 76 | r = Math.pow(i, n); 77 | // TODO add ---^ + shadow distance 78 | shadows.push( 79 | ( r * sin >> 0 ) + 'px ' + 80 | ( r * cos >> 0 ) + 'px ' + 81 | ( Math.pow(i, 1.7) >> 0 ) + 82 | 'px rgba(' + 83 | (el.c ? 84 | (el.c.r ? 100 : 0) + ',' + 85 | (el.c.g ? 100 : 0) + ',' + 86 | (el.c.b ? 100 : 0) + ',' 87 | : 88 | '0,0,0,' 89 | ) + 90 | '.05)' + el.inset 91 | ); 92 | } 93 | 94 | el.dom.style.boxShadow = shadows.join(','); 95 | } 96 | 97 | var params = { 98 | nMax: 2.3, 99 | pow: .8, 100 | div: 1500 101 | }; 102 | 103 | function frame(e){ 104 | if (e === undefined) e = { 105 | pageX: settings.pageX !== undefined ? settings.pageX : $window.width() >> 1, 106 | pageY: settings.pageY !== undefined ? settings.pageY : 0 107 | }; 108 | 109 | var i = els.length, 110 | el; 111 | 112 | while (i--) { 113 | el = els[i]; 114 | 115 | var x = e.pageX - els[i].x, 116 | y = e.pageY - els[i].y, 117 | n = Math.pow(x * x + y * y, params.pow) 118 | n = n / params.div + 1; // TODO n = f(obj.size, distance) 119 | 120 | if (n > params.nMax) n = params.nMax; 121 | 122 | castShadows( 123 | el, 124 | Math.atan2(x, y) - pi, 125 | n, 126 | settings.length 127 | ); 128 | } 129 | } 130 | 131 | })(jQuery, this); --------------------------------------------------------------------------------