Joomla 1.6 Реализовать эффект

Тема в разделе "Подбор расширений", создана пользователем Adm1nspb, 24.06.2011.

  1. Offline

    Adm1nspb Недавно здесь

    Регистрация:
    04.07.2010
    Сообщения:
    74
    Симпатии:
    0
    Пол:
    Мужской
    Не подскажите - как можно организовать эффект как в этом ( http://demo.rockettheme.com/?template=catalyst ) шаблоне?

    А именно при наведении мыши на

    Why use Us
    What We Do
    Watch a Demo
    Get in Touch

    Надо чтоб было подобное вздрагивание.
     
  2.  
  3. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    ну как че?! Через jqery естественно)
     
  4. Offline

    Adm1nspb Недавно здесь

    Регистрация:
    04.07.2010
    Сообщения:
    74
    Симпатии:
    0
    Пол:
    Мужской
    А как???
     
  5. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    через css3 :)
    ниже пример для изображения, но по сути, можно псевдо класс :hover привязать к слою (div) в котором ты выведешь свои креативы
    Код (html):
    1. .example img{
    2. border: 5px solid #ccc;
    3. float: left;
    4. margin: 15px;
    5. -webkit-transition: margin 0.5s ease-out;
    6. -moz-transition: margin 0.5s ease-out;
    7.  -o-transition: margin 0.5s ease-out;
    8. }
    9.        
    10. .example img:hover {
    11. margin-top: 2px;
    12. }
     
    Adm1nspb нравится это.
  6. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    Ты ошибаешься! На кссе хоть и можно выполнить действие при навидении но только одно!!! Там же сделанна анимация! А это только скриптами! значит всетаки джиквери!
     
  7. Offline

    _voland_ специалист

    Регистрация:
    12.04.2008
    Сообщения:
    2 173
    Симпатии:
    102
    Пол:
    Мужской

    И кто дурак?
     
  8. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    :) +1
    2TroL:
    и к слову, на сайте по ссылке данный эффект не на jq а на moo сделан ;)
     
  9. Offline

    Adm1nspb Недавно здесь

    Регистрация:
    04.07.2010
    Сообщения:
    74
    Симпатии:
    0
    Пол:
    Мужской

    Не думал что подобное можно сделать через CSS. Браво!
    Один вопрос
    В приведенном мной примере происходит вздрагивание картинки вверх и при навелдении на нее мыши и она вниз возвращается.

    В этом примере (код выше) картинка вздрагивает вверх и опускается когда мышка уже не над картинкой. Можно ли сделать так, чоб картинка вздрагивала и возвращалась на место, один раз при занесении на ней мыши, после чнго была статичной до занесения мыши над следубющей артинкой или снова над этой ? Чтоб полностью повторить эффект?

    Или...если еще как можно - можете показать как?
     
  10. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    посмотри вариант реализации тут http://mainview.ru/css/kak-sozdat-hover-effekt-dlya-izobrazheniya-ispolzuya-css3
    ну и погугли, я же просто для примера написал
     
  11. Offline

    Adm1nspb Недавно здесь

    Регистрация:
    04.07.2010
    Сообщения:
    74
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо!

    Если можно - последний вопрос.
    Код который вы привели нормально работает везде кроме opera.
    В ней же картинка подскакивает вверх резко и также опускается. В остальных браузерах есть плавность.
    Можно ли это исправить? Если да - не подскажите как?
     

Поделиться этой страницей

Загрузка...