-Рубрики

 -Видео

 -Я - фотограф

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

Поиск сообщений в Maziy

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

 

 -Сообщества

Участник сообществ (Всего в списке: 2) Camelot_Club Только_для_женщин
Читатель сообществ (Всего в списке: 1) Любители_Путешествий

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 11.11.2012
Записей: 1497
Комментариев: 261
Написано: 6285


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

Пятница, 21 Августа 2015 г. 06:42 + в цитатник
Цитата сообщения Шадрина_Галина

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



>




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





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

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

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

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

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







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





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



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


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

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



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

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


Серия сообщений "***уроки от Галины Шадриной":
Часть 1 - Онлайн генераторы HTML цвета
Часть 2 - Как к каждой записи сделать свой фон
Часть 3 - Красивое разворачивание картинки в постах и рамках
Часть 4 - свой простенький курсор в пост.
Часть 5 - Все о бегущем тексте. Примеры и коды.
...
Часть 9 - Новогодние уголки для дизайна
Часть 10 - HTML шпаргалка по линиям
Часть 11 - Без заголовка


 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку