Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
1

Анимация тени, обьясните код

19.10.2014, 14:28. Показов 716. Ответов 6
Метки нет (Все метки)

Обьясните пожалуйста алгоритм создания этой прекрасной анимации.
Тут основной алгоритм реализован скриптом Javascript.
Обьясните пожалуйста строки 91-100, мне надо не для задания, я просто хочу сам разобраться в алгоритме, и узнать, что там происходит!
Если можно на пальцах обьясните пожалуйста.
Код с картинкой shadow.zip
HTML5
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
<title>text shadow bow</title> 
 
<style type="text/css" media="all"> 
body {
    background: black;
    color: #666;
    margin: 0;
    padding: 0;
}
 
a {
    color: #0f0;
}
 
a:hover {
    text-decoration: none;
}
 
#text-shadow-box {
    position: relative;
    width: 598px;
    height: 406px;
    background: #666;
    overflow: hidden;
    cursor: none;
    border: 1px solid #333;
}
 
#text-shadow-box div.wall {
    position: absolute;
    top: 175px;
    left: 0;
    width: 100%;
}
 
#tsb-text {
    margin: 0;
    color: #999;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 80px;
    line-height: 0.5em;
    height: 1px;
    font-weight: bold;
    text-align: center;
}
 
div.wall div {
    position: absolute;
    background: #999;
    top: 42px;
    left: 0;
    height: 300px;
    width: 100%;
}
 
#tsb-spot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(spotlight.png) top center;
}
</style> 
 
<script type="text/javascript" language="javascript" charset="utf-8"> 
/**
 * Zachary Johnson
 * June 2009
 * www.zachstronaut.com
 */
 
var text;
var spot;
 
window.onload = function () {
    document.getElementById('text-shadow-box').onmousemove = onMouseMove;
    text = document.getElementById('tsb-text');
    spot = document.getElementById('tsb-spot')
}
 
 
function onMouseMove(e) {
    var xm = e.clientX - 300;
    var ym = e.clientY - 175;
    var d = Math.sqrt(xm*xm + ym*ym);
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
    
    xm = e.clientX - 600;
    ym = e.clientY - 450;
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}
</script> 
 
</head> 
<body> 
 
<div id="text-shadow-box"> 
<div class="wall"> 
    <p id="tsb-text">Text Shadow</p> 
    <div></div> 
</div> 
<div id="tsb-spot"></div> 
</div> 
 
 
</body> 
</html>
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
1
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.10.2014, 14:28
Ответы с готовыми решениями:

Обьясните пжл этот код..
&lt;html&gt; &lt;head&gt; &lt;title&gt;index&lt;/title&gt; &lt;meta http-equiv=&quot;Content-Type&quot;...

Перезапечь тени через код (baked)
Добрый день, подскажите можно ли принудительно во время выполнения программы через код перезапечь...

Обьясните код
Ребят помогите с обьяснением этой проги !!! #include &lt;iostream&gt; #include &lt;conio.h&gt; #include...

обьясните код
#include &lt;stdio.h&gt; #include &lt;math.h&gt; #include &lt;conio.h&gt; #define n 10 void main() { char...

6
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
19.10.2014, 15:15 2
Скрипт интересный.

Строки 97-98:
берутся координаты мыши, от них вычитается половина ширины (600) и половина высоты (450) картинки - это чтобы картинку двигать за середину, а не за край. Т.е., если мышь в левом верхнем углу (координаты 0 0), там должна находиться середина изображения, а не его левый верхний угол.
Строка 99:
Фон блока <div id="tsb-spot"></div> двигается на соответствующие величины. В итоге получается так, как будто двигается освещенный круг.

Строки 92-95
- то же самое, но с тенью.
От координат мыши вычитается половина ширины текста и ... не скажу, что половина высоты - но так или иначе эти константы задают положение тени относительно курсора мыши.
И потом тексту задается css свойство text-shadow - координаты тени и ее размытие, а также цвет (black).

Не знаю, насколько понятно объяснила. Спрашивайте, если что не ясно.
1
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
19.10.2014, 15:25  [ТС] 3
Цитата Сообщение от ludmila-sv Посмотреть сообщение
Спрашивайте, если что не ясно.
с переменными xm, ym теперь понятно.
А как на счёт строк 94-95? Именно в них у меня основное недопонимание алгоритма
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
19.10.2014, 16:41 4
Про text-shadow можно почитать тут http://htmlbook.ru/css/text-shadow
В скрипте идея такая: чем дальше курсор (и, соответственно круг света) от текста, тем более размытой становится тень. Соответственно, d = Math.sqrt(xm*xm + ym*ym); - это расстояние до текста. Радиус размытия тени задается на глазок (d / 5 + 10) - понятно, что он должен быть меньше d. Ну и при d=0 он должен быть не нулевым. Можете делить не на 5 и прибавлять не 10 - попробуйте подставить другие значения.
1
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
19.10.2014, 17:28  [ТС] 5
Меня интересует, как определили что надо вставить именно функцию Math.sqrt ? Почему не Math.cos или Math.sin ?
И для чего умножать xm*xm и ym*ym ?
Для меня это выглядит как инопланетный разум. Подробнее можно?
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
19.10.2014, 17:46 6
xm и ym - катеты, d - гипотенуза. Ее длинна считается по теореме Пифагора.
Положим, у Вас одна точка в начале координат А(0,0), другая имеет координаты В(x, y). Длинна отрезка АВ будет
https://www.cyberforum.ru/cgi-bin/latex.cgi?\sqrt{{x}^{2}+{y}^{2}}
1
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
19.10.2014, 17:51  [ТС] 7
Благодарю, буду вникать
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.10.2014, 17:51

Обьясните код...
Что такое &quot;pred&quot; в этом коде? (defun partition (pred list) (list (remove-if-not pred list) ...

Обьясните код
Всем здравствуйте. Смотрел видео урок по php не могу понять структуру вот такого кода: &lt;a...

..обьясните ..код
#include &lt;conio.h&gt; #include &lt;math.h&gt; #include &lt;stdio.h&gt; void main() { int m,n,k; int...

обьясните код
public class Organiz { public long Id { get; set; } public string Gorod { get; set;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.