X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Изображения в METRO UI, Ищется скрипт и способ, как можно реализовать
professor89
professor89
Topic Starter сообщение 18.5.2013, 15:24; Ответить: professor89
Сообщение #1


Частый гость
**

Группа: User
Сообщений: 80
Регистрация: 30.10.2011
Из: Россия, Ноябрьск
Поблагодарили: 17 раз
Репутация:   3  


Добрый день, уважаемые форумчане.

Есть сайт - http://www.shape5.com/demo/metro_shows/
Это шаблон под Joоml'у. Понравилось отображение картинок, а именно.

Есть картинка и небольшой заголовок к ней. Наводишь, выезжает панелька с описанием (на сайте также есть пример). Знаю, что это все называется как metro ui. Но не могу найти данный скрипт и способ привязки его.

Сайт самописный

Буду благодарен за любую информацию!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Hallboy222
Hallboy222
сообщение 18.5.2013, 15:28; Ответить: Hallboy222
Сообщение #2


Любитель идей
*******


Группа: Active User
Сообщений: 2582
Регистрация: 27.5.2010
Из: Москва
Поблагодарили: 872 раза
Репутация:   149  


Как вариант реализовать на css 3, что-то вроде этого попробовать:
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
professor89
professor89
Topic Starter сообщение 18.5.2013, 16:41; Ответить: professor89
Сообщение #3


Частый гость
**

Группа: User
Сообщений: 80
Регистрация: 30.10.2011
Из: Россия, Ноябрьск
Поблагодарили: 17 раз
Репутация:   3  


Hallboy222,
(Hallboy222 @ 18.5.2013, 16:28) *
Как вариант реализовать на css 3, что-то вроде этого попробовать:
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;


Получилось с изменение высоты блока. Вначале высота 0, далее нужная. Но осталась проблема. Текст изначально находится где-то внизу блока, его видно, выезжает, а затем вновь за пределы блока. Пробовал с display, opacity по колдовать - не получается.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Hallboy222
Hallboy222
сообщение 18.5.2013, 18:25; Ответить: Hallboy222
Сообщение #4


Любитель идей
*******


Группа: Active User
Сообщений: 2582
Регистрация: 27.5.2010
Из: Москва
Поблагодарили: 872 раза
Репутация:   149  


Возможно, другие стили перекрывают. Покажите в лс сайтик
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WarZEN
WarZEN
сообщение 18.5.2013, 20:05; Ответить: WarZEN
Сообщение #5


Участник
***

Группа: User
Сообщений: 121
Регистрация: 10.3.2013
Поблагодарили: 24 раза
Репутация:   6  


Как на меня на много рациональней использовать jQuery Animate. Для поставленной задачи более чем достаточно. Да и скриптик много кода занимать не будет - буквально несколько строк и отображаться корректней в большей части браузеров будет.

Сообщение отредактировал WarZEN - 18.5.2013, 20:05
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
professor89
professor89
Topic Starter сообщение 18.5.2013, 20:57; Ответить: professor89
Сообщение #6


Частый гость
**

Группа: User
Сообщений: 80
Регистрация: 30.10.2011
Из: Россия, Ноябрьск
Поблагодарили: 17 раз
Репутация:   3  


(WarZEN @ 18.5.2013, 21:05) *
Как на меня на много рациональней использовать jQuery Animate. Для поставленной задачи более чем достаточно. Да и скриптик много кода занимать не будет - буквально несколько строк и отображаться корректней в большей части браузеров будет.

Можно, пожалуйста, подробнее. Я не силен в jquery.
Нашел код:

<script type="text/javascript">
$('.info').hover(function() {
$('.text').animate({
height: '200px'
}, 5000, function() {
// Анимация завершена.
});
});
</script>

Изначально в css поставил height:0; Т.е. при наведении высота увеличивается и блок появляется. Не выходит. В html все верно. Или я вообще не в том направлении пляшу?

Сообщение отредактировал professor89 - 18.5.2013, 20:58
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) NextGEN Gallery. Пропали все изображения!
В плагине WP NextGEN Gallery пропали все изображения!
3 aidos 721 30.11.2017, 7:58
автор: Nell
Открытая тема (нет новых ответов) Изображения с shutterstock от 15 рублей/штука
5 Mr_Big 560 10.9.2017, 21:30
автор: Palundra
Горячая тема (нет новых ответов) Стоковые изображения для ваших сайтов по цене 3х рублей
51 contextadlinks 7892 21.10.2014, 17:28
автор: VulkanPartner


 



RSS Текстовая версия Сейчас: 13.12.2017, 3:46
Дизайн