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

Среда, 20 Апреля 2016 г. 09:37 + в цитатник

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

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

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

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

>

Вот код такого появления картинки. Потяните окошко кода за правый нижний уголок, и оно вам откроется полностью.
<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 - HTML ,ТЕГИ , формулы
Часть 2 - Без заголовка
...
Часть 40 - Как нанести плавающие объекты (флешки) на картинки? (Урок)
Часть 41 - Оригинальное и красивое появление картинки в движении.
Часть 42 - Красивое разворачивание картинки в постах и рамках
Часть 43 - Код ролика с сайта ОК

Метки: формулы
Понравилось: 4 пользователям

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

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

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

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

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

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

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

LiveInternetLiveInternet

-Цитатник

-Метки

-Рубрики

-Приложения

-Музыка

-Фотоальбом

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

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

-Друзья

-Постоянные читатели

-Сообщества

-Статистика

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