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

Discussion in 'Подбор расширений' started by Adm1nspb, Jun 24, 2011.

  1. Offline

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

    Joined:
    Jul 4, 2010
    Messages:
    74
    Likes Received:
    0
    Gender:
    Male
    Не подскажите - как можно организовать эффект как в этом ( http://demo.rockettheme.com/?template=catalyst ) шаблоне?

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

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

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

    TroL Недавно здесь => Cпециалист <=

    Joined:
    Mar 1, 2011
    Messages:
    501
    Likes Received:
    34
    Gender:
    Male
    ну как че?! Через jqery естественно)
     
  4. Offline

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

    Joined:
    Jul 4, 2010
    Messages:
    74
    Likes Received:
    0
    Gender:
    Male
    А как???
     
  5. doctorgrif
    Offline

    doctorgrif Местный => Cпециалист <=

    Joined:
    Jan 14, 2008
    Messages:
    1,284
    Likes Received:
    66
    Gender:
    Male
    через 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 likes this.
  6. Offline

    TroL Недавно здесь => Cпециалист <=

    Joined:
    Mar 1, 2011
    Messages:
    501
    Likes Received:
    34
    Gender:
    Male
    Ты ошибаешься! На кссе хоть и можно выполнить действие при навидении но только одно!!! Там же сделанна анимация! А это только скриптами! значит всетаки джиквери!
     
  7. Offline

    _voland_ Местный => Cпециалист <=

    Joined:
    Apr 12, 2008
    Messages:
    2,171
    Likes Received:
    102
    Gender:
    Male

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

    doctorgrif Местный => Cпециалист <=

    Joined:
    Jan 14, 2008
    Messages:
    1,284
    Likes Received:
    66
    Gender:
    Male
    :) +1
    2TroL:
    и к слову, на сайте по ссылке данный эффект не на jq а на moo сделан ;)
     
  9. Offline

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

    Joined:
    Jul 4, 2010
    Messages:
    74
    Likes Received:
    0
    Gender:
    Male

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

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

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

    doctorgrif Местный => Cпециалист <=

    Joined:
    Jan 14, 2008
    Messages:
    1,284
    Likes Received:
    66
    Gender:
    Male
    посмотри вариант реализации тут http://mainview.ru/css/kak-sozdat-hover-effekt-dlya-izobrazheniya-ispolzuya-css3
    ну и погугли, я же просто для примера написал
     
  11. Offline

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

    Joined:
    Jul 4, 2010
    Messages:
    74
    Likes Received:
    0
    Gender:
    Male
    Спасибо!

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

Share This Page

Loading...