Чат сообщества
   | |
| Модератор форума: JonMagon |
| Сообщество uCoz Вебмастеру JavaScript, Flash и прочие технологии как заменить эффект под кнопкой? (Помогите осилить пожалуйста =)) |
| как заменить эффект под кнопкой? |
|
Eсть вот такой CSS:
#button{ bottom: 9%; right: 0.1%; } #content{ top:66%; right:-350px; -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; -o-transition-duration: 0.7s; transition-duration: 0.7s; } #button:hover #content{ right:10%; -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; -o-transition-duration: 0.7s; transition-duration: 0.7s; } и дальше вот такое: <div id="button"> <a href="content"> <img src="путь_к_картинке_за_кнопкой" height="50" width="78"></img> </a> <div id="content"> ...... ...... ..... </div> </div> ----------------------------------------------------------- эта конструкция по наводе мышки на кнопку (button), с помощью эффекта подобному slide "выдвигает" окошко с контентом (content) давно мечтаю заменить этот slide эффект на FADE IN... чтобы окошко появлялось а не приезжало - выглядит устаревше. Как это сделать? пожалуйста   WWW.DOGICA.COM / WWW.DOGICA.ORG Сообщение отредактировал GEMMY - Понедельник, 26 Май 2014, 22:05:14
|
|
|
|
да!
но только это не окно - когда вы мышку убираете с открывшегося контента - он заезжает обратно так же как выехал это будет не только эстетичнее и новее - есть другая проблемка.. гляньте на этот кусочек кода: #content{ top:66%; right:-350px; из за него сайт неправильно показывается на смартфонах планшетах итд типа у меня viewport шире чем видимый экран так как пока контент не виден - он будто спрятан за экраном WWW.DOGICA.COM / WWW.DOGICA.ORG Сообщение отредактировал GEMMY - Понедельник, 26 Май 2014, 22:26:10
|
|
GEMMY,
Цитата неправильно показывается на смартфонах планшетах ит  |
|
resize() который у вас на сайте? пробовал!
не пашет с кучей всего что есть на моих страничках - выходит месс но не только же для смартфонов.. хочу вид эффекта поменять так же : P Добавлено (04 Июн 2014, 04:23:55) --------------------------------------------- и что.. никто никак ? или только за ден-знаки? :*) Nexxus.. задача же нетяжела для профессионала ! У меня сегодня ДР - может быть в виде подарка? WWW.DOGICA.COM / WWW.DOGICA.ORG Сообщение отредактировал GEMMY - Среда, 04 Июн 2014, 04:24:25
|
|
Komoff: да хоть на Basic =)
абсолютно фиолетово.. просто нашел очень давно этот код и подогнал под себя работает нормально и не грузит сайт.. Query наверно потяжелее будет..? Nexxus спасибочки за поздравление Эта кнопка юзается у меня на всех страницах посмотри в личке.. WWW.DOGICA.COM / WWW.DOGICA.ORG Сообщение отредактировал GEMMY - Среда, 04 Июн 2014, 16:54:09
|
|
GEMMY,
Код #button{ bottom: 9%; right: 0.1%; } #content{ top:66%; right:10%; display:none; opacity:0; -webkit-transition:opacity 0.7s ease; -moz-transition:opacity 0.7s ease; -o-transition:opacity 0.7s ease; transition:opacity 0.7s ease; } #button:hover #content{ display:block; opacity:1; -webkit-transition:opacity 0.7s ease; -moz-transition:opacity 0.7s ease; -o-transition:opacity 0.7s ease; transition:opacity 0.7s ease; } |
|
NEXXUS - СПАСИБО.. не сработало, но с вашей подачи повозился с кодом пару часов и почти добился нужного результата, но теперь я немножко огорошен если честно (даже совсем не немножко! ). Как вот такой код может работать:
 #button{top:286px;left:5px;} #button:hover #content{ opacity:1; display:inline;left:84px; -webkit-transition:fadeIn ease-in 1; -moz-transition:fadeIn ease-in 1; -o-transition:fadeIn ease-in 1; transition:fadeIn ease-in 1; -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; -o-transition-duration: 0.7s; transition-duration: 0.7s; } <!-- #content{top:6%;opacity:0;} --> если убираю то что в комментах (между <!-- -->) - получается вообще непонятный бред на страничке в таком виде как предствил выше - фиг знает как - работает!  Но.. последний вопрос.. окно появляется при наведении мыши на его площадь (когда оно невидимо), ну и при наведении мыши на #button тоже конечно - есть идеи как это исправить может быть? Потому что я вообще не понимаю как вышеуказанный бред может работать... (особенно закомментированная строчка !? ) Фантастика этот HTML... что я могу сказать =) WWW.DOGICA.COM / WWW.DOGICA.ORG Сообщение отредактировал GEMMY - Пятница, 06 Июн 2014, 19:21:28
|
|
GEMMY,
Код #button{ bottom: 9%; right: 0.1%; } #content{ top:66%; right:10%; display:none; opacity:0; -webkit-transition:opacity 0.7s ease; -moz-transition:opacity 0.7s ease; -o-transition:opacity 0.7s ease; transition:opacity 0.7s ease; } #button > a > img:hover #content{ display:block; opacity:1; -webkit-transition:opacity 0.7s ease; -moz-transition:opacity 0.7s ease; -o-transition:opacity 0.7s ease; transition:opacity 0.7s ease; } |
|
Упорный малый!
 (Плюс пошел.. ), но пашет только так.. как сделать чтобы появлялось окно ТОЛЬКО при наведении на #button посмотрите личку.. слева кнопка HELP (#button).. за ней окно (#content). Все классно!!! Но окно появляется при наводе мыши на территорию окна, а не только на кнопку #button{position:fixed;top:286px;left:5px;} #button:hover #content{ opacity:1;display:inline;left:84px; -webkit-transition:fadeIn ease-in 1; -moz-transition:fadeIn ease-in 1; -o-transition:fadeIn ease-in 1; transition:fadeIn ease-in 1; -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; -o-transition-duration: 0.7s; transition-duration: 0.7s; } #content{top:6%;opacity:0;} WWW.DOGICA.COM / WWW.DOGICA.ORG |
| |||