Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Эффекты я "якорями" (https://javascript.ru/forum/dom-window/50551-ehffekty-ya-yakoryami.html)

Levitan 01.10.2014 11:23

Эффекты я "якорями"
 
Добрый день, Уважаемые специалисты.
Подскажите, реально ли сделать следующий эффект.
Якорь ссылается на часть текста этой же страницы.
Возможно ли сделать эффект мерцания после перехода на якорь?
Т.е. якорь ссылается на часть таблицы, после скролла таблица должна несколько раз "мигнуть".
Заранее спасибо!

kostyanet 01.10.2014 11:38

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

Это возможно сделать.

Levitan 01.10.2014 11:40

Цитата:

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

Это возможно сделать.

Совершенно верно, подскажите, в какую сторону копать?

BETEPAH 01.10.2014 11:41

Если не заморачиваться поддержкой древних браузеров, это можно сделать и без 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>

Levitan 01.10.2014 11:55

Цитата:

Сообщение от BETEPAH (Сообщение 332938)
Если не заморачиваться поддержкой древних браузеров, это можно сделать и без 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>

То что нужно! Спасибо!

Levitan 01.10.2014 12:23

Подскажите еще такой вопрос. Я ставлю якорь выше элемента к которому применяется эффект blim. Но страница сдвигается под мерцающий элемент, а не под якорь. как правильно добавить отступ?
Заранее спасибо!

Levitan 01.10.2014 13:06

Цитата:

Сообщение от Levitan (Сообщение 332949)
Подскажите еще такой вопрос. Я ставлю якорь выше элемента к которому применяется эффект blim. Но страница сдвигается под мерцающий элемент, а не под якорь. как правильно добавить отступ?
Заранее спасибо!

Решено.
<a id="amin" href="#" style="position:absolute;margin-top:-10px;">

Levitan 01.10.2014 13:19

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

BETEPAH 01.10.2014 15:44

Levitan,
Я не понимаю вопрос. Сделайте тестовую страницу с проблемой в песочнице или прям здесь добавив к тегу оформления кода " run".

Levitan 03.10.2014 12:31





Часовой пояс GMT +3, время: 02:57.