Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.03.2018, 13:46
Новичок на форуме
Отправить личное сообщение для Miracle5 Посмотреть профиль Найти все сообщения от Miracle5
 
Регистрация: 20.02.2018
Сообщений: 9

Поворот тени элемента в сторону курсора на javascript
В общем пытаюсь сделать что-то вроде библиотеки shine.js (пример: http://bigspaceship.github.io/shine.js/) но без его использования. Нужна помощь, как это реализовать правильно? (без jquery)
Ответить с цитированием
  #2 (permalink)  
Старый 20.03.2018, 14:37
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Набросок
<style>
div {
    position:absolute;
    left:100px;
    top:40px; }

.shadowtext {
    text-shadow: 8px 8px 16px black; /* Параметры тени */
    color: lightblue; /*  цвет текста */
    font-size: 80px; /* Размер надписи */
   }
</style>
<div>
<span class="shadowtext">T</span>
<span class="shadowtext">e</span> 
<span class="shadowtext">s</span> 
<span class="shadowtext">t</span> 
<span class="shadowtext">&nbsp;</span> 
<span class="shadowtext">s</span> 
<span class="shadowtext">h</span> 
<span class="shadowtext">a</span> 
<span class="shadowtext">d</span> 
<span class="shadowtext">o</span> 
<span class="shadowtext">w</span>
</div>  
<script>
var text = document.querySelectorAll(".shadowtext");
window.onmousemove = function(e) {
     for(var i = 0; i < text.length; i++) {
        var box = text[i].getBoundingClientRect();
        var x = box.left + (box.right - box.left) / 2 - e.clientX, 
              y = box.top + (box.bottom - box.top) / 2 - e.clientY;
        text[i].style.textShadow = x/10 + "px " + y/10 + "px " + (5 + (Math.abs(x) + Math.abs(y))/40) + "px black";
     }
}
</script>

Последний раз редактировалось Dilettante_Pro, 20.03.2018 в 16:08.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отслеживание появление элемента на чистом JavaScript bortmehannik Javascript под браузер 1 07.09.2017 19:12
Соединить прямой линией два элемента на javascript или Jquery shureg Общие вопросы Javascript 16 02.02.2016 07:29
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
Javascript добавление div элемента 203 Элементы интерфейса 1 21.04.2013 16:04
Как то можно узнать ID HTML элемента вызвавшего JavaScript функцию? Opusel Events/DOM/Window 1 18.12.2011 18:36