W jaki sposób animacja może przesuwać się po ekranie?

pytanie zadane 5 grudnia 2020 w HTML i CSS przez nowa Początkujący (450 p.)

Hej, chciałabym stworzyć animację (będzie się odtwarzać przed załadowaniem strony ) w wordpressie w której tekst/kod będzie przesuwał się jak na tym gifie https://tenor.com/view/cyberpunk-hacker-gif-5648648.

Jeśli chodzi o szczegóły to będzie wyglądać to tak, ale wystarczy mi podpowiedź co zrobić w css i js by kod przewijał się:

Tekst "Veryfing IP..." (kropki migają) i po chwili pojawia się kod.
Znów pojawia się napis "Checking location..." i znów przewija się kod.
POjawia się słowo "Connected" (w ramce).

Z góry dziękuję za pomoc :)

2 odpowiedzi

odpowiedź 5 grudnia 2020 przez DawidK Nałogowiec (37,910 p.)

Najłatwiej chyba będzie gdy podzielisz sobie animacja na małe fragmenty i dokladnie rozpiszesz co się w nich dzieje:

Zakładając, że animacja składała się z następujących elementów:

a) główny div

b) tekst " Veryfing IP... " (z kropkami)

c) mały prostokąt, który będzie zasłaniał kropki i przesuwając się skokowo zmieniając swój margin lub wielkość i je odsłaniał (dzięki temu uzyskasz animacje migających kropek)

d) div w którym będzie znajdować się tekst kodu 1 (z overflow hidden)

e) sam tekst kodu 1 zmieniając jego górny margin na ujemny i wykorzystując overflow kontenera uzyskasz efekt przesuwania kodu jak z przykładu, który przesłałaś, przyda się też steps()

f) tekst " Checking location... " (z kropkami)

g) mały prostokąt, który będzie zasłaniał kropki i przesuwając się zmieniając swój margin lub wielkość i je odsłaniał (dzięki temu uzyskasz animacje migających kropek)

h) div w którym będzie znajdować się tekst kodu 2 (z overflow hidden)

i) sam tekst kodu 2 zmieniając jego górny margin i wykorzystując overflow kontenera uzyskasz efekt przesuwania kodu jak z przykładu, który przesłałaś przyda się też steps()

j) tekst connected (ramke uzyskasz przez border + padding)

Teraz trzeba się pozmożdżać co jest kiedy widoczne i przygotować poszczególne animacje, ważne, że display się nie animuje (przynajmniej z tego co wiem) i trzeba wykorzystywać height, opacity lub color aby uzyskać efekt, że coś jest niewidoczne.

Poniżej fragment jak mniej więcej bym to zrobił dla pierwszego tekstu i kodu.

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        .screen {
            background-color: #000;
            height: 500px;
            position: absolute;
            width: 500px;
        }

        .text-ip {
            animation: show-hidden-text-ip 8s linear infinite;
            color: #0F0;
            font-size: 20px;
            margin-left: 20px;
            margin-top: 20px;
            position: relative;
        }

        .dots-hidden-box {
            animation: display-dots 2s linear infinite;
            background-color: black;
            display: inline-block;
            height: 5px;
            margin-left: -15px;
            width: 20px;
        }

        .code-1-box {
            height: 380px;
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 20px;
            overflow: hidden;
            position: relative;
        }

        .code-1-text {
            animation: move-code-1 8s steps(20) infinite;
            color: #000;
            margin-top: 0;
        }

        @keyframes show-hidden-text-ip {
            0% {
                color: #0F0;
            }

            49% {
                color: #0F0;
            }

            50% {
                color: #000;
                height: 0;
            }

            100% {
                color: #000;
                height: 0;
            }
        }

        @keyframes display-dots {
            0% {
                margin-left: -15px;
            }

            33% {
                margin-left: -10px;
            }

            66% {
                margin-left: -5px;
            }

            100% {
                margin-left: 0px;
            }
        }

        @keyframes move-code-1 {
            0% {
                margin-top: 0px;
                color: #000;
            }

            49% {
                color: #000;
            }

            50% {
                color: #0F0;
            }

            99% {
                color: #0F0;
            }

            100% {
                color: #000;
                margin-top: -900px;
            }

        }
    </style>
</head>

