Javascript.RU

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

Следование градиента за курсором. Анимация.
В js новичок, не бейте пожалуйста.

Я хочу стилизовать кнопку по типу кнопок в win7.
Суть в том, что подсветка следует за курсором.
Каким способом это реализовать лучше всего?

Пока нашёл вот это:
http://jsfiddle.net/maniator/Sf92n/2/
По этой штуке у меня несколько вопросов.

1. Как сделать плавное перемещение этого градиента?
Чтобы он немного запаздывал за курсором, а при убирании курсора не исчезал резко, а плавно затухал.
transition: background не работает

2. Это же можно переписать без жквери?
$('div') вот например это сейчас же можно получить с помощью getElementsByTagName
Т.е. здесь жквери не нужен, его использовали, чтобы проще код выглядел?
Изображения:
Тип файла: png 23.png (5.7 Кб, 2 просмотров)
Тип файла: png 124.png (6.2 Кб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 03.11.2016, 00:11
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,586

В данном случае менять не background целиком, а background-position.
Но вообще лучше использовать обычную png нужного вида.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2016, 14:06
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Сообщение от lin
Как сделать плавное перемещение этого градиента?
Чтобы он немного запаздывал за курсором
сделайте простейшую задержку обновления css
типа http://jsfiddle.net/Sf92n/173/
Ответить с цитированием
  #4 (permalink)  
Старый 11.11.2016, 13:13
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

Господа, а вы в курсе, что в Мозилле вся эта красотень не работает?
Ответить с цитированием
  #5 (permalink)  
Старый 11.11.2016, 13:36
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

да и ладно,
это не готовый продукт,
а тестовый пример

хотя у меня в FF 49.0.2 под windows
работает
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализована анимация на сайте популярной игры? whoIam Общие вопросы Javascript 6 19.09.2016 09:45
Как остановить следование за курсором raffx Events/DOM/Window 2 31.01.2016 00:58
Анимация после анимации Narahon Элементы интерфейса 12 02.04.2015 22:06
Полноэкранная анимация белого шума в браузере - какой подход производительнее? Stas404 Общие вопросы Javascript 3 28.12.2014 13:39
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50