Анимация тени, обьясните код - HTML, CSS - Ответ 6740055

@phpk · Регистрация: 15.05.2013

Author24 — интернет-сервис помощи студентам

Обьясните пожалуйста алгоритм создания этой прекрасной анимации.
Тут основной алгоритм реализован скриптом Javascript.
Обьясните пожалуйста строки 91-100, мне надо не для задания, я просто хочу сам разобраться в алгоритме, и узнать, что там происходит!
Если можно на пальцах обьясните пожалуйста.
Код с картинкой shadow.zip

HTML5

<!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>

Вернуться к обсуждению:
Анимация тени, обьясните код HTML, CSS

Следующий ответ

Другие темы раздела
HTML, CSS Добавить рамку вокруг виджета карты Добрый день. Как добавить рамку вокруг виджета карты чтобы он не сливался с основной картой? http://selftrips.ru/2012/04/27/558 Спасибо https://www.cyberforum.ru/ html/ thread1279134.html	Смещение (сдвиг) сайта влево после добавления двух изображений по вертикали HTML, CSS Всем привет)! Буду благодарен, кто поможет помочь решить проблему: есть сайт с несколькими страницами написанная на css (через div'ы). Есть 3 страницы: 1. Добро пожаловать. 2. Фотографии 3. Контакты 1, и 3-ья отображаются нормально (ровно по центру), 2-ая тоже если на ней добавить 1 и более картинок (или вовсе не добавлять), НО ТОЛЬКО В РЯД, но как только добавляю картинку во второй ряд, то...
HTML, CSS Как управлять расположением блоков при адаптивной верстке ? Есть 3 блока, они все стоят в ряд. При ресайзе на определенное разрешение нужно взять центровой блок и поместить вперед, остальные два под него, вот таким образом (вложение). Возможно ли такое реализовать без flexbox? https://www.cyberforum.ru/ html/ thread1279046.html	HTML, CSS Картинка фоном большого размера https://www.cyberforum.ru/ html/ thread1278837.html Я начинающий верстальщик, прошу тапками не кидаться.) Есть картинка высокого разрешения и размер её соответственно порядка 5-6мб. Естественно когда мы переходим с главной например в контакты, картинка подгружается медленнее чем сам контент, что не есть хорошо. Есть способ это исправить не меняя размер картинки-фона? Скажем картинка остаётся уже загруженной, а переходы осуществляются внутри...
Колонки на html5 HTML, CSS Всем привет! Подскажите какой тег используется в html5 для отображения текста в колонках, когда текст сам перетекает из одной колонки в другую?	HTML, CSS Остается след блока при перемещении В общем раньше не встречался с такими проблемами. Да и не верстаю я уже ооочень долго но наконец-то мои навыки мне пригодились снова. Правда столько проблем, все забыл.. В общем проблема даже не уверен в чем. У меня есть код: <div class="content"> <div class="fixedmenu"> <ul> <li>1 punkt <li>2 punkt </ul> </div> <div class="mblock"> https://www.cyberforum.ru/ html/ thread1278748.html
HTML, CSS Блок с "треугольным бордером" https://www.cyberforum.ru/ html/ thread1278641.html Никак не могу сообразить как прописать в css данную форму. С заливкой понятно как это сделать, а вот просто с тонкими бордерами - нет. Может кто сталкивался с подобным. Спасибо заранее.	HTML, CSS Сделать инпуты активными Как можно с помощью 1 и 2 <input> включить неактивные 3 и 4 <input>? Пересмотрел много информации в инете, но так и не понял что использовать. <!DOCTYPE html> <html> <head> <meta charset="utf-8">
HTML, CSS Белое пространство справа от сайта при масштабировании https://www.cyberforum.ru/ html/ thread1278611.html Пытаюсь реализовывать что-то типа респонсивной верстки. Пока что весьма коряво да и косяк большой имеется, аименно: при масштабировании появляется белое пространство справа. Чем меньше окошко браузера, тем больше пространство справа. вот как выглядит часть сайта если не поворачивать вправо: нажимаю колесико мыши, перевожу экран вправо и... Не плохо было бы конечно код показать, но...	HTML, CSS Nth-child #content .wp-caption https://www.cyberforum.ru/ html/ thread1278567.html Добрый день В CSS имеется следующий код #content .wp-caption { margin-bottom: 20px; text-align: center; max-width:100%; position:relative; Я добавляю в него код width: 100%!important и получил нужный результат растяжение caption на всю ширину страницы.
Шаблон HTML, CSS Скажите как сделать чтобы к примеру если в контейнере текста не много шаблон был бы как в примере по высоте экрана?	HTML, CSS CSS абсолютные и относительные координаты блоков Когда задаешь STYLE="position:relative"; то каждый последующий STYLE="position:relative"; координаты отсчитывает от предыдущего блока? Т.е. он "умеет" как-бы через некий DOM анализатор находить "предшественника"? https://www.cyberforum.ru/ html/ thread1278488.html

	19.10.2014, 14:28