Адаптивная горизонтальная полноэкранная прокрутка div - PullRequest
Новая
       8

Адаптивная горизонтальная полноэкранная прокрутка div

0 голосов
/ 28 ноября 2018

Я ищу решение для добавления не-JS CSS3-анимации для конкретного проекта.

Эта анимация должна запускаться автоматически, прокручивать (по горизонтали) каждые 10 секунд на следующую страницу. 

<table style="width:100%">
  <tr>
    <th>First</th>
    <th>Second</th> 
    <th>Third</th>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td> 
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td> 
    <td>F</td>
  </tr>
</table>

Предположим, у нас есть три страницы с этим содержанием.Что было бы подходящим решением моей проблемы?

1 Ответ

0 голосов
/ 28 ноября 2018

Вы можете использовать margin-left для прокрутки.Но для этого, я полагаю, вам может потребоваться изменить html.

См. Фрагмент ниже: 

.page-container{
  animation: scroll 8s 2s infinite linear forwards;
  width:2000px;
}

.page {
  width:650px;
  height:200px;
  color:white;
  font-family:calibri;
  text-align:center;
  vertical-align:middle;
  line-height:60px;
  display:inline-block;
}
.one{
  background: #3A4662;
}

.two{
  background: #00827F;
}

.three{
  background: #580137;
}


@-webkit-keyframes scroll {
  10% {
    margin-left: 0px;
  }
  35%{
    margin-left: -650px;
  }
  50%{
    margin-left: -650px;
  }
  75%{
    margin-left: -1300px;
  }
  90%{
    margin-left: -1300px;
  }
  95%{
    margin-left:0px;
  }
  100% {
    margin-left: 0px;
  }
}
<div class="page-container">
  <div class="page one">
    <div>First</div>
    <div>A</div>
    <div>D</div>
  </div>
  <div class="page two">
    <div>Second</div> 
    <div>B</div> 
    <div>E</div> 
  </div>
  <div class="page three">
    <div>Third</div>
    <div>C</div>
    <div>F</div>
  </div>
</div>

Вы также можете проверить это здесь

...