Красивые эффекты для фото: луч света и отражение

ГлавнаяJava скрипты → Эффекты для фото

Уважаемые коллеги, в этой статье хочу поделиться с вами со скриптом - красивые эффекты для фото: луч света, который придаст вашей картинке или фотографии на сайте более изящный и выразительный вид. Ява скрипт совсем не сложный в установке и редактирование, где вы можете на свой вкус изменить толщину луча, цвет, скорость и угол направленности.

  |  прихожая италия классика www.myarredo.ru  |  
Пожалуйста

Как вы успели заметить, скрипт можно поставить не только на картинку, заголовок, но и на любой блок вашего сайта, и даже на определённый параграф смотрите ниже).

А теперь разберём подробно, как сделать такие красивые эффекты для фото и других значимых для вас фрагментов на вашем сайте.

Код для html:


    Код перед </head>
<script type="text/javascript" src="glint.packed.js" ></script>
<script type="text/javascript">
var g1 = new glint("heading",{onerror: function(){alert("Ваш браузер не поддерживает Ява скрипт");}});
var g2 = new glint("image",{onerror: function(){alert("Ваш браузер не поддерживает Ява скрипт");}});
var g3 = new glint("text",{onerror: function(){alert("Ваш браузер не поддерживает Ява скрипт");}});
</script>

    Код для загаловков H1-H6
<h1 id="heading">Ваш заголовок</h1>

    Код для картинок
<div id="image" style="width:200px;height:120px;">
<img src="foto.jpg" border="0" alt="" /></div>

    Код для параграфов
<div id="text" style="width:800px;">
<p>Ваш текст в параграфе</p></div>

Создаёте пустой файл glint.packed.js, и скопировав нижеуказанный код, вставляете в него и сохраняете в кодировке UTF-8

Код для glint.packed.js:


eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('7 1i=N(h,k){6.8=P.1o(h);7 l=P.19("1c");7 m;7 n=P.19("1c");7 o;7 p;7 q=1l 1s();q.x=0;q.y=0;6.5={W:3,Y:10,11:1u,E:1w,r:G,g:G,b:G,A:1q,C:G,J:15,1b:15,Z:1e};6.9={};7 r=6;6.18=N(){v(k){12(7 a 1n k){6.5[a]=k[a]}}v(l.13){m=l.13("14");o=n.13("14");6.5.E=u(6.5.E);6.5.A=u(6.5.A);v(!6.5.J){6.9={O:"F",D:"K",B:"y",1a:"x"}}w{6.9={O:"K",D:"F",B:"x",1a:"y"}}v(6.8.1g){7 b=6.8.1g["T"]}w v(1j.17){7 b=P.1m.17(6.8,1e).1z("T")}v(b.1t()=="1A"){6.8.R.T="1p"}6.5.A=(6.5.A>0&&6.5.A<1d)?6.5.A:X;6.5.C=(6.5.C>0&&6.5.C<G)?6.5.C:G;p=z.I(6.5.E+z.V(u(6.8[6.9.D])/z.1x((6.5.A/1d)*z.1k)));l.H("M",u(6.8.K)+"L");l.H("Q",u(6.8.F)+"L");6.8.1y(l);l.R.T="1r";l.R.16=0;l.R.1B=0;v(6.5.J){n.H("M",u(p)+"L");n.H("Q",u(6.8.F)+"L")}w{n.H("M",u(6.8.K)+"L");n.H("Q",u(p)+"L")}q[6.9.B]=-p;q[6.9.16]=0;s();t()}w v(6.5.Z){6.5.Z()}};7 s=N(){7 a=p-r.5.E;v(r.5.J){7 b=o.1h(p,u(r.8.F))}w{7 b=o.1h(u(r.8.K),p)}7 c=z.I(r.5.E/2);7 d=r.5.C/c;12(7 i=0;i<b.M;i++){12(7 j=0;j<b.Q;j++){v(r.5.J){v(r.5.A>X){7 f=z.I(j*(a/r.8[r.9.D]))}w{7 f=a-z.I(j*(a/r.8[r.9.D]))}7 e=i-f}w{v(r.5.A>X){7 f=z.I(i*(a/r.8[r.9.D]))}w{7 f=a-z.I(i*(a/r.8[r.9.D]))}7 e=j-f}v(e>=0&&e<=r.5.E){7 g=(i+j*b.M)*4;b.S[g+0]=r.5.r;b.S[g+1]=r.5.g;b.S[g+2]=r.5.b;b.S[g+3]=(e<=c)?u(d*e):z.V(r.5.C-(u(d*e)-r.5.C))}}}o.1v(b,0,0)};7 t=N(){v(r.5.J){m.1f(q.x,q.y,z.V(p),u(r.8.F))}w{m.1f(q.x,q.y,u(r.8.K),z.V(p))}m.1C(n,q.x,q.y);v(r.5.1b){q[r.9.B]+=u(r.5.W);v(r.8[r.9.O]<q[r.9.B]){q[r.9.B]=-p;U(t,r.5.11)}w{U(t,r.5.Y)}}w{q[r.9.B]-=u(r.5.W);v(-p>q[r.9.B]){q[r.9.B]=r.8[r.9.O]+p;U(t,r.5.11)}w{U(t,r.5.Y)}}};6.18()}',62,101,'|||||conf|this|var|elem|orient|||||||||||||||||||||parseInt|if|else|||Math|angle|move|density|offspace|size|offsetHeight|255|setAttribute|round|horizontal|offsetWidth|px|width|function|offsize|document|height|style|data|position|setTimeout|abs|speed|90|interval|onerror||pause|for|getContext|2d|true|top|getComputedStyle|construct|createElement|pos|forward|canvas|180|null|clearRect|currentStyle|createImageData|glint|window|PI|new|defaultView|in|getElementById|relative|45|absolute|Object|toLowerCase|1000|putImageData|100|tan|appendChild|getPropertyValue|static|left|drawImage'.split('|'),0,{}))

В этом коде скрипта в последних строчках вы и делаете необходимые изменения по толщине луча, цвету, скорости, углу и т.д.

На одной странице, как сами видите, может работать неограниченное количество объектов под одним и тем же скриптом. А так же, кто не много разбирается в ЯВА скриптах, может задействовать этот скрипт под разными именами, внеся небольшие изменения, чтобы эффекты разных объектов различались друг от друга и по углу направленности, и по ширине и по скорости.

Поделись ссылкой с друзьями:

Комментарии к статье