3

подскажите или дайте пример как добиться такой анимации,нужно 1 в 1.Смена слова не по действию а смена слова через 5 секунд .

https://skrinshoter.ru/v/190320/EVQowOk7

1
  • Если как на видео, то в сторону слайдеров посмотри. Например slick slider с опцией vertical: true 19 мар 2020 в 22:09

4 ответа 4

2

Вам может помочь интервал со встроенным Если, счетчик-объект и функция, меняющая элемент HTML в интервале.

UPD: поправил проблему задвоенного интервала на начале каждого обнуления счетчика.
UPD2: добавил анимацию, подключив anime.js, но не точь в точь ту, которую просил автор вопроса. Прошу самому заменить opacity на translateY.

/* VARS */
let words = ["good", "awesome", "modern", "JS"];
let text = document.getElementsByClassName('text');
let count = {
  value: 1 //начинаем заполнять с 1 элем массива
}; //приводим счетчик как объект, чтобы менять его откуда угодно

/* FUNCTIONS */
let animation = (elem) => { //anime.js
  anime({
    targets: elem,
    opacity: [{
      value: [0, 1],
      duration: 200
    }, {
      value: [1, 0],
      delay: 3700,
      duration: 500
    }],
    easing: 'easeInOutSine',
  })
}

let changeText = (field, textArr, count) => {
  if (count.value >= textArr.length) count.value = 0; //проверяем счетчик
  field[0].innerHTML = `${textArr[count.value]}`;
  animation(field[0]);
  return count.value += 1;
}

/* MAIN */
text[0].innerHTML = `${words[count.value-1]}`; //заполняем 0 элем
animation(text[0]);

setInterval(() => changeText(text, words, count), 5000);
.text {
  border-bottom: 2px solid White;
}

* {
  background-color: black;
  color: white;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
<div>
  <p> This is <span class="text"></span> example! </p>
</div>

2
  • вы не правильно поняли вопрос, нужна анимация, а не простое переключение
    – meine
    20 мар 2020 в 7:43
  • @meine Вы имели ввиду простая анимация, а не логика переключения?
    – letUser
    20 мар 2020 в 9:25
2

Едва ли тут что-то можно понять, но раз уж сделал - выкладываю. Вся проблема в том, что левая и правая сторона текста подгоняется под размер центральной. Получается нужно прятать все остальные фразы и css превращается в кашу )

const bg_list = document.querySelector('.slider__bg-list')
const btn_t = document.querySelector('#top')
const btn_b = document.querySelector('#bottom')
const slider = document.querySelector('.slider')

const MAX = 5
const MIN = 0

let current_slide = 0
let previous_slide = 0

slider.dataset.stage = current_slide > previous_slide ? `${current_slide}-bottom` : `${current_slide}-top`

btn_t.addEventListener('click', translate)
btn_b.addEventListener('click', translate)

function translate(e) {
  const tmp = e.currentTarget.id == 'top' ? current_slide - 1 : current_slide + 1

  if (tmp >= MIN && tmp < MAX) {
    previous_slide = current_slide
    current_slide = tmp
  } else return

  slider.dataset.stage = current_slide > previous_slide ? `${current_slide}-bottom` : `${current_slide}-top`

  bg_list.style.transform = `scale(1) translateY(-${current_slide * 100}%)`
  setTimeout(() => {
    bg_list.style.transform = `scale(1.1) translateY(-${current_slide * 100}%)`
  }, 500)
}
* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: grid;
  align-items: center;
  background-color: black;
}

.slider {
  width: 100%;
  height: 50vh;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: "btn-t" "text" "btn-b";
  overflow: hidden;
}

.slider__bg-list {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  list-style: none;
  transform: scale(1.1);
  transition-duration: 0.5s;
  z-index: -1;
}

.slider__bg-list__item {
  min-height: 100%;
  background-size: cover;
  background-position: center;
}

