Переменный текст, как на Gumroad.com

0

Я видел это несколько раз. Я не могу вспомнить другие сайты, но если вы знаете других, я бы хотел увидеть. (https://gumroad.com/)

В основном, когда они делают что-то вроде:

Поделитесь своими "песнями" прямо с вашими "поклонниками". И слова в цитатах продолжают заменяться.

Мне было интересно, есть ли библиотека JS/JQuery, чтобы помочь с этим. Или иначе я бы хотел, чтобы некоторые другие сайты делали это, чтобы я мог получить идеи!

Благодарю.

  • 1
    Просто написал что-то подобное, но без анимации - jsfiddle.net/Dogbert/vF4rj/3 Вы можете добавить анимацию с помощью пользовательского интерфейса jQuery .
  • 0
    Здорово. Да, это было полезно! Если вы отправите это, я приму.
Показать ещё 2 комментария
Теги:

3 ответа

2
Лучший ответ

Я реализовал нечто подобное (без анимации) с помощью jQuery.

Код в основном циклирует данные из массива каждые 2000 мс и добавляет его в диапазон.

Live Demo - http://jsfiddle.net/Dogbert/vF4rj/3/

JS:

var options = [
    ["music", "listeners"],
    ["software", "users"],
    ["films", "viewers"],
    ["comics", "readers"]
];

var interval = 2000;

var holder1 = $(".holder-1"), holder2 = $(".holder-2");
var currentIndex = 0;

function doIt() {
    holder1.html(options[currentIndex][0]);
    holder2.html(options[currentIndex][1]);
    currentIndex = (currentIndex + 1) % options.length;
    setTimeout(doIt, interval);
}

doIt();

HTML:

<h2>
    Sell
    <span class="holder-1"></span>
    directly to your
    <span class="holder-2"></span>
</h2>
Поделиться
2

Если вас интересует их подход, кажется, что это то, что они делают:

  1. Они дважды имеют текст заголовка в коде. Один из них - то, что вы видите в анимированном виде. Другой скрыт, установив непрозрачность на 0. Эта скрытая версия - это то, что будет использоваться для любых вычислений на отображаемом.
  2. Скрытая версия имеет свой текст обновленный вставляя новый текст в заполнителе span тегов. Отображаемая версия имеет местозаполнители в этом месте, которые являются пустыми, а их ширина анимируется с использованием новой ширины из скрытой версии.
  3. Скрытая версия также используется для определения позиционирования нового текста относительно остальной части предложения, и на основе этой информации элемент HTML, содержащий этот текст, анимируется, чтобы полностью упасть туда, где он должен.

Довольно умный подход.

Поделиться
0

Что делает эту работу для Gumroad - это гладкая анимация, поэтому я чувствую, что ответы неполны без этого важного элемента.

При этом библиотека d3 javascript (d3js.org) имеет очень хорошую реализацию базовой функциональности плюс поддержку переходов. Код ключа следующий, который позволяет вам легко указать тип преобразования css, который вы хотите применить (см. Последнюю строку):

var svg = d3.select("body").append("svg")
         .attr("width", width)
         .attr("height", height)
         .append("g")
         .attr("transform", "translate(32," + (height / 2) + ")");

Полный пример можно посмотреть здесь: http://bl.ocks.org/mbostock/3808234

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню