подскажите или дайте пример как добиться такой анимации,нужно 1 в 1.Смена слова не по действию а смена слова через 5 секунд .
4 ответа
Вам может помочь интервал со встроенным Если, счетчик-объект и функция, меняющая элемент 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>
Едва ли тут что-то можно понять, но раз уж сделал - выкладываю. Вся проблема в том, что левая и правая сторона текста подгоняется под размер центральной. Получается нужно прятать все остальные фразы и 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 </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"> 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>
-
я тоже сделал только без анимации: codepen.io/topicstarter/pen/ZEGjxWp 20 мар 2020 в 12:41
Вот было у меня в заначке. Оно?
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>
-
там слайдер вроде бы - не просто текст переключается но ещё и изображение, это чётко видно на видео 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– Material23 мар 2020 в 15:42
Как вариант ...семейной счастливой жизни :)
$(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>
-
Тут текст плавно появляется,а мне нужно что бы была анимация перелистывания слов и без слайдера– Material23 мар 2020 в 15:38
vertical: true