kostenloser Webspace werbefrei: lima-city

Animierte Texte auf der Webseite

lima-city → Forum → Die eigene Homepage → Grafikdesign

1. Autor dieses Themas

   m*********s

   18:17, 19.9.2014

   Hallo Com,
   
   auf meiner Webseite möchte ich ein kleines Feature einbauen. das einen von mir vorbestimmten Text so animiert, als würde es gerade jemand schreiben. Ich hoffe ihr versteht was ich meine.
   
   Einstellungen:
   - Schriftart: Courier New
   
   Leider weiß ich nicht, wie man so etwas programmiert bzw. geschwiegen in welcher Sprachen (meine Vermutung wäre JS). Könnt ihr mir weiter helfen ?
   
   Danke,
   My-Programs

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   21:38, 19.9.2014

   Schau dir mal dieses kleine jQuery Plugin an
   https://github.com/codin/qwerty
   Die Schriftart legst du dann mit CSS fest.
   
   Ähnliche Sachen liefert die Suche mit javascript typewriter.

4. p***************y

   22:36, 2.3.2015

   http://www.mattboldt.com/demos/typed-js/

5. otisoft

   otisoft hat kostenlosen Webspace.

   13:14, 17.3.2015

   Oder vielleicht mit PHP und HTML <marquee>
   PHP: Text aus Datenbank oder TXT-Datei auslesen
   HTML: Den Text durch laufen lassen

6. nudella

   

   nudella hat kostenlosen Webspace.

   16:49, 17.3.2015

   Auf http://www.htmldrive.net findest du eine ganze Menge davon
   
   zum Beispiel http://www.htmldrive.net/items/show/635/jQuery-plugin-Information-board-text-effect
   
   du kannst dir im vorherrein die Demo ansehen bei gefallen einfach downloaden entpacken, bearbeiten einbinden.

7. hbss

   

   hbss hat kostenlosen Webspace.

   10:28, 26.3.2015

   Wir animieren mit gif89. Aber es gibt immer wieder Beschwerdev vom Apple und Handynutzern, gif89 würde nicht funktionieren, nur auf WIN Rechnern. Stimmt das?

8. gruppenbann

   gruppenbann hat kostenlosen Webspace.

   21:50, 8.4.2015

   function tippen(inhalt,cursor,element,geschwindigkeit) {
   				window.element=element;
                                   window.geschwindigkeit=geschwindigkeit;
   				window.captionLength = 0;
   				window.caption = inhalt;
   				setInterval (function(){
   					$(cursor).animate({
   						opacity: 0
   					}, 'fast', 'swing').animate({
   						opacity: 1
   					}, 'fast', 'swing');
   				}, 600);
   				eintragen();
   			}
   
   			function eintragen() {
   				$(window.element).html(window.caption.substr(0, window.captionLength++));
   				if(window.captionLength < caption.length+1) {
   					setTimeout('eintragen()', window.geschwindigkeit);
   				} else {
   					window.captionLength = 0;
   					window.caption = '';
   				}
   			}

   
   
   Du erstellst dann einfach zwei HTML Elemente wie zum Beispiel:
   

   <p>
   <span id="inhalt"><span id="cursor">|</span></span>
   </p>

   
   
   Und würdest dann die Funktion so aufrufen in Javascript:
   

   tippen('Der Text, den du schreiben willst.','#cursor','#inhalt',50);

   
   Der erste Parameter ist der Text, den du schreibst. Der zweite Parameter das Element, was das Cursorzeichen enthält, der dritte Parameter das Element, wo der Text reingeschrieben wird und der vierte Parameter die Tippgeschwindigkeit in Millisekunden.
   
   Wenn du eine bestimmte Schriftart festlegen möchtest kannst du das entweder mit CSS oder automatisch direkt in dem Javascript machen.
   
   Wenn du willst, kann ich auch machen, dass es die zwei Elemente automatisch in ein DIV reinschreibt und die Schriftart ändert, sag einfach bescheid.
   
   Hier das Beispiel:
   http://gruppenbann.lima-city.de/beispiel.html
   
   Beitrag zuletzt geändert: 8.4.2015 22:12:03 von gruppenbann

9. fs-host

   fs-host hat kostenlosen Webspace.

   0:30, 22.4.2015

   Abseits vom Thema ^^:Wenn der Text allerdings in in einem Textabschnitt steht solltest du die Größe schon im Vorraus festlegen, sonst zerreissts dir das Layout bzw. alles bewegt sich mit...

10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?