Главная
Web-дизайн
Генератор случайных фраз или скрипт — волшебный шар

Генератор случайных фраз или скрипт — волшебный шар

Волшебный шар

Доброго времени суток. 🙂

Однажды наткнулся на очень интересный скрипт и не мог его не одолжить. Суть скрипта в том, что он выдает случайные фразы из списка. Фразы он выдает сразу после нажатия. Происходит плавная анимация и текст меняется.

Данный скрипт можно приспособить для чего угодно, была бы идея 🙂 В моем случаи он использовался как аналог игрушки - Волшебный шар. Настоящей игрушке нужно задать вопрос, потом встряхнуть и она высветит какой-то случайный ответ. Так и этот скрипт. Он оформлен в виде шара, Вам остается на него нажать и он выдаст ответ. Сам скрипт я немного изменил и удалил лишнее. На его работу это не повлияло, но немного уменьшило в размере и нагрузке на сайт.

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



Пример

Для начала подключим библиотеку jquery в шапке переда закрывающимся head или подвале сайта переда закрывающимся body.

Если Вы делали ранее подключение библиотеки или она подключена по умолчанию, то пропустите этот шаг.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Потом нужно на Ваш сайт вставить javascript.

<script type="text/javascript">
		var i = 0;
		var answers = [
			"Вперед!",
			"Не сейчас",
			"Не делай<br>этого",
			"Ты шутишь?",
			"Да,<br>но позднее",
			"Думаю,<br />не стоит",
			"Не надейся<br>на это",
			"Ни в коем<br>случае",
			"Это неплохо",
			"Кто знает?",
			"Туманный ответ,<br>попробуй еще",
			"Я не уверен",
			"Я думаю,<br>хорошо",
			"Забудь<br>об этом",
			"Это возможно",
			"Определенно -<br>да",
			"Быть может",
			"Слишком<br>рано",
			"Да",
			"Конечно, да",
			"Даже<br>не думай",
			"Лучше Вам<br>пока этого<br>не знать"
		];

		$(function () {

			$('.panel-text').click(function () {
				i = Math.floor(Math.random() * answers.length)
				showText(this, answers[i]);
			}); ;

			function showText(panel, text) {

				var panel = $(panel);
				var msg = $('.message', panel);
				panel.fadeOut(500, function () {
					msg.html(text);
					panel.fadeIn(500);
				});
			}
		});
	
	</script>

Первая часть скрипта как раз те фразы, которые будут выводится после нажатия. Вы можете добавить свои или вообще заменить их полностью. Чтобы добавить свою фразу, просто пишите их через запятую и в двойных верхних скобках, как это видно на примере "Вперед!",. Тегом br выполняется перенос строки.

В нижней части указываются блоки с которыми работает скрипт - это panel-text и message. Также вы можете увидеть две цифры 500. Эти цифры отвечают за скорость анимации исчезновения и появления текста. Это скорость в миллисекундах. Следовательно 500 - это пол секунды, 1000 - секунда и тд., думаю с этим понятно.

Далее вставляем html разметку в нужное место Вашего сайта, там где Вы хотите увидеть готовый результат.

<div class="ball">
	<div class="panel-text">
		<div class="message">
			Кликните,<br>
			чтобы узнать<br>
			ответ
		</div>
	</div>
</div>

Чтобы задать внешний вид еще добавим немного CSS стилей.

.ball{
background:url(bll.png) no-repeat;
height:300px;
width:300px;
display:table-cell; 
vertical-align:middle;
}
.message{
font: 11px/125% Tahoma;
color:#fff;
}
.message:hover{
cursor:pointer;
}

В стилях используется фон в виде картинки, на которой шар восьмерка. Шар темного цвета, а текст белого, так что если Вы будете использовать скрипт без фона, измените цвет текста на другой иначе, на белом фоне сайта, Вы просто ничего не увидите.

Больше ничего не нужно. Теперь у Вас тоже есть интересный элемент, который может помочь Вашим посетителям, немного расслабится.



ѕример


На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(3 голоса, в среднем: 5 из 5)

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий