"БЕГУЩАЯ СТРОКА" И СЛАЙД-ШОУ СВОИМИ РУКАМИ

Пятница, 10 Февраля 2017 г. 12:21 + в цитатник

Сегодня мы научимся делать слайд-шоу собственными руками, без испоьзования плеера с Яндекс-Фоток.

Для этого вначале познакомимся с "бегущей строкой".

Все бегущие строки создаются с помощью тэгов <marquee>...</marquee>

<marquee>Текст движется </marquee>

Текст движется

По умолчанию строка движется справа налево.

Чтобы изменить направление движения, используем в тэге <marquee> атрибут direction, задающий направление движения.

Для движения направо:

<marquee direction="right">Текст движется направо </marquee>

Для движения вверх:

<marquee direction="up">Текст движется вверх</marquee>

Для движения вниз:

<marquee direction="down">Текст движется вниз</marquee>

Кроме команды direction тэг <marquee> может содержать атрибут behavior, задающий поведение бегущей строки.

behavior="scroll" –прокрутка текста. Это значение можно не указывать, т.к. текст по умолчанию всегда прокручивается.

<marquee behavior="scroll"> Текст прокручивается </marquee>

behavior="slide" – Прокрутка текста с остановкой

<marquee behavior="slide"> Текст прокручивается и останавливается </marquee>

behavior="alternate" – Движение от края к краю

<marquee behavior="alternate"> Текст движется от края к краю</marquee>

Другие aтрибуты:

scrollamount="1" – скорость движения строки. Может изменяться от 1 до 9.

scrolldelay="20" – Этот атрибут задаёт временной интервал в миллисекундах между шагами бегущей строки.

width="200" – ширина бегущей строки в пикселях или процентах от ширины экрана.

height="17" – высота бегущей строки в пикселях или процентах. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).

bgcolor="#E9E9D1" – Задаёт фоновый цвет бегущей строки. (Вместо E9E9D1 подставляйте свой цвет).

loop="2" – задаёт число проходов бегущей строки. (Если указать "2" то два раза текст проедет и больше показываться не будет, только если ещё раз обновить страницу).

hspace="70" - атрибут задает поле в пикселах справа и слева от бегущей строки.

vspace="70" - атрибут задает отступ в пикселах выше и ниже бегущей строки.

Чтобы двигалась картинка, заменим текст между тегами <marquee>...</marquee> ссылкой на картинку:

<marquee><img src="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3112/dkartasheva.10/0_7c8f_860c0db8_S.jpg">" target="_blank">//img-fotki.yandex.ru/get/3112/dkartasheva.10/0_7c8f_860c0db8_S.jpg"></a> </marquee>

Теперь приступим к изготовлению слайдшоу.

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

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

3. Копируем содержимое окошка с кодами в любой текстовый файл. Всё, страницу с Яндекс.Фотками можно закрыть.

4. Вы помните, что под бегущей сторокой можно сделать цветной фон, а вот фон из картинки сделать нельзя. Но это не повод отказываться от использования красивых текстур в качестве подложки для слайд-шоу. Создадим таблицу, состоящую из одной ячейки. Размер ячейки подбирайте экспериментально, исходя из размеров картинок в будущем слайд-шоу. Установите для таблицы фоновую картинку.

<table border="1" cellpadding="10" cellspacing="10" width="130px" background="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3505/dkartasheva.33/0_b849_c7c6456d_L.jpg"><tbody><tr><td>здесь" target="_blank">//img-fotki.yandex.ru/get/3505/dkartasheva.33...y><tr><td>здесь</a> будет слайдшоу</td></tr></tbody></table>

5. Формируем слайдшоу.

5.1. Открываем файл с подготовленным списком кодов картинок и каждой из них дописываем теги следующим образом:

<img src="код ссылки на картинку">

5.2. Определяемся с параметрами слайдшоу (ширина слайдшоу 130 px, движение вправо, скорость движения 3) и пишем код:

<marquee width="130" scrollamount="3"><img src="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3310/dkartasheva.10/0_7c90_86b9d885_S.jpg">&nbsp&nbsp&nbsp&nbsp&nbsp<img" target="_blank">//img-fotki.yandex.ru/get/3310/dkartasheva.10...;nbsp&nbsp&nbsp<img</a> src="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3113/dkartasheva.10/0_7c91_6c182e_S.jpg">&nbsp&nbsp&nbsp&nbsp&nbsp<img" target="_blank">//img-fotki.yandex.ru/get/3113/dkartasheva.10...;nbsp&nbsp&nbsp<img</a> src="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3209/dkartasheva.10/0_7c92_7746ec06_S.jpg">&nbsp&nbsp&nbsp&nbsp&nbsp<img" target="_blank">//img-fotki.yandex.ru/get/3209/dkartasheva.10...;nbsp&nbsp&nbsp<img</a> src="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3214/dkartasheva.10/0_7c93_e59d171f_S.jpg">&nbsp&nbsp&nbsp&nbsp&nbsp<img" target="_blank">//img-fotki.yandex.ru/get/3214/dkartasheva.10...;nbsp&nbsp&nbsp<img</a> src="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3108/dkartasheva.10/0_7c94_f5e971dc_S.jpg"></marquee>" target="_blank">//img-fotki.yandex.ru/get/3108/dkartasheva.10....jpg"></marquee></a>

5.3. Для того, чтобы картинки в слайдшоу не "склеивались", можно добавить между ними промежутки с помощью символа неразрывного пробела &nbsp

6. Вставляем код слайдшоу внутрь приготовленного кода таблички-рамочки:

<table border="1" cellpadding="10" cellspacing="10" width="130px" background="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3505/dkartasheva.33/0_b849_c7c6456d_L.jpg"><tbody><tr><td><marquee" target="_blank">//img-fotki.yandex.ru/get/3505/dkartasheva.33...lt;tr><td><marquee</a> width="130" scrollamount="3"><img src="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3310/dkartasheva.10/0_7c90_86b9d885_S.jpg">&nbsp&nbsp&nbsp&nbsp&nbsp<img" target="_blank">//img-fotki.yandex.ru/get/3310/dkartasheva.10...;nbsp&nbsp&nbsp<img</a> src="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3113/dkartasheva.10/0_7c91_6c182e_S.jpg">&nbsp&nbsp&nbsp&nbsp&nbsp<img" target="_blank">//img-fotki.yandex.ru/get/3113/dkartasheva.10...;nbsp&nbsp&nbsp<img</a> src="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3209/dkartasheva.10/0_7c92_7746ec06_S.jpg">&nbsp&nbsp&nbsp&nbsp&nbsp<img" target="_blank">//img-fotki.yandex.ru/get/3209/dkartasheva.10...;nbsp&nbsp&nbsp<img</a> src="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img-fotki.yandex.ru/get/3214/dkartasheva.10/0_7c93_e59d171f_S.jpg">&nbsp&nbsp&nbsp&nbsp&nbsp<" target="_blank">//img-fotki.yandex.ru/get/3214/dkartasheva.10...amp;nbsp&nbsp&nbsp<</a> <br /> Вы можете сделать своё слайдшоу из картинок или фото любого (разумного) размера!

Источник: dkartasheva.ya.ru/replies.xml?item_no=2111&ncrnd=8717

********************************************

Если Вы хотите сделать слайд-шоу, а не убирать картинки (фотографии) под кат, то просто воспользуйтесь приведёнными в таблице кодами.

Движение снизу вверх <marquee style="HEIGHT: 100px" direction="up" scrollamount="5">Движение снизу вверх</marquee><marquee style="HEIGHT: 100px" direction="up" scrollamount="5">Движение снизу вверх</marquee>

Движение сверху вниз <marquee style="HEIGHT: 100px" direction="down" scrollamount="5">Движение сверху вниз</marquee><marquee style="HEIGHT: 100px" direction="down" scrollamount="5">Движение сверху вниз</marquee>

Движение справа налево <marquee style="WIDTH: 100px" direction="left" scrollamount="5">Движение справа налево</marquee><marquee style="WIDTH: 100px" direction="left" scrollamount="5">Движение справа налево</marquee>

Движение слева направо <marquee style="WIDTH: 100px" direction="right" scrollamount="5">Движение слева направо </marquee><marquee style="WIDTH: 100px" direction="right" scrollamount="5">Движение слева направо </marquee>

Для изменения места нахождения картинки или текста

текст или картинка слева
слева

<p align="left">слева</p><p align="left">слева</p>

текст или картинка справа
справа

<p align="right">справа</p><p align="right">справа</p>

текст или картинка по центру
по центру

<p align="center">по центру</p><p align="center">по центру</p>

Порядок действий:

1. Загрузите нужное количество картинок на сервер я загружаю на радикал пост ниже

2. Определитесь с направление и добавляйте код.
Картинки должны быть внутри кода вместо слова Движение!!! То есть получается, что первая половина кода стоит перед картинками, а вторая после картинок, а вместо слов ДВИЖЕНИЕ СЛЕВА НАПРАВО - картинки.

100рх – это размер окна, в котором будет показано шоу, поменяв это значение на нужное Вам, Вы получите подходящий размер окна.

scrollamount="5" - поменяв цифру 5 на другую Вы измените скорость движения.

Также эти коды можно и использовать для текста - Замените слова ДВИЖЕНИЕ -
на Ваш текст и он начнёт двигаться так же как и картинки в нужном Вам
направлении

Если что-то осталось не понятно - пишите в комментах попробую объяснить подробней.

Примеры:

Движение снизу вверх

Движение сверху вниз

Движение справа налево

Движение слева направо

источник: clubs.ya.ru

Серия сообщений "Шаблоны":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - Делаем рамочку с картинками
...
Часть 26 - Карта сайта LiveJournal + ЖЖ-теги: шпаргалка //Кат, ссылки, форматирование текста и другое /
Часть 27 - Обводка текста и картинки рамочкой
Часть 28 - "БЕГУЩАЯ СТРОКА" И СЛАЙД-ШОУ СВОИМИ РУКАМИ
Часть 29 - КРАСИВЫЕ ШАБЛОНЫ ДЛЯ ВСТАВКИ МУЗЫКАЛЬНЫХ ПЛЕЕРОВ ОТ lana lanochka
Часть 30 - ШАБЛОНЫ ДЛЯ ПРИКОЛЬНОГО ОФОРМЛЕНИЯ ТЕКСТА
...
Часть 40 - Полоски или линии которыми можно украсить свой текст
Часть 41 - КОДЫ ОСНОВНЫХ КНОПОЧЕК
Часть 42 - Все о бегущем тексте. Примеры и коды.

Серия сообщений "Оформление текста":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - КАК СДЕЛАТЬ СВОЮ НАДПИСЬ НА ИЗОБРАЖЕНИИ В ОНЛАЙН-ФОТОШОП
...
Часть 20 - Простые правила оформления статей для сайта (блога)
Часть 21 - Превращение речи в текст. Блокнот для речевого ввода
Часть 22 - "БЕГУЩАЯ СТРОКА" И СЛАЙД-ШОУ СВОИМИ РУКАМИ
Часть 23 - ШАБЛОНЫ ДЛЯ ПРИКОЛЬНОГО ОФОРМЛЕНИЯ ТЕКСТА
Часть 24 - Бегущий текст в цветной рамоке + flash генератор бегущей строки
...
Часть 35 - Бесплатный онлайн сервис X-LINES.RU // Создание красивых графических надписей /
Часть 36 - Символы с кодами,которыми можно украсить свой текст..
Часть 37 - Все о бегущем тексте. Примеры и коды.

