Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   плагин для создания эффекта затемнения всей страницы кроме выбранного элемента DOM (https://javascript.ru/forum/project/52722-plagin-dlya-sozdaniya-ehffekta-zatemneniya-vsejj-stranicy-krome-vybrannogo-ehlementa-dom.html)

ruslan_mart 04.01.2015 08:58

Прикольно, но лучше на чистом JS + CSS3 сделать. :)

рони 04.01.2015 10:06

Ruslan_xDD,
по CSS3 не уточнишь какие части сделать и чтобы ты применил.

bes 04.01.2015 10:09

Цитата:

Сообщение от Ruslan_xDD
Прикольно, но лучше на чистом JS + CSS3 сделать.

jquery обречена :D

Deff 04.01.2015 13:13

Интересно потестить длинное перемещение по ширине экрана.
Т.е переход от мелкого объекта слево, к мелкому объекту справо на экране в 1400 - 1900 пиксел шириной

рони 04.01.2015 14:18

Deff,
:-? http://learn.javascript.ru/play/vmjRfb

Deff 04.01.2015 14:35

рони,
Боковых отслоений на большой скорости нет.

<pre>Ксать если сейчас обрамление такого вида,
 <img src=http://sf.uploads.ru/0RBab.png>
и  боковых отслоений на большой скорости -нет,

то возможно переход к такому обрамлению
 <img src=http://sf.uploads.ru/fDvuy.png>
возможно решит вопрос об отслоении на высоких скоростях снизу

Или к такому:
 <img src=http://sf.uploads.ru/vJnVG.png>
</pre>

рони 04.01.2015 15:00

Deff,
:thanks: :write:
непомогло ... дефект сверху перешёл вправо
http://learn.javascript.ru/play/GIIoF

Deff 04.01.2015 15:01

рони,
Тест на клик<br><br><br><br><br>
<a href="#" style="position:relative;z-index:20;margin-left:70px;" onclick=alert('a')>asdasda</a><br>
<span style="position:relative;z-index:20;margin-left:70px;"onclick=alert('span')>Тест2</span>

<div class="wrap" style="position:fixed;z-index:10;top:0;left:0;width:100%;height:100%;overflow:hidden;">
<div style="border:solid 1200px rgba(0,0,0,0.7);/*Смещаем на border*/margin-top:-1200px;margin-left:-1200px;position:absolute; width:150px;height:60px;/*Устанавливаем позицию окна*/top:90px;left:30px;"></div>
</div>

Deff 04.01.2015 15:40

Цитата:

Сообщение от Ruslan_xDD
Прикольно, но лучше на чистом JS + CSS3 сделать.

В принципе идея интересная, тут даже наверно css с параметрами анимации мон сделать чисто статическим, а вторым cоздаваемым и закидываемым на body элементом <style> лишь давать новые координаты обрамления. После отключения затемнения, последний <style> изымаем. Есть нюансы в задании анимации, чтобы элементы передвигались состыкованно.
И да, тогда реализация пофег на чём(js/jQ), ибо скорость и вариация анимации задаётся css
Думаю анимация через вектор, пример transform: translate(400px,-200px) ; http://habrahabr.ru/post/135816/

devote 04.01.2015 16:27

а чем CSS3 анимация не канает? http://learn.javascript.ru/play/4Ydgx


Часовой пояс GMT +3, время: 18:35.