"Rozstrzeliwanie" tekstu

Question

Podczas przeglądania internetu natrafiłem na pewną stronę. Zobaczyłem na niej całkiem ciekawy efekt "rozłączania", "rozstrzeliwania" się tekstu. Jak coś podobnego osiągnąć? Link do strony: http://www.goldensubmarine.com/pl/kariera

PS

To nie jest reklama powyższej strony 

Answer 1

Tytuł jest pocięty na części i jakieś zdarzenie nasłuchuje jaki obecnie obszar strony jest wyświetlany. Jeżeli na widocznym obszarze znajduje się napis - pewnie dołączana jest klasa za umieszczenie fragmentu tekstu w danym miejscu.

Natomiast rozstrzeliwanie tekstu najłatwiej można uzyskać za pomocą letter-spacing oraz line-height.

Answer 2

Tekst został podzielony na fragmenty, a sama animacja jest zrobiona w CSS. Są tutaj użyte position: absolute (left i top) oraz transition (ease), aby nadać płynne przejście elementom w trakcie zmiany położenia. Dodatkowo obsługa zdarzeń w JS i odpowiednia zmiana klas w zależności o scrollu.

Tak w ogóle polecam używać narzędzi programistycznych przeglądarki. Wtedy takie pytania staną się zbędne.