|
|||
Animation mit Durchlaufen eines Arrays erstellen
Hallo Leute,
ich versuche gerade eine Animation zu erstellen mit Hilfe eines (web)Fonts. dazu habe ich eine Schrift erstellt, deren Buchstaben mit den einzelnen Bildern belegt sind. Das klappt auch alles wunderbar. lediglich mit dem Durchlaufen meines Arrays habe ich (Anfänger) Probleme. So mein div in der page: <div class="container"><h1 id="step">A</h1></div> So sieht meine Animationsfunktion bisher aus (wird z.B. durch Klick oder on document ready ausgelöst): function stepAnimation() { steps = new Array("A","C","D","E","F","G","H","I","J","K","L", "M","N","O","P","Q","R","S","T","U","V","W","X ","Y ","Z","a","b","c","d","e","g","i","j","k","l", "m", "n","o","p","q","r","s","t","u","v","w","x","y ","z ","0","1","2","3","4","5","6","7","8","9",":") ; while(show = steps.shift()) { $('#step').delay(200).text(show); } } oder auch: function stepAnimation() { var steps = new Array("A","C","D","E","F","G","H","I","J","K","L", "M","N","O","P","Q","R","S","T","U","V","W","X ","Y ","Z","a","b","c","d","e","g","i","j","k","l", "m", "n","o","p","q","r","s","t","u","v","w","x","y ","z ","0","1","2","3","4","5","6","7","8","9",":") ; var show = ""; for(var i = 0; i < steps.length; i++) { show = steps[i]; } document.getElementById('step').innerText = show; } Bei beiden (und auch anderen Versionen) funktioniert das ganze scheinbar irgendwie, aber wohl zu schnell, da ich stets nach dem Start nur das Endbild (also ":" aus dem Array) zu sehen bekomme. Ich muss irgendwie eine Pause zwischen die einzelnen Bilder bekommen, damit die Animation auch sichtbar fürs Auge abläuft. Das delay in der oberen jquery Variante ging auch nicht. Ich mag jquery gern, ist mir also auch recht. Kann mir jemand helfen? Oder erkläre ich mich schlecht? Danke Euch sehr Garavani |
Sponsored Links |
|
|||
FitText
Hallo photonenbeschleuniger,
Danke für Deine Antwort. ja so geht das. Hab mir dazu auch ein bisschen Hilfe geholt Garavani Hast Du (oder jemand anders) noch Lust auf eine echt knifflige Nuss? Das da ist eine page: <!DOCTYPE html> <html> <head> <head><title>SUPREMA LETTRES</title> <style> body { background-color: #ffffff; } * { padding-left:6px; padding-right:6px; margin-top: 8%; } .container { width: 100%; max-height:1000px; margin:-6% auto; } h1 { text-align: center; color:#3c3c3c; font: 42px/1.05 'SupranimatedRegular'; display: block; padding-right: 41px; } @font-face { font-family: 'SupranimatedRegular'; src: url('fonts/supranimate-webfont.eot'); src: url('fonts/supranimate-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/supranimate-webfont.woff') format('woff'), url('fonts/supranimate-webfont.ttf') format('truetype'), url('fonts/supranimate-webfont.svg#SupranimatedRegular') format('svg'); font-weight: normal; font-style: normal; } body { -webkit-font-smoothing: antialiased; } </style> <script src="edge_includes/jquery-1.7.1.min.js"></script> <script src="edge_includes/jquery.fittext.js"></script> <script type="text/javascript" language="JavaScript"> var i = 0; var steps = new Array("A","C","D","E","F","G","H","I","J","K","L", "M", "N","O","P","Q","R","S","T","U","V","W","X","Y ", "Z","a","b","c","d","e","g","i","j","k","l","m ", "n","o","p","q","r","s","t","u","v","w","x","y ", "z","0","1","2","3","4","5","6","7","8","9",": ") ; function stepAnimation() { if (i < steps.length) { $('#step').text(steps[i]); i++; setTimeout("stepAnimation()", 50); } } $(document).ready(function() { if (document.width > 1000) { window.resizeTo(document.width/2.1, document.height/1.2); } else { window.resizeTo(document.width/1.9, document.height); } }); </script> </head> <body> <div class="container" style="position: fixed;"><h1 id="step"></h1></div> <div id ="Supremextra" style="position: fixed; left: 5%; bottom: 15%; height: 33px; width: 120px;"><img src="http://xhtmlforum.de/images/Suprema.png"></div> <div id ="arrowLast" style="position: fixed; margin-left: 0px; right: 50%; bottom: 5%; height: 47px; width: 50px; cursorointer;"><img src="http://xhtmlforum.de/images/Arrow_left_pos.png"> </div> <div id ="arrowNext" style="position: fixed; margin-left: 24px; left: 50%; bottom: 5%; height: 47px; width: 50px; cursorointer;" onclick="stepAnimation()"><img src="http://xhtmlforum.de/images/Arrow_right_pos.png"></div> <script type="text/javascript"> $("#step").fitText(0.33, {minFontSize: "25px", maxFontSize: "600px"}); </script> </body> </html> die mit einem plugin ermöglicht das der darin enthaltene Text (in diesem Fall ein einzelner Buchstabe der mittels einer speziellen Schrift eine Animation simuliert) sich automatisch resized, wenn der user das Browserfenster in die Breite zieht (leider eben nicht in die Höhe!) Hier der plugIn code: (function( $ ){ $.fn.fitText = function( kompressor, options ) { // Setup options var compressor = kompressor || 1, settings = $.extend({ 'minFontSize' : Number.NEGATIVE_INFINITY, 'maxFontSize' : Number.POSITIVE_INFINITY }, options); return this.each(function(){ // Store the object var $this = $(this); // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); }; // Call once to set. resizer(); // Call on resize. Opera debounces their resize by default. $(window).on('resize', resizer); }); }; })( jQuery ); Jetzt versuche ich krampfhaft seit Tagen das Ding irgendwie umzumodeln, dass die fontsize auf die Höhe des Browserfenster reagiert, statt auf die Breite. Ich dachte: ok, einfach width (im code) gegen height tauschen, ein bisschen an den css und den Paramtern schrauben, und fertig. Pustekuchen. Egal wie ich es anstelle, das Ding geht entweder gar nicht mehr, oder völlig unverständlich. Hat jemand von Euch eine Idee? Leider meldet sich der Macher selbst nicht auf meine Frage. Garavani Geändert von Garavani (12.08.2012 um 09:16 Uhr) |
|
|||
Hallo Leute,
so knifflig war die Nuss gar nicht Hab mich einfach nur von dem plugIn code verabschiedet und es so: function typeSize() { var ts = $(window).height(); $("#animation").css('font-size', ts/2.3); } $(document).ready(function() { typeSize(); $(window).bind('resize', function() { typeSize(); }); }); gemacht. Geht bestens. Danke trotzdem für Euer Interesse Garavani |
Stichwörter |
animation, array, javascript, pause, schleife |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Animation für das iPad erstellen | Duderinho | Offtopic | 3 | 23.06.2010 16:53 |
PHP, arrays verbinden aber nicht mit merge sondern durch Kombination ihrer Werte | braindead | Serveradministration und serverseitige Scripte | 5 | 03.11.2009 14:26 |
Dynamisch Bilder erstellen | Omid | Serveradministration und serverseitige Scripte | 8 | 10.07.2007 11:26 |
Image erstellen: "Norton Ghost" vs. "Acronis True Image" vs. "Phoenix Backup" | Lloyd Larkin | Offtopic | 8 | 14.09.2006 22:59 |
Array erstellen | DK | Serveradministration und serverseitige Scripte | 4 | 12.06.2006 14:18 |