1

Тема: Біжучий рядок за допомогою CSS (ticker css)

Маю приклад, коли біжить рядок, а при наведенні зупиняється, але мені треба зробити дещо інше.

Є певний текстовий рядок, який не вміщається в батьківському елементі без переносу. Мені треба приховати весь текст, що не вміщається, але при наведенні, скажімо, на кінець рядка, рядок починає бігти щоб показати приховану решту.

Взагаліто бажано щоб рішення було на CSS, але якщо "ніяк", то можна і за допомогою JavaScript.

2 Востаннє редагувалося VTrim (21.03.2015 11:16:16)

Re: Біжучий рядок за допомогою CSS (ticker css)

Тримайте
http://jsfiddle.net/Le5Lnneo/

Але там потрібно збільшувати кількість сек. для того щоб рядок певної довжини повністю прокрутити.

=)
Подякували: ktretyak1

3 Востаннє редагувалося ktretyak (21.03.2015 12:07:02)

Re: Біжучий рядок за допомогою CSS (ticker css)

Отже, тепер маємо майже те що треба. Залишилось зробити щоб не  в будь-якому місті реагував рядок на наведення, а щоб лише на область в кінці батьківського елемента, скажімо на трикрапку, яка натякає що ще є прихований текст.

4

Re: Біжучий рядок за допомогою CSS (ticker css)

Якщо вам просто "щось таке", то зробіть його paused, а в :hover - running.
А якщо треба точно елемент керування праворуч, то вже складніше. Я трохи погрався, але це незадовільно: http://jsfiddle.net/c4pdg0xv/1/

Подякували: ktretyak1

5 Востаннє редагувалося ktretyak (21.03.2015 12:23:38)

Re: Біжучий рядок за допомогою CSS (ticker css)

Облом в тому, що вся наша конструкція працює лише у хромі. Пробував у IE, Firefox то не працює.

Хоча я у javascript новачок, але у CSS3 ще менше тямлю. Мабуть все ж краще буде в javascript щось простіше і крос-браузерніше придумати.

6 Востаннє редагувалося VTrim (21.03.2015 12:49:52)

Re: Біжучий рядок за допомогою CSS (ticker css)

Тому,що це фішки CSS3,вcього цього в старіших версіях браузерів немає.

Можете переробити з цього на js
http://a-cto.narod.ru/marquee/javascript.html

=)
Подякували: leofun011

7

Re: Біжучий рядок за допомогою CSS (ticker css)

Спитав на stackoverflow