<body>
    <div class='screen'>
        <p class='text-ip'>Veryfing IP...<span class='dots-hidden-box'></span></p>
        <div class='code-1-box'>
            <p class='code-1-text'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec felis feugiat augue ullamcorper
                sodales a
                vitae lorem. Curabitur quis magna at ligula tincidunt iaculis. Etiam vehicula lacinia ligula, ut
                consequat
                lectus hendrerit dictum. Etiam orci ex, tempor in consectetur sit amet, congue eget elit. Donec at arcu
                ipsum. Phasellus bibendum justo a quam ultricies, vel volutpat erat consequat. Pellentesque sodales
                euismod
                nulla, non commodo neque vestibulum eget. Nulla nec sapien pharetra, pulvinar lacus eu, pretium odio.
                Nam
                vel quam finibus, tristique turpis sed, tempus lorem. Etiam at vulputate arcu. Integer quis eros ac
                nulla
                tincidunt pharetra et ac sem. Etiam mollis dapibus ultrices. Proin ac hendrerit leo, id luctus orci.

                Fusce nisi sapien, tincidunt vel sollicitudin faucibus, pretium in est. Cras et ligula mattis,
                vestibulum
                metus et, porttitor tortor. Donec dui libero, sodales quis lorem sit amet, ullamcorper sollicitudin
                nisi. Ut
                convallis vehicula tellus, et rutrum lorem ullamcorper et. Ut sem sapien, ultricies at gravida non,
                iaculis
                eget odio. Ut vitae convallis neque. Donec eros nunc, vulputate et maximus faucibus, dapibus a eros.

                In non orci vel nisi euismod luctus. Orci varius natoque penatibus et magnis dis parturient montes,
                nascetur
                ridiculus mus. Curabitur eu pharetra ante. Phasellus egestas id dolor quis eleifend. Aliquam non tellus
                sapien. Duis justo lorem, elementum vitae egestas vitae, fermentum et odio. Donec ipsum felis, vulputate
                ut
                euismod in, rhoncus at urna. Donec in maximus orci, vel vehicula erat. In luctus eget sapien viverra
                vestibulum. Proin semper, arcu non suscipit commodo, odio tortor elementum eros, a egestas tellus tellus
                id
                enim. Vestibulum vehicula vel neque ut suscipit. Nulla imperdiet felis non ultricies lacinia.

                Nam viverra ullamcorper dui, eu tristique risus condimentum non. Morbi id urna quis mauris porttitor
                imperdiet. Curabitur blandit at lectus a finibus. Donec vitae quam porttitor, dapibus nisl ultrices,
                tempor
                nisl. Pellentesque vel viverra odio. Sed luctus scelerisque vestibulum. Pellentesque non malesuada urna.
                Aenean tincidunt, sapien id aliquam dignissim, eros nisi ullamcorper tellus, nec porta est justo id
                lacus.

                Donec non ullamcorper risus. Phasellus rutrum, ante sit amet tempus maximus, nunc leo sodales urna,
                sollicitudin laoreet magna lectus maximus dolor. Praesent tempor semper lectus, viverra aliquet enim
                sodales
                vitae. Sed maximus in justo eget consequat. Vivamus porta eros ac lorem congue, et accumsan magna
                tempor.
                Suspendisse et varius nunc. Ut nec tortor ante. Nulla sagittis malesuada nibh, et interdum nisi.
                Suspendisse
                consequat metus euismod, posuere nisi nec, vulputate risus.

                Nullam finibus lorem eu lorem commodo, eu rhoncus lacus euismod. Aliquam erat volutpat. Maecenas varius
                euismod sollicitudin. Nullam iaculis sapien at mauris ultrices, vitae imperdiet magna sollicitudin.
                Aenean
                vehicula aliquam elit, non accumsan odio consequat sed. Ut aliquam, ligula et hendrerit blandit, lorem
                nisi
                tempor dolor, ut ullamcorper justo diam id nulla. Vivamus nec vulputate neque. Phasellus posuere tortor
                ut
                turpis porttitor mattis. Fusce vestibulum ligula sit amet augue maximus, non eleifend ex hendrerit.
                Nullam
                ultricies ex vitae turpis porttitor, vitae egestas ipsum egestas. In porta auctor nunc, eu vulputate
                nisi
                fermentum eu. Proin at aliquam justo. Proin eu sollicitudin urna. Duis dui lorem, laoreet posuere tellus
                laoreet, iaculis faucibus metus. Donec est orci, blandit ac mattis quis, rutrum dapibus massa. In semper
                viverra diam, et consequat erat sollicitudin vitae.

                Cras mollis ex ac sollicitudin tempus. Pellentesque ultricies libero ante, vel ultrices lectus suscipit
                a.
                In pharetra viverra semper. Vestibulum fringilla laoreet erat, eu sollicitudin ante bibendum semper.
                Phasellus faucibus enim neque, in tincidunt dui fermentum a. Phasellus dictum efficitur eros, eget
                sollicitudin odio. Cras pulvinar ullamcorper euismod. Morbi at quam turpis. Vestibulum ornare arcu
                neque, a
                aliquet velit rhoncus ut. Fusce in molestie ipsum, in fringilla eros. Integer pretium gravida magna, vel
                aliquet elit. Vivamus vitae libero a augue convallis luctus vel eget nisl.

                Maecenas ullamcorper dignissim tortor vel pellentesque. Duis justo nisi, viverra a leo at, aliquam
                consequat
                mauris. Mauris scelerisque vestibulum nisl eget gravida. Maecenas viverra mollis magna, a pulvinar neque
                accumsan eget. Nulla id odio sollicitudin, rhoncus massa nec, tincidunt dolor. Fusce a consectetur nisl,
                et
                hendrerit nisi. Morbi pharetra purus dolor. Aliquam gravida fringilla justo ut semper. Duis vitae purus
                eget
                nunc elementum facilisis quis sed erat. Mauris rutrum magna sed accumsan vehicula. Praesent interdum in
                erat
                a dictum.
            </p>
        </div>
