Как показать дополнительный интервал в середине текста

Question

Как показать дополнительный интервал в середине текста

0

Мне нужна дополнительная помощь от вас.

Я хочу расширить текст при прокрутке вниз, например, когда вы прокручиваете 100 пикселей вниз, текст "Поезда" переходит в "Мне нравятся поезда".

У меня все это в h1, и текст "как" помещается в промежуток.

<h1>I <span>like</span> trains</h1>

Я попытался предоставить отображение диапазона: none, а затем оживить его с помощью jQuery fadeIn, но это не тот эффект, который я хочу достичь. Он просто исчезает как элемент, и когда он показывает, текст по сторонам просто прыгает влево и вправо, но я хочу его оживить.

Я пробовал также с "непрозрачностью", но между текстом по сторонам есть пробел, проверьте скрипку. То, что я хочу достичь, - сделать h1 скользить по бокам, а затем показывать интервал, а также скрывать пробел, а затем перемещать остальную часть в центр.

http://jsfiddle.net/HWESg/

Спасибо за помощь заранее, ура!

mkolodziejczak 17 март 2014, в 15:59

Источник

2

Вместо этого используется максимальная ширина: jsfiddle.net/HWESg/1
A. Wolff 17 март 2014, в 14:23
0

Спасибо, что сделали работу.
mkolodziejczak 17 март 2014, в 14:44

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Вместо этого используется максимальная ширина: jsfiddle.net/HWESg/1

Xotic750 · Accepted Answer · 2014-03-17T13-00-00.000Z

Возможность, если вы хотите, чтобы trains двигались вправо и like исчезать.

HTML

<h1>I<span class="display"> like</span> trains</h1>

Javascript

var display = $('.display');

display.css({
    visibility: "hidden",
    fontSize: "0"
}).animate({
    fontSize: display.parent().css("fontSize")
}, 500, "linear", function () {
    $(this).css({
        opacity: "0",
        visibility: "visible"
    }).animate({
        opacity: "1"
    }, 500, "linear");
});

На jsFiddle