zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Animation mit Durchlaufen eines Arrays erstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.08.2012, 16:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.05.2012
Beiträge: 6
Garavani befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.08.2012, 10:00
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.931
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Du musst mit window.setTimeout() arbeiten. JS kennt keine Pausen
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.08.2012, 08:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.05.2012
Beiträge: 6
Garavani befindet sich auf einem aufstrebenden Ast
Standard 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 08:16 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 13.08.2012, 09:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.05.2012
Beiträge: 6
Garavani befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Stichwörter
animation, array, javascript, pause, schleife

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Animation für das iPad erstellen Duderinho Offtopic 3 23.06.2010 15:53
PHP, arrays verbinden aber nicht mit merge sondern durch Kombination ihrer Werte braindead Serveradministration und serverseitige Scripte 5 03.11.2009 13:26
Dynamisch Bilder erstellen Omid Serveradministration und serverseitige Scripte 8 10.07.2007 10:26
Image erstellen: "Norton Ghost" vs. "Acronis True Image" vs. "Phoenix Backup" Lloyd Larkin Offtopic 8 14.09.2006 21:59
Array erstellen DK Serveradministration und serverseitige Scripte 4 12.06.2006 13:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:23 Uhr.