</body>

</html>

komentarz 6 grudnia 2020 przez nowa Początkujący (450 p.)

Dzięki wielkie z pomoc :)

odpowiedź 6 grudnia 2020 przez VBService Ekspert (253,340 p.)
edycja 6 grudnia 2020 przez VBService

Proponuję jako modal box. Codepen

<!DOCTYPE html>
<html lang="pl">
  <head>
  
  <style>
    @charset "UTF-8";
    @viewport {
      width: device-width;
      initial-scale: 1;
    }
    *, *:before, *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .load-page-modal {
      display: block;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.91);
    }
    .load-page-modal-content {
      margin: 0;
      padding: 1.5em;
      width: 80vw;
      height: 60vh;
      background-color: rgba(1,1,1,0.99);
      background-repeat: no-repeat;
      background-origin: border-box;
      color: limegreen;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .load-page-modal-message {
      font-family: "Lucida Console", monospace;
      font-size: 1.4em;  
      border: 0;
      background-color: rgba(1,1,1,0.79);
    }
    .load-page-modal-message-dots {
      font-family: "Lucida Console", monospace;
      font-size: 1.6em;
      padding-left: 0.2em;
      background-color: rgba(1,1,1,0.79);
    }
    .load-page-modal-message-dots:after {
      content: '';
      animation: blinking_dots 1.5s 1s infinite;
    }
    @keyframes blinking_dots {
      0% {
        content: '';
      }
      20% {
        content: '.';
      }
      40% {
        content: '..';
      }
      60% {
        content: '...';
      }
      80% {
        content: '....';
      }
    }
    .load-page-modal-message-connected {
      font-size: 1.6em;
      padding: 1em;
      border: 2px solid limegreen;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: tick_movement 1.2s infinite;
    }
    @keyframes tick_movement {
      0% { transform: translate(-50%, -52%); }
      20% { transform: translate(-50%, -50%); }
      40% { transform: translate(-50%, -53%); }
      60% { transform: translate(-50%, -50%); }
      80% { transform: translate(-50%, -48%); }
      100% { transform: translate(-50%, -50%); }
    }
    .img-load-page-modal-1 {
      background: url('http://www.psd-dude.com/tutorials/matrix-effect-animation-gif-photoshop-tutorial/matrix-rain-effect-animation-photoshop-editor.gif');
    }
    .img-load-page-modal-2 {
      background: url('https://media.giphy.com/media/12W5Sg2koWYnwA/giphy.gif');
    }
    .hide-modal {
      display: none;
    }
    body {
      color: gray;
    }
  </style>
  </head>
  <body>
    <div class="load-page-modal">
      <div class="load-page-modal-content">
        <span class="load-page-modal-message"></span>
        <span class="load-page-modal-message-dots"></span>
      </div>
    </div>
    <script>
      const modal_container = document.querySelector('.load-page-modal');
      const modal_content = document.querySelector('.load-page-modal-content');
      const modal_message = document.querySelector('.load-page-modal-message');
      const modal_message_dots = document.querySelector('.load-page-modal-message-dots');

      //let random = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; }
      //modal_content.classList.add(`img-load-page-modal-${random(1, 2)}`);
      modal_content.classList.add('img-load-page-modal-1');

      let message = '';
      let counter = 0;
      let id_interval = setInterval(() => {
        switch(counter) {
          case 0: // zero sekund
            message = 'Verifying IP';
            break;
          case 5: // po 5 sekundach
            message = 'Checking location';
            break;
          case 10: // po 10 sekundach      
            modal_message_dots.classList.remove('load-page-modal-message-dots');
            message = 'Connected';
            modal_message.classList.add('load-page-modal-message-connected');
            break;
          case 15: // po 15 sekundach
            modal_container.classList.add('hide-modal');
            clearInterval(id_interval);
            break;
        }

        counter++;
        modal_message.textContent = message; 
      }, 1000)
    </script>

    <!-- Reszta kodu strony -->
      <p><h3>Czym jest Lorem Ipsum?</h3>
      Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</p>

    <p><h3>Do czego tego użyć?</h3>
    Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że ma wiele różnych „kombinacji” zdań, słów i akapitów, w przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt czytelnie” po polsku. Wielu webmasterów i designerów używa Lorem Ipsum jako domyślnego modelu tekstu i wpisanie w internetowej wyszukiwarce ‘lorem ipsum’ spowoduje znalezienie bardzo wielu stron, które wciąż są w budowie. Wiele wersji tekstu ewoluowało i zmieniało się przez lata, czasem przez przypadek, czasem specjalnie (humorystyczne wstawki itd).</p>

    <p><h3>Skąd się to wzięło?</h3>
    W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. Ma ono korzenie w klasycznej łacińskiej literaturze z 45 roku przed Chrystusem, czyli ponad 2000 lat temu! Richard McClintock, wykładowca łaciny na uniwersytecie Hampden-Sydney w Virginii, przyjrzał się uważniej jednemu z najbardziej niejasnych słów w Lorem Ipsum – consectetur – i po wielu poszukiwaniach odnalazł niezaprzeczalne źródło: Lorem Ipsum pochodzi z fragmentów (1.10.32 i 1.10.33) „de Finibus Bonorum et Malorum”, czyli „O granicy dobra i zła”, napisanej właśnie w 45 p.n.e. przez Cycerona. Jest to bardzo popularna w czasach renesansu rozprawa na temat etyki. Pierwszy wiersz Lorem Ipsum, „Lorem ipsum dolor sit amet...” pochodzi właśnie z sekcji 1.10.32.</p>

    <p>Standardowy blok Lorem Ipsum, używany od XV wieku, jest odtworzony niżej dla zainteresowanych. Fragmenty 1.10.32 i 1.10.33 z „de Finibus Bonorum et Malorum” Cycerona, są odtworzone w dokładnej, oryginalnej formie, wraz z angielskimi tłumaczeniami H. Rackhama z 1914 roku.</p>

    <p><h3>Skąd to wziąć?</h3>
    Jest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanego humoru czy przypadkowych słów, które nawet w najmniejszym stopniu nie przypominają istniejących. Jeśli masz zamiar użyć fragmentu Lorem Ipsum, lepiej mieć pewność, że nie ma niczego „dziwnego” w środku tekstu. Wszystkie Internetowe generatory Lorem Ipsum mają tendencje do kopiowania już istniejących bloków, co czyni nasz pierwszym prawdziwym generatorem w Internecie. Używamy zawierającego ponad 200 łacińskich słów słownika, w kontekście wielu znanych sentencji, by wygenerować tekst wyglądający odpowiednio. To wszystko czyni „nasz” Lorem Ipsum wolnym od powtórzeń, humorystycznych wstawek czy niecharakterystycznych słów.</p>
    </body>
</html>