Форум

Aleksanderj · #1 (**permalink**) 10.09.2015, 16:37

Здравствуйте. Имеется FlexSlider Подскажите как анимировать блоки с текстами "Анимированный блок 1" и "Анимированный блок 2" при помощи javascript,в момент когда добавляется

<li class="flex-active-slide">

, т.е. показывается тот или иной слайд? Почитал про MutationObserver ... и если я правильно понял, то при помощи него можно прослушивать изменения DOM. Как то можно через него такое реализовать или я ошибаюсь и читаю не то что нужно? Буду очень благодарен за ответы.

рони · #2 (**permalink**) 10.09.2015, 17:21

Aleksanderj,
так пропишите свою анимацию в css
http://jsfiddle.net/ja897agn/1/

Aleksanderj · #3 (**permalink**) 10.09.2015, 17:56

рони,
я для нее создавал css анимацию, но на одном слайде много анимированных элементов, которым приходится то ждать transition-delay, то останавливаться в нужный момент, то снова двигаться и это не есть хорошо с точки зрения, я думаю, нагрузки. Взглянул на другие проекты, там никто почему то не использует css3 анимацию, все пользуются js написанным для каждого анимированного элемента. GSAP тоже хоть и хвалят, но только хвалят и не больше. Вот я и взвесил все за и против , и решил на деле тоже посмотреть стоит ли использовать js или css3 анимацию. Притом , что при первой загрузке странице эта анимация иногда подвисает. Во время js-анимации движение от одной точки к другой такого не происходит и можно воспользоваться большими возможностями.

рони · #4 (**permalink**) 10.09.2015, 18:11

Aleksanderj,
Callback API => http://www.woothemes.com/flexslider/
пишите свою анимацию в after: function(){сюда},

Aleksanderj · #5 (**permalink**) 10.09.2015, 18:15

рони,
а маленький пример можно на тех двух слайдах, если вас не затруднит

рони · #6 (**permalink**) 10.09.2015, 18:41

Aleksanderj,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider-min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <style type='text/css'>
    *, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body, html, main {
background:#fff;
height: 100%;
font-size: 12px;
font-weight: 300;
line-height: 26px;
}
.background-sky, .background-night {
	background-color: #07a8dd;
    display: block;
    font-size: 16px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
	height: 520px;
}
.background-night {
    background-color: #59CB59;
}
.slides li li{
   margin-left : -140%;
}


</style>
<script type='text/javascript'>
$(window).load(function(){
$('.slides li li').animate({
    'margin-left': '0%'
}, 800)
$('.flexslider').flexslider({
    animation: "fade",
    directionNav: false,
    controlNav: false,
    slideshowSpeed: 7000,
    animationSpeed: 600,
    before: function() {
        $('.slides li li').css({
            'margin-left': '-140%'
        })
    },
    after: function() {
        $('li.flex-active-slide li').animate({
            'margin-left': '0%'
        }, 800)
    }
});

});

</script>

</head>
<body>
  <div class="featured-work-slider flexslider">
    <ul class="slides">
		<li>
<div class="background-sky">
		<h1 class="hero-title1">1 слайд</h1>
    <ul class="animate-block">
        <li>
            Анимированный блок 1
        </li>
     </ul>
</div>
	 </li>
	 <li>
<div class="background-night">
		<h1 class="hero-title2">2 слайд</h1>
    <ul class="animate-block2">
        <li>
            Анимированный блок 2
        </li>
     </ul>
</div>
	 </li>
	 </ul>

</div>

</body>

</html>

Aleksanderj · #7 (**permalink**) 10.09.2015, 18:49

Спасибо вам большое, рони!

Форум

Справочник

Discord чат

Курсы javascript