Контроль количества времени прокрутки текста с использованием CSS3, приведенного в этой ссылке - PullRequest
Новая
       13

Контроль количества времени прокрутки текста с использованием CSS3, приведенного в этой ссылке

0 голосов
/ 08 июня 2019

Я использую Звездные войны, прокручивая текст, как представлено в этой ссылке; 

https://codepen.io/scottbram/pen/KuHsl

Теперь, мой текстовый контент мал, поэтому время ожидания зацикливания текста велико.Имея ограниченные знания CSS3, я пытался изменить такие параметры, как -webkit-animation scroll и т. Д., Но все же мне нужно подождать около 20 секунд, чтобы появился цикл.

Как сделать так, чтобы текст снова отображался каккак только нижняя часть текста прокручивается.Вот ссылка, которая содержит меньше текста.Если вы видите, время ожидания исходного текста велико; 

https://codepen.io/anon/pen/gJVLgw

Codepen CSS для справки 

@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);

* { padding: 0; margin: 0; }

body, html
{
  width: 100%;
  height: 100%;
  font-family: "Droid Sans", arial, verdana, sans-serif;
    font-weight: 700;
    color: #ff6;
    background-color: #000;
    overflow: hidden;
}

p#start
{
    position: relative;
    width: 16em;
    font-size: 200%;
    font-weight: 400;
    margin: 20% auto;
    color: #4ee;
    opacity: 0;
    z-index: 1;
    -webkit-animation: intro 2s ease-out;
    -moz-animation: intro 2s ease-out;
    -ms-animation: intro 2s ease-out;
    -o-animation: intro 2s ease-out;
    animation: intro 2s ease-out;
}

@-webkit-keyframes intro {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

@-moz-keyframes intro {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

@-ms-keyframes intro {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

@-o-keyframes intro {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes intro {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

h1
{
    position: absolute;
    width: 2.6em;
    left: 50%;
    top: 25%;
    font-size: 10em;
    text-align: center;
    margin-left: -1.3em;
    line-height: 0.8em;
    letter-spacing: -0.05em;
    color: #000;
    text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
    opacity: 0;
    z-index: 1;
    -webkit-animation: logo 5s ease-out 2.5s;
    -moz-animation: logo 5s ease-out 2.5s;
    -ms-animation: logo 5s ease-out 2.5s;
    -o-animation: logo 5s ease-out 2.5s;
    animation: logo 5s ease-out 2.5s;
}

h1 sub
{
    display: block;
    font-size: 0.3em;
    letter-spacing: 0;
    line-height: 0.8em;
}

@-webkit-keyframes logo {
    0% { -webkit-transform: scale(1); opacity: 1; }
    50% { opacity: 1; }
    100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes logo {
    0% { -moz-transform: scale(1); opacity: 1; }
    50% { opacity: 1; }
    100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes logo {
    0% { -ms-transform: scale(1); opacity: 1; }
    50% { opacity: 1; }
    100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes logo {
    0% { -o-transform: scale(1); opacity: 1; }
    50% { opacity: 1; }
    100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes logo {
    0% { transform: scale(1); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: scale(0.1); opacity: 0; }
}

/* the interesting 3D scrolling stuff */
#titles
{
    position: absolute;
    width: 18em;
    height: 50em;
    bottom: 0;
    left: 50%;
    margin-left: -9em;
    font-size: 350%;
    text-align: justify;
    overflow: hidden;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: perspective(300px) rotateX(25deg);
    -moz-transform: perspective(300px) rotateX(25deg);
    -ms-transform: perspective(300px) rotateX(25deg);
    -o-transform: perspective(300px) rotateX(25deg);
    transform: perspective(300px) rotateX(25deg);
}

#titles:after
{
    position: absolute;
    content: ' ';
    left: 0;
    right: 0;
    top: 0;
    bottom: 60%;
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    pointer-events: none;
}

#titles p
{
    text-align: justify;
    margin: 0.8em 0;
}

#titles p.center
{
    text-align: center;
}

#titles a
{
    color: #ff6;
    text-decoration: underline;
}

#titlecontent
{
    position: absolute;
    top: 100%;
    -webkit-animation: scroll 100s linear 4s infinite;
    -moz-animation: scroll 100s linear 4s infinite;
    -ms-animation: scroll 100s linear 4s infinite;
    -o-animation: scroll 100s linear 4s infinite;
    animation: scroll 100s linear 4s infinite;
}

/* animation */
@-webkit-keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
}

@-moz-keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
}

@-ms-keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
}

@-o-keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
}

@keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
}
...