tooltips

Простой путь к показу случайного содержимого с анимацией и без

Эта статья подойдет тем, кто делает или будет делать проект, где необходимо менять содержимое формы, состоящей из полезных советов типа — «А вы знали?».

Например, есть 8-10 абзацев текста и надо, чтобы отображался только один из них, выбранный случайным образом.

Данный метод хорошо подойдет для статичных сайтов.

Пример со статикойПример с анимациейСкачать

Давайте начнем:

Составляем из подсказок «А вы знали?» ненумерованный список:

Идея заключается в том чтобы скрыть все подсказки, затем случайно показывать только одну из них, используя JavaScript.

И так, чтобы отформатировать и скрыть текст, мы используем следующий CSS код:

Подводным камнем этого решения может стать то, что сначала все подсказки скрыты. Так пользователь с неработающим JavaScript и включенным CSS не сможет увидеть их (подсказки) вообще, в то время как пользователь с отключенными JS/CSS (так же как и в поисковой машине) увидит их все.

Чтобы показать одну из подсказок случайно, нам нужно использовать маленький jQuery скрипт. Конечно, вам придется скачать jQuery, положить его куда-нибудь на своем сервере и вставить ссылку на него в head тэг вашего документа.

Ниже добавьте следующий скрипт:

Коротко, не правда ли?

Просмотрите примеры (обновите страницу несколько раз), чтобы увидеть, как это работает.

Следующий шаг

Если такие простые функциональные возможности вас не удовлетворили, то вот вам еще.

С небольшим изменением вышеупомянутого кода, мы сможем плавно скрывать и показывать подсказки, чередующиеся случайным образом. И конечно, этот код не позволит одной и той же подсказке показываться дважды за весь период чередования.

Заметьте, что вы сможете менять длину паузы между чередованиями картинок.

Просмотрите пример, чтобы увидеть его в действии.

Спасибо, за внимание.)


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