Автор Тема: css-анимация и адаптивность  (Прочитано 2508 раз)

07 Февраль, 2016, 15:34:00

Оффлайн nyshka

  • Школьник
  • *
  • Сообщений: 9
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 47.0.2526.111 Chrome 47.0.2526.111
    • Просмотр профиля
Здравствуйте, впервые делаю сайт на bootstrap - радует адаптивность результата. Однако при подключении css анимации (конекретнее анимации наведения вот такой http://www.webmasters.by/articles/html-coding/467-original-hover-effects-with-css3.html), всплывающие блоки сделаны абсолютами и при изменении экрана не адаптируются -вылазят за пределы дива либо вообще анимация перестает работать.

фрагмент кода:
  <div class="col-md-4 col-sm-4 contentcol view view-sixth">
                    <img src="img/basseyn.jpg" class="img-responsive">
                       <div class="mask">
                          <a href='#' class="info">Бассейны[/url]
                       </div>
                      </div>

 .view view-sixth -имеет relative,
.mask - absolute.

как адаптировать анимацию? жалко убирать- красиво получается...

Форум вебмастеров - Webmasters.BY

css-анимация и адаптивность
« : 07 Февраль, 2016, 15:34:00 »

07 Февраль, 2016, 20:09:40
Ответ #1

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4917
  • Репутация: 112
  • Шииикарно!
  • OS: Windows NT 10.0 Windows NT 10.0
  • Browser: Firefox 43.0 Firefox 43.0
    • Просмотр профиля
вообще position: absolute и адаптивная верстка плохо совместимы, так что придется или выбрать что то одно, либо адаптивность, либо анимация,
или попробовать переписать анимацию без использования position: absolute

10 Февраль, 2016, 12:27:07
Ответ #2

Оффлайн nyshka

  • Школьник
  • *
  • Сообщений: 9
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 48.0.2564.103 Chrome 48.0.2564.103
    • Просмотр профиля
это печально...а как тогда анимацию наведения с адативностью совместить..

15 Февраль, 2016, 21:43:32
Ответ #3

Оффлайн WebCyber

  • Продвинутый юзер
  • ****
  • Сообщений: 306
  • Репутация: 1
  • OS: Unknown Unknown
  • Browser: Opera 12.16 Opera 12.16
    • Просмотр профиля
По поводу бутстрапа точно сказать не могу в нём ли причина но могу сказать точно что если для абсолютно спозиционирумым элементам задать свойство margin-left а не left(и все остальные типы внешних отступов) то элемент будет отображаться относительно своего родителя и тут не важно какое разрешение экрана, измените на margin-left и сделайте это значение равным значению ширины родителя этого элемента.

21 Февраль, 2016, 07:14:46
Ответ #4

Оффлайн nyshka

  • Школьник
  • *
  • Сообщений: 9
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 48.0.2564.116 Chrome 48.0.2564.116
    • Просмотр профиля
WebCyber, дзяк! бум пробовать

26 Февраль, 2016, 08:50:32
Ответ #5

Оффлайн nyshka

  • Школьник
  • *
  • Сообщений: 9
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 48.0.2564.116 Chrome 48.0.2564.116
    • Просмотр профиля
WebCyber, ваш совет пригодился анимация работает!

еще вопрос снова с бутстрапом, может кто сталкивался?
есть меню, состоящее из названия сайта и элементов меню, элементы меню при опред размере экрана складываются в гамбургер. вопрос как прикрутить логотип который по размеру выше "container menu" ? (картинка в приложении)

  <div class="container-fluid navbar-fixed-top menu" role="navigation">
             
               <div class="row top">
                    <div class="navbar navbar-default">
                        <div class="container">
                           <div class="navbar-header">
                               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
                                   <span  class="icon-bar"></span>
                                   <span  class="icon-bar"></span>
                                   <span  class="icon-bar"></span>
                               </button>
                                   
                                   <a  class="navbar-brend" href"#">

                                       <div class="container logo">
                                              <div class="row">
                                                 <div class="col-md-12">
                                                     <img src="img/logo.png">
                                                     </div>
                                               </div>   
                                            </div>
                                         
                                      название сайта[/url]
                                   <span class="slogan">слоган</span>
                             </div>
                           
                                                     
                             <div class="row">
                                    <!-- <div class="collapse navbar-collapse col-md-9 otstup"></div>-->
                                     <div class="collapse navbar-collapse col-md-3" id="responsive-menu">
                                         <ul class="nav navbar-nav" >
                                             <li><a href="#">меню1[/url]</li>
                                             <li><a href="#">меню2[/url]</li>
                                             <li><a href="#">меню3[/url]</li>         
                                             
                                         </ul>
                                     </div>
                                </div>     
                         </div>
                     </div>
               </div>
          </div>
 
если лого вешать абсолютом то естестно он при изменении размера экрана на месте остается...без абсолюта на его высоту меню выше становится... подскажите пожалсто, может кто-нибудь сталкивался с таким?
« Последнее редактирование: 26 Февраль, 2016, 08:59:54 от nyshka »

28 Февраль, 2016, 11:25:23
Ответ #6

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4917
  • Репутация: 112
  • Шииикарно!
  • OS: Windows NT 10.0 Windows NT 10.0
  • Browser: Firefox 44.0 Firefox 44.0
    • Просмотр профиля
ну не используйте абсолют, поместите в обычный див, и при помощи отступов переместите лого в нужное место

02 Март, 2016, 20:03:59
Ответ #7

Оффлайн WebCyber

  • Продвинутый юзер
  • ****
  • Сообщений: 306
  • Репутация: 1
  • OS: Unknown Unknown
  • Browser: Opera 12.16 Opera 12.16
    • Просмотр профиля
nyshka вообще зря вы пользуетесь бутстрапом. Столько атрибутов надо добавлять к тэгам да и в итоге никаких знаний в css и др.

02 Март, 2016, 20:05:21
Ответ #8

Оффлайн WebCyber

  • Продвинутый юзер
  • ****
  • Сообщений: 306
  • Репутация: 1
  • OS: Unknown Unknown
  • Browser: Opera 12.16 Opera 12.16
    • Просмотр профиля
nyshka вообще зря вы пользуетесь бутстрапом. Столько атрибутов надо добавлять к тэгам да и в итоге никаких знаний в css и др. А если вы за компом на котором нет интернета и бутстрапа?