Javascript.RU

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

Эффекты я "якорями"
Добрый день, Уважаемые специалисты.
Подскажите, реально ли сделать следующий эффект.
Якорь ссылается на часть текста этой же страницы.
Возможно ли сделать эффект мерцания после перехода на якорь?
Т.е. якорь ссылается на часть таблицы, после скролла таблица должна несколько раз "мигнуть".
Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 01.10.2014, 11:38
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Если я правильно понял бНОПНЯ, то после наезда якоря на верхнюю границу окна что-то релевантное должно моргнуть в ответ.

Это возможно сделать.
Ответить с цитированием
  #3 (permalink)  
Старый 01.10.2014, 11:40
Аспирант
Отправить личное сообщение для Levitan Посмотреть профиль Найти все сообщения от Levitan
 
Регистрация: 29.07.2014
Сообщений: 37

Сообщение от kostyanet Посмотреть сообщение
Если я правильно понял бНОПНЯ, то после наезда якоря на верхнюю границу окна что-то релевантное должно моргнуть в ответ.

Это возможно сделать.
Совершенно верно, подскажите, в какую сторону копать?
Ответить с цитированием
  #4 (permalink)  
Старый 01.10.2014, 11:41
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Если не заморачиваться поддержкой древних браузеров, это можно сделать и без js:
<style>
div:target {
  -webkit-animation: blim 1s 5;
  -moz-animation:    blim 1s 5;
  -o-animation:      blim 1s 5;
  animation:         blim 1s 5;
}
@-webkit-keyframes blim {
  0%   { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes blim {
  0%   { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes blim {
  0%   { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes blim {
  0%   { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
</style>
<a href="#q">q</a>
<a href="#w">w</a>
<div id="q">qqqqqqqqqqqqqqqqqqqqqqqq</div>
<div id="w">wwwwwwwwwwwwwwwwwwwwwwww</div>
Ответить с цитированием
  #5 (permalink)  
Старый 01.10.2014, 11:55
Аспирант
Отправить личное сообщение для Levitan Посмотреть профиль Найти все сообщения от Levitan
 
Регистрация: 29.07.2014
Сообщений: 37

Сообщение от BETEPAH Посмотреть сообщение
Если не заморачиваться поддержкой древних браузеров, это можно сделать и без js:
<style>
div:target {
  -webkit-animation: blim 1s 5;
  -moz-animation:    blim 1s 5;
  -o-animation:      blim 1s 5;
  animation:         blim 1s 5;
}
@-webkit-keyframes blim {
  0%   { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes blim {
  0%   { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes blim {
  0%   { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes blim {
  0%   { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
</style>
<a href="#q">q</a>
<a href="#w">w</a>
<div id="q">qqqqqqqqqqqqqqqqqqqqqqqq</div>
<div id="w">wwwwwwwwwwwwwwwwwwwwwwww</div>
То что нужно! Спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 01.10.2014, 12:23
Аспирант
Отправить личное сообщение для Levitan Посмотреть профиль Найти все сообщения от Levitan
 
Регистрация: 29.07.2014
Сообщений: 37

Подскажите еще такой вопрос. Я ставлю якорь выше элемента к которому применяется эффект blim. Но страница сдвигается под мерцающий элемент, а не под якорь. как правильно добавить отступ?
Заранее спасибо!
Ответить с цитированием
  #7 (permalink)  
Старый 01.10.2014, 13:06
Аспирант
Отправить личное сообщение для Levitan Посмотреть профиль Найти все сообщения от Levitan
 
Регистрация: 29.07.2014
Сообщений: 37

Сообщение от Levitan Посмотреть сообщение
Подскажите еще такой вопрос. Я ставлю якорь выше элемента к которому применяется эффект blim. Но страница сдвигается под мерцающий элемент, а не под якорь. как правильно добавить отступ?
Заранее спасибо!
Решено.
<a id="amin" href="#" style="position:absolute;margin-top:-10px;">
Ответить с цитированием
  #8 (permalink)  
Старый 01.10.2014, 13:19
Аспирант
Отправить личное сообщение для Levitan Посмотреть профиль Найти все сообщения от Levitan
 
Регистрация: 29.07.2014
Сообщений: 37

Отступ работает если в <a></a> нет контента.
А таргет отображается под верхней границей окна браузера.
Как можно настроить отступ именно от таргета не сдвигая элементы?
Или остановить прокрутку страницы выше от таргета.

Последний раз редактировалось Levitan, 01.10.2014 в 13:28.
Ответить с цитированием
  #9 (permalink)  
Старый 01.10.2014, 15:44
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Levitan,
Я не понимаю вопрос. Сделайте тестовую страницу с проблемой в песочнице или прям здесь добавив к тегу оформления кода " run".
Ответить с цитированием
  #10 (permalink)  
Старый 03.10.2014, 12:31
Аспирант
Отправить личное сообщение для Levitan Посмотреть профиль Найти все сообщения от Levitan
 
Регистрация: 29.07.2014
Сообщений: 37



Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Эффекты в галерее hfts_rider Элементы интерфейса 14 17.07.2014 12:36
Эффекты для расписания alexan0308 Ваши сайты и скрипты 2 17.12.2011 09:29
Эффекты в scriptaculous subaru Prototype & script.aculo.us 5 16.07.2011 16:35
Эффекты для меню Wital jQuery 3 11.01.2011 16:32
Canvas - эффекты к изображениям? Qwe2Qwe Общие вопросы Javascript 1 27.02.2010 20:21