ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

Дата и время: начало 28 апреля в 16:00 по МСК;
Если у вас возникла идея создать ролевую игру, сообщество любителей собак или форум для киноманов,
но не знаете с чего начать и что делать, не беда! Мы здесь чтобы помочь.

Подробности

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Архив устаревших тем » [отвечено] Вставка анимации (анимация "перекосила" дизайн)


[отвечено] Вставка анимации (анимация "перекосила" дизайн)

Сообщений 1 страница 5 из 5

1

значит, задача такая... я сделала дизайн и пытаюсь прилепить на него анимацию (где отмечено):

http://uploads.ru/t/d/X/L/dXL0W.jpg

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

это я вставила вниз:

<div id="left-ani"><img src="http://uploads.ru/i/Q/3/Z/Q3ZIm.gif"></div>

это я вставила в стиль:

#left-ani {margin-left: -331px; margin-top: -47px; position: absolute;}

а вот справа возникает проблема:

<div id="right-ani"><img src="http://uploads.ru/i/S/4/H/S4HZE.gif"></div>

#right-ani {position: absolute; margin-left: 1037px; margin-top: -284px;}

при увеличении разрешения экрана права картинка "обрубает" верхний фон и появляется нижняя прокрутка:
http://uploads.ru/t/X/H/Y/XHYWu.jpg
http://uploads.ru/t/U/e/f/Uefrm.jpg

эта проблема именно справа. с чем связана - не пойму, ибо (если убрать фонарь) слева при увеличении разрешения анимация нормально себя ведет, безропотно находится за пределами разрешения экрана.

попрбовала еще вот так поступить с фонарем:

<div style="position:relative; right: 500px"><div style="position: absolute; margin-top: -284px;" align="right"><img src="http://uploads.ru/i/S/4/H/S4HZE.gif"></div></div>

безрезультатно.
слева анимация на посохе ведет себя нормально при любом разрешении, а справа позарез вызывает прокрутку.

вопрос: как вставить правую анимацию, чтоб это не сказывалось на разрешении экрана?
тестовый форум: http://rustest.rusff.ru/

Теги: вопросы от новичков, анимация, дизайн

0

2

Герда
хех, тут все логично. Все позиции считаются от верхнего левого угла. Для левой картинки ты указываешь отрицательный отступ слева и когда позиционируемое место выходит за пределы экрана, то картинка исчезает. Т.е. при уменьшении окна браузера, позиция margin-left: -331px находится в невидимой области страницы, потому что граница окна браузера слева - это исходная точки отчета позиционирования всех элементов.
Но совсем по-другому будет справа, ибо справа у нас нет "границы", справа у нас сколько угодно места, поэтому, если ты говоришь "отступи вот от этой точки 1000px", то браузер послушно это и делает, ибо не знает, что место справа у него закончилось.
Можно ему об этом сказать, используя свойство overflow: hidden; для #pun. Но не знаю насколько кроссбраузерным будет это решение (и не будет ли прокручиваться страница стрелками в Опере, например). Можно также попробовать поставить overflow: hidden; для body.
Ну и поскольку ты используешь медиакверис, то можно обработать это условие с помощью этой технологии.

Если хочешь, чтобы строка прокрутки появлялась, но картинка не обрезалась, позиционируй #pun-index в relative, а для гифок пропиши отрицательные left и right соотвественно.

На заметку: более логично будет прописать твои гифки как фон позиционируемым блокам - и меньше лишних элементов и более семантично.

+1

3

Герда
Ну такой отработанный вариант без прокрутки и обрезаний

Объединить две гифки в одну объединеных прозрачкой (Вес увеличицо, но слабо - но

!! Главное:

1. Нун точно определить ось симметрии форума и подготовить симметричную прозрачную полоску - влево-вправо от центра - которая бы захватывала обе гифки (возможно из за симметрии останецо прозрачный кусок слево за гифкой слево (или справо  за гифкой Справо)!!!Но не обрезать - полоска должна быть симметричной(по длинам слево -справо) относительно центра фора и на нее  должны влезать обе Гиффки,

далее эту полоску кидаем в ФШ, раскладываем обе гифки по слоям в нужном, заранее отмеченых местах полоски... ну а далее гиф Анимация

Зачем нужна Симметрия ?, а затем, чтобы поставить её фоном на #pun_wrap по центру с нужным отступом от верха..

Отредактировано Deff (25.02.12 03:04)

+1

4

Зы

В Фонарике 19 слоев по.33 секунды

В червячках - 101 по 0.33 секунды - карочь на полный курс червяков придецо 5 раз скопировать всю пачку слоев для фонарика

Отредактировано Deff (25.02.12 03:11)

0

5

чтобы не мучаться в фотошопе, решила попробовать кодами.

sadhaka написал(а):

overflow: hidden; для #pun

помогло.
в гугле и мозиле все атлична.

спасибо!
в следующий раз я буду, пожалуй, выбирать места для анимации более подходящие для стандартных разрешений экрана. :)

0


Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Архив устаревших тем » [отвечено] Вставка анимации (анимация "перекосила" дизайн)