Серия сообщений "Слайд-шоу":
Часть 1 - Оригинальное слайд-шоу
Часть 2 - Простой и понятный для всех генератор для создания анимации
Часть 3 - Интересное слайд-шоу в ваш дневник
Часть 4 - "БЕГУЩАЯ СТРОКА" И СЛАЙД-ШОУ СВОИМИ РУКАМИ
Часть 5 - Васильки для хорошего настроения
Часть 6 - Бесплатный онлайн сервис с большим набором разных функций BLOG GIF
Часть 7 - Бесплатный онлайн сервис Gif Maker // создание слайд-шоу и анимации из ваших фоток /

Рубрики:

Уроки

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

svet-lana51 обратиться по имени Пятница, 05 Мая 2017 г. 12:20 (ссылка)

Ответить С цитатой В цитатник

Пятница, 05 Мая 2017 г. 23:08ссылка

MANGIANA

На здоровье, Светланочка !

Ответить С цитатой В цитатник Обратиться по имени

tane4ka777 обратиться по имени Вторник, 16 Мая 2017 г. 22:02 (ссылка)

Спасибо!

Ответить С цитатой В цитатник

Вторник, 16 Мая 2017 г. 22:35ссылка

MANGIANA

На здоровье, Танечка !

Ответить С цитатой В цитатник Обратиться по имени

Millena-Li обратиться по имени Четверг, 18 Мая 2017 г. 14:55 (ссылка)

мерси! мерси, мон шери!

Ответить С цитатой В цитатник

Пятница, 19 Мая 2017 г. 14:23ссылка

MANGIANA

На здоровье, ma chérie !

Ответить С цитатой В цитатник Обратиться по имени

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Метки

-Рубрики

-Цитатник

-Музыка

-Приложения

-Фотоальбом

-Всегда под рукой

-Поиск по дневнику

-Подписка по e-mail

"БЕГУЩАЯ СТРОКА" И СЛАЙД-ШОУ СВОИМИ РУКАМИ

Движение снизу вверх	<marquee style="HEIGHT: 100px" direction="up" scrollamount="5">Движение снизу вверх</marquee><marquee style="HEIGHT: 100px" direction="up" scrollamount="5">Движение снизу вверх</marquee>
Движение сверху вниз	<marquee style="HEIGHT: 100px" direction="down" scrollamount="5">Движение сверху вниз</marquee><marquee style="HEIGHT: 100px" direction="down" scrollamount="5">Движение сверху вниз</marquee>
Движение справа налево	<marquee style="WIDTH: 100px" direction="left" scrollamount="5">Движение справа налево</marquee><marquee style="WIDTH: 100px" direction="left" scrollamount="5">Движение справа налево</marquee>
Движение слева направо	<marquee style="WIDTH: 100px" direction="right" scrollamount="5">Движение слева направо </marquee><marquee style="WIDTH: 100px" direction="right" scrollamount="5">Движение слева направо </marquee>

Для изменения места нахождения картинки или текста
текст или картинка слева	слева	<p align="left">слева</p><p align="left">слева</p>
текст или картинка справа	справа	<p align="right">справа</p><p align="right">справа</p>
текст или картинка по центру	по центру	<p align="center">по центру</p><p align="center">по центру</p> Порядок действий: 1. Загрузите нужное количество картинок на сервер я загружаю на радикал пост ниже 2. Определитесь с направление и добавляйте код. Картинки должны быть внутри кода вместо слова Движение!!! То есть получается, что первая половина кода стоит перед картинками, а вторая после картинок, а вместо слов ДВИЖЕНИЕ СЛЕВА НАПРАВО - картинки. 100рх – это размер окна, в котором будет показано шоу, поменяв это значение на нужное Вам, Вы получите подходящий размер окна. scrollamount="5" - поменяв цифру 5 на другую Вы измените скорость движения. Также эти коды можно и использовать для текста - Замените слова ДВИЖЕНИЕ - на Ваш текст и он начнёт двигаться так же как и картинки в нужном Вам направлении Если что-то осталось не понятно - пишите в комментах попробую объяснить подробней. Примеры: Движение снизу вверх Движение сверху вниз Движение справа налево Движение слева направо