Красивое разворачивание картинки в постах и рамках

Понедельник, 24 Августа 2015 г. 11:12 + в цитатник

Цитата сообщения Шадрина_Галина

Прочитать целиком В свой цитатник или сообщество!

Красивое разворачивание картинки в постах и рамках

Картинка, как и текст, может тоже появляться в движении, это выглядит красиво и оригинально, особенно при оформлении рамок и постов. Например вот так.

>

Вот код такого появления картинки. Потяните окошко кода за правый нижний уголок, и оно вам откроется полностью.
<div align="center"><marquee scrollamount="3" width="ШИРИНА РАЗВОРОТА" height="ВЫСОТА РАЗВОРОТА"><marquee scrollamount="3" direction="right" width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ"><br /> <div align="center"><img src="АДРЕС КАРТИНКИ" /></div></marquee></marquee></div>

Рассмотрим этот эффект сворачивания и разворачивания картинки, СЛЕВА- НАПРАВО, более подробно.

Где
ЗЕЛЕНЫМ выделена цифра 3, это поставлена СКОРОСТЬ СВОРАЧИВАНИЯ И РАЗВОРАЧИВАНИЯ КАРТИНКИ. Ее вы можете менять на свою, чем больше будет эта цифра, тем с большей скоростью развернется и свернется картинка,. Но ОНА ДОЛЖНА БЫТЬ ОДИНАКОВАЯ. Если вы поставите разную, то картинка не успев развернуться, начнет снова сворачиваться.

ГОЛУБЫМ выделена ШИРИНА И ВЫСОТА НАПРАВЛЕНИЯ, и ШИРИНА И ВЫСОТА РАЗВОРОТА. Они тоже должны быть ОДИНАКОВЫМИ, иначе картинки развернется не полностью.

КРАСНЫМ выделен АДРЕС КАРТИНКИ. КАК ВЗЯТЬ АДРЕС КАРТИНКИ, в разных браузерах ПОДРОБНО НАПИСАНО ЗДЕСЬ

Теперь подставляем свои значения в этот код. То есть ставим скорость разворота картинки, скорость сворачивания (одинаковые), затем ширину и высоту картинки, ширину и высоту разворачивания (одинаковые), и адрес картинки. И получаем оригинальное появление картинки.

Можно сделать чтоб картика просто появилась слева, при открытии поста, и просто осталась на месте. Но этот эффект будет виден только ПРИ ОТКРЫВАНИИ ПОСТА. Появление картинки слева.

Код такого эффекта.

<div align="center"><marquee scrollamount="3" behavior="slide" width="ШИРИНА КАРТИНКИ" height="ШИРИНА КАРТИНКИ"><div align="center"><img src="АДРЕС КАРТИНКИ" /></div></marquee></div>

Разворачивать можно картинки любого формата, то есть и клипарт, и анимированный, простые, а так же ФОТОГРАФИИ, которые при таком эффекте смотрятся очень красиво.

Что б пост не получился слишком громоздким и непонятным, другие эффекты движения картинки объясню в следующих уроках.

Успехов в вашем творчестве.

Серия сообщений "Уроки для блогов":

Часть 1 - Как скопировать текст с сайта, который защищен от копирования.
Часть 2 - Как взять картинку с альбомов Яндекс -фото
...
Часть 24 - Рамка для блога, имитирующая картину.
Часть 25 - Как сделать бегущий текст на картинке, без всякого редактора
Часть 26 - Красивое разворачивание картинки в постах и рамках
Часть 27 - Как к каждой записи сделать свой фон.
Часть 28 - Как получать извещения о новых постах, и где это сделать в настройках дневника.
...
Часть 35 - Вставляем музыку в дневник из компьютера
Часть 36 - Как расположить текст справа и слева от картинки и т.д
Часть 37 - Разделяем текст линиями

Серия сообщений "работа с текстом, картинками":
Часть 1 - Как сделать бегущий текст на картинке, без всякого редактора
Часть 2 - Как разделить текст на 2 части
...
Часть 31 - Делаем круглые картинки без ФШ
Часть 32 - Картинки, логотипы на прозрачном фоне
Часть 33 - Красивое разворачивание картинки в постах и рамках
Часть 34 - Делаем анимацию без Фотошопа
Часть 35 - Flash материал, листья осенние
...
Часть 37 - Красивые слайд-шоу в ваш дневник
Часть 38 - Бегущий текст
Часть 39 - Создать анимацию онлайн

Метки: разворачивание картинки
Понравилось: 5 пользователям

<a href="https://www.liveinternet.ru/users/5667228/post370127521/">РљСЂР°СЃРёРІРѕРµ СЂР°Р·РІРѕСЂР°С‡РёРІР°РЅРёРµ РєР°СЂС‚РёРЅРєРё РІ РїРѕСЃС‚Р°С… Рё СЂР°РјРєР°С…</a><br/>РљСЂР°СЃРёРІРѕРµ СЂР°Р·РІРѕСЂР°С‡РёРІР°РЅРёРµ РєР°СЂС‚РёРЅРєРё РІ РїРѕСЃС‚Р°С… Рё СЂР°РјРєР°С…

РљР°СЂС‚РёРЅРєР°, РєР°Рє Рё С‚РµРєСЃС‚, РјРѕР¶РµС‚ С‚РѕР¶Рµ РїРѕСЏРІР»СЏС‚СЊСЃСЏ РІ РґРІРёР¶РµРЅРёРё, СЌС‚Рѕ РІС‹РіР»СЏРґРёС‚ РєСЂР°СЃРёРІРѕ Рё РѕСЂРёРіРёРЅР°Р»СЊРЅРѕ, РѕСЃРѕР±РµРЅРЅРѕ РїСЂРё РѕС„РѕСЂРјР»РµРЅРёРё СЂР°РјРѕРє Рё РїРѕСЃС‚РѕРІ. РќР°РїСЂРёРјРµСЂ РІРѕС‚ С‚Р°Рє.

Р’РѕС‚ РєРѕРґ С‚Р°РєРѕРіРѕ РїРѕСЏРІР»РµРЅРёСЏ РєР°СЂС‚РёРЅРєРё. РџРѕС‚СЏРЅРёС‚Рµ РѕРєРѕС€РєРѕ РєРѕРґР° Р·Р° РїСЂР°РІС‹Р№ РЅРёР¶РЅРёР№ СѓРіРѕР»РѕРє, Рё РѕРЅРѕ РІР°Рј РѕС‚РєСЂРѕРµС‚СЃСЏ РїРѕР»РЅРѕСЃС‚СЊСЋ.

Р Р°СЃСЃРјРѕС‚СЂРёРј СЌС‚РѕС‚ СЌС„С„РµРєС‚ СЃРІРѕСЂР°С‡РёРІР°РЅРёСЏ Рё СЂР°Р·РІРѕСЂР°С‡РёРІР°РЅРёСЏ РєР°СЂС‚РёРЅРєРё, РЎР›Р•Р’Рђ- РќРђРџР РђР’Рћ, Р±РѕР»РµРµ РїРѕРґСЂРѕР±РЅРѕ.

Р“РґРµ
Р—Р•Р›Р•РќР«Рњ РІС‹РґРµР»РµРЅР° С†РёС„СЂР° 3, СЌС‚Рѕ РїРѕСЃС‚Р°РІР»РµРЅР° РЎРљРћР РћРЎРўР¬ РЎР’РћР РђР§РР’РђРќРРЇ Р Р РђР—Р’РћР РђР§РР’РђРќРРЇ РљРђР РўРРќРљР. Р•Рµ РІС‹ РјРѕР¶РµС‚Рµ РјРµРЅСЏС‚СЊ РЅР° СЃРІРѕСЋ, С‡РµРј Р±РѕР»СЊС€Рµ Р±СѓРґРµС‚ СЌС‚Р° С†РёС„СЂР°, С‚РµРј СЃ Р±РѕР»СЊ... <a href="https://www.liveinternet.ru/users/5667228/post370127521/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>