Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2018, 17:48
Интересующийся
Отправить личное сообщение для mishapod Посмотреть профиль Найти все сообщения от mishapod
 
Регистрация: 01.02.2017
Сообщений: 20

Как закончить анимацию
Картинка должна плавно исчезать и заменила следующей. (5сек).

Спасибо.
https://jsfiddle.net/romet7ep/3/

Последний раз редактировалось mishapod, 20.01.2018 в 17:55.
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2018, 18:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,496

бесконечная карусель js css3 смена картинок слайдер
mishapod,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #top_services {
    width: 800px;
    margin: 30px auto;
    height: 550px;
    background-color: #804e49;
    border-radius: 5px;
    border: 2px solid #db5461;
    overflow: hidden;

}

.top_blocks {

    width: 30%;
    margin-left: 2%;
    height: 500px;
    background-color: #e7ac9c;
    margin-top: 20px;
    overflow: hidden;
    transition: 1s;
    border: 2px solid #db5461;
}



.top_blocks_img {
    width: 99.9%;
    height: 210px;
    background-color: #e3a7b1;
    margin: 0 auto;
    border-bottom: 2px solid #db5461;
}

.top_blocks_img img {
    width: 100%;
    height: 100%;
   }
.roulette {
    display: flex;
    width: 130%;

}

.roulette.active .top_blocks:nth-child(1){
    opacity: 0;
}
.roulette.active {
  transition: .8s 1s;
  transform:  translateX(-25%);
}

  </style>

  <script>

  </script>
</head>

<body>
<div id="top_services"><div class="roulette">

         <div class="top_blocks">
            <div class="top_blocks_img">
                <img src="https://i.ytimg.com/vi/9aY41D-ECsk/maxresdefault.jpg">
            </div>
         </div>
         <div class="top_blocks">
            <div class="top_blocks_img">
                <img src="http://99px.ru/sstorage/56/2017/12/mid_289604_687055.jpg">
            </div>

         </div>
         <div class="top_blocks">
            <div class="top_blocks_img">
               <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Canis_lupus_265b.jpg/265px-Canis_lupus_265b.jpg">
            </div>
         </div>
         <div class="top_blocks">
            <div class="top_blocks_img">
               <img src="http://bipbap.ru/wp-content/uploads/2017/05/687942_1445680363.jpg">
            </div>

         </div>
         </div>
</div>
<script>
 (function move(){
    var roulette = document.querySelector('.roulette'),
    top_blocks = roulette.querySelector('.top_blocks');
    roulette.classList.remove("active");
    roulette.appendChild(top_blocks);
     window.setTimeout(move,5000);
    window.setTimeout(function() {
    roulette.classList.add("active")
},1000);

})();
</script>


</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2018, 19:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,496

mishapod,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #top_services {
    width: 800px;
    margin: 30px auto;
    height: 550px;
    background-color: #804e49;
    border-radius: 5px;
    border: 2px solid #db5461;
    overflow: hidden;

}

.top_blocks {

    width: 30%;
    margin-left: 2%;
    height: 500px;
    background-color: #e7ac9c;
    margin-top: 20px;
    overflow: hidden;
    transition: .5s 1s;
    border: 2px solid #db5461;
}



.top_blocks_img {
    width: 99.9%;
    height: 210px;
    background-color: #e3a7b1;
    margin: 0 auto;
    border-bottom: 2px solid #db5461;
}

.top_blocks_img img {
    width: 100%;
    height: 100%;
    transition: 1s;
   }
.roulette {
    display: flex;
    width: 130%;

}
.roulette.active .top_blocks:nth-child(1) {
      transform:  translateY(550px);


}
.roulette.active .top_blocks:nth-child(1) img{
      transform: rotate(720deg) scale(0);


}
.roulette.active {
  transition: .8s 1s;
  transform:  translateX(-25%);
}

  </style>

  <script>

  </script>
</head>

<body>
<div id="top_services"><div class="roulette">

         <div class="top_blocks">
            <div class="top_blocks_img">
                <img src="https://i.ytimg.com/vi/9aY41D-ECsk/maxresdefault.jpg">
            </div>
         </div>
         <div class="top_blocks">
            <div class="top_blocks_img">
                <img src="http://99px.ru/sstorage/56/2017/12/mid_289604_687055.jpg">
            </div>

         </div>
         <div class="top_blocks">
            <div class="top_blocks_img">
               <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Canis_lupus_265b.jpg/265px-Canis_lupus_265b.jpg">
            </div>
         </div>
         <div class="top_blocks">
            <div class="top_blocks_img">
               <img src="http://bipbap.ru/wp-content/uploads/2017/05/687942_1445680363.jpg">
            </div>

         </div>
         </div>
</div>
<script>
 (function move(){
    var roulette = document.querySelector('.roulette'),
    top_blocks = roulette.querySelector('.top_blocks');
    roulette.classList.remove("active");
    roulette.appendChild(top_blocks);
     window.setTimeout(move,5000);
    window.setTimeout(function() {
    roulette.classList.add("active")
},1000);

})();
</script>


</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2018, 20:34
Интересующийся
Отправить личное сообщение для mishapod Посмотреть профиль Найти все сообщения от mishapod
 
Регистрация: 01.02.2017
Сообщений: 20

Спасибо, получил то что хотел.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как создать цитатник? WGN Общие вопросы Javascript 10 29.01.2017 00:39
Как поменять анимацию у этого слайдера? Гаджи Элементы интерфейса 3 15.09.2014 12:08
Мотоциклисты есть? l-liava-l Оффтопик 13 04.07.2014 12:35
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
Подскажите как можно реализовать такую анимацию картики ushakofff64rus Общие вопросы Javascript 2 10.09.2013 14:17