.slider__bg-list__item_1 {
  background-image: url(https://images.unsplash.com/photo-1550684376-efcbd6e3f031?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
}

.slider__bg-list__item_2 {
  background-image: url(https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
}

.slider__bg-list__item_3 {
  background-image: url(https://images.unsplash.com/photo-1517241034903-9a4c3ab12f00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
}

.slider__bg-list__item_4 {
  background-image: url(https://images.unsplash.com/photo-1506318137071-a8e063b4bec0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1070&q=80);
}

.slider__bg-list__item_5 {
  background-image: url(https://images.unsplash.com/photo-1527843812948-a8c2ddd2fb68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
}

.slider__text {
  grid-area: text;
  align-self: center;
  justify-self: center;
  display: flex;
  text-transform: uppercase;
  font-size: 4vw;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
}

.slider__text__static {}

.slider__text__changeable {
  position: relative;
}

.slider__text__changeable__wrapper {
  position: relative;
  overflow: hidden;
}

.slider__text__changeable::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  background-color: white;
  z-index: 1;
}

.slider__text__changeable__item {
  display: none;
  width: max-content;
  --transition: 0.3s;
}

.slider__button {
  width: 10vw;
  height: 5vh;
  align-self: center;
  justify-self: center;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

.slider__button_top {
  grid-area: btn-t;
}

.slider__button_bottom {
  grid-area: btn-b;
}

.slider[data-stage="0-top"] .slider__text__changeable__item:nth-child(1) {
  display: block;
}

.slider[data-stage="1-bottom"] .slider__text__changeable__item:nth-child(2),
.slider[data-stage="2-bottom"] .slider__text__changeable__item:nth-child(3),
.slider[data-stage="3-bottom"] .slider__text__changeable__item:nth-child(4),
.slider[data-stage="4-bottom"] .slider__text__changeable__item:nth-child(5) {
  display: block;
  animation: showPhraseCenter var(--transition) both;
}

.slider[data-stage="1-bottom"] .slider__text__changeable__item:nth-child(1),
.slider[data-stage="3-bottom"] .slider__text__changeable__item:nth-child(3) {
  position: absolute;
  display: block;
  animation: hidePhraseLeft var(--transition) both;
}

.slider[data-stage="2-bottom"] .slider__text__changeable__item:nth-child(2),
.slider[data-stage="4-bottom"] .slider__text__changeable__item:nth-child(4) {
  position: absolute;
  display: block;
  animation: hidePhraseRight var(--transition) both;
}


/*------------------------ */

.slider[data-stage="3-top"] .slider__text__changeable__item:nth-child(5),
.slider[data-stage="2-top"] .slider__text__changeable__item:nth-child(4),
.slider[data-stage="1-top"] .slider__text__changeable__item:nth-child(3),
.slider[data-stage="0-top"] .slider__text__changeable__item:nth-child(2) {
  display: block;
  position: absolute;
  top: 0;
  animation: hidePhraseCenter var(--transition) both;
}

.slider[data-stage="3-top"] .slider__text__changeable__item:nth-child(4),
.slider[data-stage="1-top"] .slider__text__changeable__item:nth-child(2) {
  display: block;
  animation: showPhraseRight var(--transition) both;
}

.slider[data-stage="2-top"] .slider__text__changeable__item:nth-child(3),
.slider[data-stage="0-top"] .slider__text__changeable__item:nth-child(1) {
  display: block;
  animation: showPhraseLeft var(--transition) both;
}

@keyframes showPhraseCenter {
  from {
    transform: translate(0, 100%);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes showPhraseLeft {
  from {
    transform: translate(-14%, -100%);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes showPhraseRight {
  from {
    transform: translate(14%, -100%);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes hidePhraseLeft {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-14%, -100%);
  }
}

@keyframes hidePhraseRight {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(14%, -100%);
  }
}

@keyframes hidePhraseCenter {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 100%);
  }
}
<div class="slider">
  <ul class="slider__bg-list">
    <li class="slider__bg-list__item slider__bg-list__item_1"></li>
    <li class="slider__bg-list__item slider__bg-list__item_2"></li>
    <li class="slider__bg-list__item slider__bg-list__item_3"></li>
    <li class="slider__bg-list__item slider__bg-list__item_4"></li>
    <li class="slider__bg-list__item slider__bg-list__item_5"></li>
  </ul>

  <div class="slider__text">
    <div class="slider__text__static">We make&nbsp;</div>
    <div class="slider__text__changeable">
      <div class="slider__text__changeable__wrapper">
        <div class="slider__text__changeable__item slider__text__changeable__item_shown">
          you curse
        </div>
        <div class="slider__text__changeable__item slider__text__changeable__item_dn">
          you skin care
        </div>
        <div class="slider__text__changeable__item slider__text__changeable__item_dn">
          mums pray
        </div>
        <div class="slider__text__changeable__item slider__text__changeable__item_dn">
          future homes
        </div>
        <div class="slider__text__changeable__item slider__text__changeable__item_dn">
          you drink
        </div>
      </div>
    </div>
    <div class="slider__text__static">&nbsp;and we love it.</div>
  </div>

  <button id="top" class="slider__button slider__button_top">
        <svg width="24" height="14">
          <path fill="none" stroke-width="3" stroke-linejoin="round"  stroke="white"
           d="M0 14 L12 2 L 24 14"/>
        </svg>
      </button>
  <button id="bottom" class="slider__button slider__button_bottom">
        <svg width="24" height="14">
          <path fill="none" stroke-width="3" stroke-linejoin="round" stroke="white"
           d="M0 0 L12 12 L 24 0"/>
        </svg>
      </button>
</div>

1
1

Вот было у меня в заначке. Оно?

body {
  width: 100%;
  height: 100%;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  height: 160px;
  overflow: hidden;
  font-size: 35px;
  line-height: 40px;
  color: black;
}

.content__container {
  font-weight: 600;
  overflow: hidden;
  height: 40px;
}

.content__container__text {
  display: inline-block;
  float: left;
  margin: 0;
}

.content__animate {
  display: inline-block;
}

.content__container__list {
  display: inline-block;
  margin-top: 0;
  padding-left: 10px;
  text-align: left;
  list-style: none;
  animation-name: change;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}

.content__container__list__item {
  line-height: 40px;
  margin: 0;
}

@keyframes change {
  0%,
  12.66%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  16.66%,
  29.32% {
    transform: translate3d(0, -25%, 0);
  }
  33.32%,
  45.98% {
    transform: translate3d(0, -50%, 0);
  }
  49.98%,
  62.64% {
    transform: translate3d(0, -75%, 0);
  }
  66.64%,
  79.3% {
    transform: translate3d(0, -50%, 0);
  }
  83.3%,
  95.96% {
    transform: translate3d(0, -25%, 0);
  }
}
<div class="content">
  <div class="content__container">
    <div class="content__container__text">
      Наша семья это:
    </div>
    <div class="content__animate">
      <ul class="content__container__list">
        <li class="content__container__list__item">мама</li>
        <li class="content__container__list__item">папа</li>
        <li class="content__container__list__item">я</li>
        <li class="content__container__list__item">и кошка!</li>
      </ul>
    </div>
  </div>
</div>

3
  • там слайдер вроде бы - не просто текст переключается но ещё и изображение, это чётко видно на видео 20 мар 2020 в 11:07
  • надо что то типа вот этого: codepen.io/topicstarter/pen/ZEGjxWp только с анимацией 20 мар 2020 в 12:37
  • Не могу добавить бордер,так же когда делаешь font-size: 48px font-faily: Ubuntu font-weight:Bold иногда появляется низ букв предыдущего слова и слова съезжают imgur.com/a/znnOvhX
    – Material
    23 мар 2020 в 15:42
1

Как вариант ...семейной счастливой жизни :)

$(document).ready(function() {
  setInterval(function() {
    $(".carousel__inner").animate({
      top: "0"
    }, 0).delay(3000).animate({
      top: "-100vh"
    }, 1000).delay(3000).animate({
      top: "-200vh"
    }, 1000).delay(3000).animate({
      top: "-300vh"
    }, 1000).delay(3000).animate({
      top: "-200vh"
    }, 1000).delay(3000).animate({
      top: "-100vh"
    }, 1000).delay(3000).animate({
      top: "0"
    }, 1000);
  }, 0);
});
(function() {
  var words = [
      'мама',
      'папа',
      'я',
      'и кошка',
      'я',
      'папа'
    ],
    i = 0;
  setInterval(function() {
    $('#words').fadeOut(function() {
      $(this).html(words[i = (i + 1) % words.length]).fadeIn();
    });
  }, 4000);
})();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
}

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.carousel__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 400vh;
  transition: all 0.3s linear;
}

.slide {
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.slide:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}

.slide_01 {
  background: url('https://thecoupleconnection.net/wp-content/uploads/2019/09/Mothers.jpg') center center no-repeat;
  background-size: cover;
}

.slide_02 {
  background: url('https://avatars.mds.yandex.net/get-zen_doc/1056701/pub_5d45d544ce44a000ad965bba_5d45dc8c7cccba00ad56edc5/scale_1200') center center no-repeat;
  background-size: cover;
}

.slide_03 {
  background: url('https://viartannie.org/images/Вінаграднік/_вучыцца_любіць/2.jpg') center center no-repeat;
  background-size: cover;
}

.slide_04 {
  background: url('https://avatars.mds.yandex.net/get-pdb/812271/1ebe7de2-ac70-4ede-a890-d7fa0fdc92f6/s1200') center center no-repeat;
  background-size: cover;
}

.content {
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 30px;
  color: white;
  font-family: monospace;
}

.content__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.3s linear;
  height: 40px;
}

.words {
  border-bottom: 6px solid white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">
  <div class="carousel__inner" role="listbox">
    <div class="slide slide_01">
    </div>
    <div class="slide slide_02">
    </div>
    <div class="slide slide_03">
    </div>
    <div class="slide slide_04">
    </div>
  </div>
</div>

<div class="content">
  <div class="content__inner">
    <p>Наша семья это: <span class="words"><span id="words">мама</span></span> !</p>
  </div>
</div>

1
  • Тут текст плавно появляется,а мне нужно что бы была анимация перелистывания слов и без слайдера
    – Material
    23 мар 2020 в 15:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.