CSS Text Slideshow - PullRequest
Новая
       7

CSS Text Slideshow

0 голосов
/ 27 апреля 2018

Я нашел фрагмент, который хочу использовать для моего сайта. Фрагмент - это текстовый слайдер с 3 полями. Вы можете увидеть это здесь: 

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body { 
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1, 
.item-2, 
.item-3 {
	position: absolute;
  display: block;
	top: 2em;
  
  width: 60%;
  
  font-size: 2em;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
<p class="item-1">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

Но для моего проекта мне нужно 4 текстовых поля. Я пытался откорректировать сценарий, но у меня есть ошибка, которую я не понимаю, почему. Если я добавлю другое текстовое поле, откорректирую класс текстового поля, отредактирую CSS и отрегулирую время текстовых полей, эффект слайда будет работать до тех пор, пока не появится последний (новый добавленный) слайд. Затем появляется первая строка, даже если последний слайд не закончен. Кто-нибудь может мне помочь выяснить, что я делаю не так? 

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body { 
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1, 
.item-2, 
.item-3,
.item-4 {
	position: absolute;
  display: block;
	top: 2em;
  
  width: 60%;
  
  font-size: 2em;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

.item-4{
	animation-name: anim-4;
}

@keyframes anim-1 {
	0%, 6.5% { left: -100%; opacity: 0; }
  6.5%,18.5% { left: 25%; opacity: 1; }
  25%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 25% { left: -100%; opacity: 0; }
  31.5%, 43.5% { left: 25%; opacity: 1; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75% { left: 110%; opacity: 0; }
}

@keyframes anim-4 {
	0%, 75% { left: -100%; opacity: 0; }
  81.5%, 93.5% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
<p class="item-1">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

<p class="item-4">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>

Привет

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Проблема заключается в том, чтобы определить шаги анимации, если вы посмотрите на CSS, есть один keyframe, определенный в процентах, как разделить анимацию. Как: 

@keyframes anim {
    0%, 6.5% { left: -100%; opacity: 0; }
  6.5%,18.5% { left: 25%; opacity: 1; }
  25%, 100% { left: 110%; opacity: 0; }
}

Процент в начале строки говорит:

Перейдите от ПЕРВОЕ ЗНАЧЕНИЕ к ВТОРОЕ ЗНАЧЕНИЕ и завершите его (следуйте следующей строкой).

Если вы посмотрите на keyframe 3, вы не определили последнее значение в процентах, поэтому, если вы добавите его, оно будет работать хорошо. Полный код ниже.

От: 

@keyframes anim-3 {
    0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75% { left: 110%; opacity: 0; }
}

Кому: 

@keyframes anim-3 {
    0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75%, 100% { left: 110%; opacity: 0; }
}


@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body { 
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1, 
.item-2, 
.item-3,
.item-4 {
	position: absolute;
  display: block;
	top: 2em;
  
  width: 60%;
  
  font-size: 2em;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

.item-4{
	animation-name: anim-4;
}

@keyframes anim-1 {
	0%, 6.5% { left: -100%; opacity: 0; }
  6.5%,18.5% { left: 25%; opacity: 1; }
  25%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 25% { left: -100%; opacity: 0; }
  31.5%, 43.5% { left: 25%; opacity: 1; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-4 {
	0%, 75% { left: -100%; opacity: 0; }
  81.5%, 93.5% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
<p class="item-1">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

<p class="item-4">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>
0 голосов
/ 27 апреля 2018

Небольшие изменения в вашем коде. Вы пропустили второй параметр в anim-3 keyframes, чтобы удалить этот текст с экрана 

@keyframes anim-3 {
        0%, 50% { left: -100%; opacity: 0; }
      56.5%, 68.5% { left: 25%; opacity: 1; }
      75%, 100% { left: 110%; opacity: 0; }

    }


@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body { 
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1, 
.item-2, 
.item-3,
.item-4 {
	position: absolute;
  display: block;
	top: 2em;
  
  width: 60%;
  
  font-size: 2em;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

.item-4{
	animation-name: anim-4;
}

@keyframes anim-1 {
	0%, 6.5% { left: -100%; opacity: 0; }
  6.5%,18.5% { left: 25%; opacity: 1; }
  25%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 25% { left: -100%; opacity: 0; }
  31.5%, 43.5% { left: 25%; opacity: 1; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75%, 100% { left: 110%; opacity: 0; }
  
}

@keyframes anim-4 {
	0%, 75% { left: -100%; opacity: 0; }
  81.5%, 93.5% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
<p class="item-1">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

<p class="item-4">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>
...