Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript] tekst pojawiający się z opóźnieniem, Typewriter Effect
artisto
post 12.04.2021, 19:45:07
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 12.04.2021

Ostrzeżenie: (0%)
-----


Witam.

Mam skrypt wywołujący efekt pisania na maszynie.
Jednak napotkałem problem z którym nie mogę sobie poradzić.

Zależy mi aby drugi tekst pojawiał się z odpowiednim opóźnieniem (np. 5 sekund).
Forma skryptu jest nietypowa ponieważ zależało mi na 2 oddzielnych niezależnych częściach ale zarazem z możliwością ustawienia czasu wyświetlania między nimi.

  1. <div class="texto1"></div>
  2. <div class="texto2"></div>


  1. <script>
  2. var str = 'part 1 tekst jeden part jeden:';
  3. var str2 = 'part 2 tekst dwa part dwa:';
  4.  
  5. var spans = '<span>' + str.split('').join('</span><span>') + '</span>';
  6. $(spans).hide().appendTo('.texto1').each(function(i) {
  7. $(this).delay(40 * i).css({
  8. display: 'inline',
  9. opacity: 0
  10. }).animate({
  11. opacity: 1
  12. }, 100);
  13. });
  14.  
  15. var spans = '<span>' + str2.split('').join('</span><span>') + '</span>';
  16. $(spans).hide().appendTo('.texto2').each(function(i) {
  17. $(this).delay(40 * i).css({
  18. display: 'inline',
  19. opacity: 0
  20. }).animate({
  21. opacity: 1
  22. }, 100);
  23. });
  24. </script>


Kod dostępny na jsfiddle
https://jsfiddle.net/BDR13/xLvyf0q1/

Czy jest szansa aby ktoś mógł mi w tym pomóc?

Go to the top of the page
+Quote Post
Malinaa
post 12.04.2021, 20:17:43
Post #2





Grupa: Zarejestrowani
Postów: 517
Pomógł: 6
Dołączył: 21.07.2008

Ostrzeżenie: (0%)
-----


Przed linią 16 dodaj
setTimeout(function (){
na końcu
}, 1000);
i będziesz mieć opóźnienie.

A propos. Nie wygląda mi to na efekt pisania na maszynie,
ale może po wyświetleniu na stronie jest ok.


--------------------
I welcome you on the Internet >>> Design by Malina
Go to the top of the page
+Quote Post
artisto
post 12.04.2021, 20:56:40
Post #3





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 12.04.2021

Ostrzeżenie: (0%)
-----


Cytat(Malinaa @ 12.04.2021, 21:17:43 ) *
Przed linią 16 dodaj
setTimeout(function (){
na końcu
}, 1000);
i będziesz mieć opóźnienie.

A propos. Nie wygląda mi to na efekt pisania na maszynie,
ale może po wyświetleniu na stronie jest ok.


Bardzo dziękuję za pomoc. Działa idealnie.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 14:47