Textscroller wie bei: http://www.schwarzschild.de

[mike_mcfly]

Schaut euch mal diesen schönen reduzierten Textscroller an:

http://www.schwarzschild.de/seele/inhalt.htm

Wer kann mir erklären, wie ich das mache, den Quellcode habe ich schon von oben bis unten durchstudiert aber dieser ist so verschachtelt, dass ich da einfach nicht durchblicke???!!!!

Auch die Lösung mit DHTML/Javascript und CSS ist echt schön umgesetzt...

Thanx

[m.]

Hi

Ich rate dir nur eines: LASS DEN QUATSCH! Es gibt für den Benutzer wirklich kaum etwas mühsameres als solche Hallo-ich-kann-JavaScript-und-finde-mein-Design-geil-Scrollbars! Da ist eine Scrollbar in einem Frame mitten auf der Page gerade eine wunderbare Wohltat!

Gruss

m.

[Markus König]

Ich rate dir nur eines: LASS DEN QUATSCH!

Warum seid ihr alle so negativ eingestellt?

Die verstehen was von gutem Webdesign. :)

Hat sich schon mal jemand die Startseite angeschaut?
Mit Opera bekommt man eine nette Begrüßung:

Browser unterstützt nicht die notwendigen Standards!
Bitte verwenden Sie einen der folgenden Browser:

Internet Explorer ab Version 5 (Mac und Windows)
Netscape Communicator ab Version 7 (Mac und Windows)
Safari (Mac)

Noch besser ist es wenn man den IE benutzt. Noch bevor die Seite geladen ist soll ActiveX gestartet werden. Einfach genial.

[Felix Riesterer]

Lieber Markus,

Die verstehen was von gutem Webdesign. :)

Mit Opera bekommt man eine nette Begrüßung:
Browser unterstützt nicht die notwendigen Standards!
Bitte verwenden Sie einen der folgenden Browser:
Internet Explorer ab Version 5 (Mac und Windows)
Netscape Communicator ab Version 7 (Mac und Windows)
Safari (Mac)

Noch besser ist es wenn man den IE benutzt. Noch bevor die Seite geladen ist soll ActiveX gestartet werden. Einfach genial.

Tja, der Schein ist bei gutem Webdesign eben das einzige, was zählt! Es muss _aussehen_ und _funzen_[sic!], sonst beeindruckt es nicht.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[David]

Habt ihr mal versucht, einbisschen auf der Seite zu surfen, nachdem euch schon die ersten Sätze dieses Seelenquatsches auf den Zeiger gingen?
Da scheint nicht mehr viel Zeit für Usability-Tests geblieben zu sein. Ich habe nach zwei Minuten aufgegeben, das geht einem ja auf die Nerven...
Aber dafür wissen die Jungs, wie man überschriften formatiert:

<P><I>Das Unternehmen</I><I><BR>  
    </I><IMG src="../media/strich.gif" width="230" height="3" border="0"><BR>

[Felix Riesterer]

Aber dafür wissen die Jungs, wie man überschriften formatiert:

<P><I>Das Unternehmen</I><I><BR>

</I><IMG src="../media/strich.gif" width="230" height="3" border="0"><BR>

  
\*LOL\*  
  
Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/),  
  
Felix Riesterer.

[Ingo Turski]

Hi,

Schaut euch mal diesen schönen reduzierten Textscroller an:

schön? Lesen möchte ich einen Text so wirklich nicht. Mein Scrollrad ist mir lieber (das übrigens auch hier unbeabsichtigt nicht ganz funktionslos ist. ;-)

http://www.schwarzschild.de/seele/inhalt.htm

besser direkt http://www.schwarzschild.de/seele/seele.htm.

Wer kann mir erklären, wie ich das mache, den Quellcode habe ich schon von oben bis unten durchstudiert aber dieser ist so verschachtelt, dass ich da einfach nicht durchblicke???!!!!

Du hast Dir wirklich http://www.schwarzschild.de/seele/media/scrollText.js angesehen?

freundliche Grüße
Ingo

[Christoph Schnauß]

hallo Ingo,

http://www.schwarzschild.de/seele/inhalt.htm
besser direkt http://www.schwarzschild.de/seele/seele.htm.

Noch besser: http://www.schwarzschild.de/seele/media/scrollText.js ;-)

Was daran allerdings so besonders schön sein soll, verstehe ich auch nicht. Es funktioniert, ja. Der Rest (was die Lesbarkeit angeh) ist CSS, und natürlich darf man die üblichen Belehrungen ("Javascript isz abschaltbar") äußern.

Grüße aus Berlin

Christoph S.

[Felix Riesterer]

Lieber mike,

Schaut euch mal diesen schönen reduzierten Textscroller an:

http://www.schwarzschild.de/seele/inhalt.htm

bitte FAQ-19, danke.

Also sowas stört mich mächtig, da es meiner Ansicht nach keinen vernünftigen Grund gibt (Design ist kein Grund - vielleicht ein Spleen...), mir das Lesen des Textes derart umständlich zu machen und zu erschweren! Ich will die Infos _sofort_ haben! Ich will nicht warten müssen, biss es dem Scroller gefällt, mich die nächste Zeile lesen zu lassen, weil er zu langsam scrollt. Und wenn ich mit der Maus zu lange auf dem Pfeil bleibe, dann scrollt er _ungefragt_(!) einfach weiter! Da wäre mir eine Lösung mit onmousedown wesentlich lieber, da sie sich näher an der GUI meines OS orientieren würde. Und wozu die GUI "nachbauen" wollen? So ein Scrollbalken im Browser lässt sich wesentlich besser bedienen, als diese Scripterei! Da stelle ich in meinem FF doch gleich die Styles ab und kann dann ganz ungestört lesen, was es da Kümmerliches überhaupt zu lesen gibt.

Wer kann mir erklären, wie ich das mache, den Quellcode habe ich schon von oben bis unten durchstudiert aber dieser ist so verschachtelt, dass ich da einfach nicht durchblicke???!!!!

Also das hat mir sowas von überhaupt nicht gefallen, dass ich in den Quelltext schon nimmer reingeschaut habe... Sorry!

Auch die Lösung mit DHTML/Javascript und CSS ist echt schön umgesetzt...

Das finde ich nicht! Wozu bitteschön bedarf diese Seite eines Framesets??? Nur, um den unteren Teil grau einzufärben? Wenn schon CSS, dann doch bitte auch noch dafür, oder nicht? - Was das DHTML angeht, so habe ich meine Meinung zu diesem Spleen (sorry, D-e-s-i-g-n) oben schon geäußert.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Jeena Paradies]

Hallo,

Auch die Lösung mit DHTML/Javascript und CSS ist echt schön umgesetzt...

Dass sie das nicht ist, haben dir ja jetzt schon einige um die Ohren gehauen, ich möchte dir aufzeigen, warum sie das nicht ist, dies ist aber nur ein Beispiel unter vielen.

Ich kenne jemanden, der ist Spastiker, das ist eine Krankheit für die er nichts kann. Durch diese Krankheit ist er zum echten grobmotoriker geworden. Dennoch versucht er durch das Internet Kontakte zu pflegen, Produkte, die er braucht zu bestellen und amderes. Dazu hat er spezielle Hardware und hat sich einen solchen spezial Spastiker Joystik gekauft:

(sorry hab kein besseres Bild gefunden)

Dies ist sein Mausersatz. Er fährt damit wie bei einem Spiel auf dem Mozitor rum und hat auch große Tasten zum klicken. Das geht aber alles andere als einfach, da er manchmal ganz unkontrollierte Bewegungen macht - was beider Maus bedeuten würde, dass der Mauszeiger gleich auf der anderen Seite des Monitors landet - mit dem Joystik wird das ziemlich kompensiert, so dass er vielleicht nur drei oder vier Zentimeter vom Kurs abweicht.

Dass er es nicht schafft auf einem 11 mal 11 Pixel ganze 5 Sekunden zu bleiben um den Text ganz herunterzuscrollen versteht sich eigentlich von selbst, oder?

Die Browserhersteller stecken sehr viel KnowHow in ihre GUIs, und das machen sie eigentlich auch sehr gut. Dass die Leute doch einfach diese ausgereifte Technik nutzen und zwinge sie nicht solche unausgereiften und dikriminierenden Lösungen zu benutzen.

Grüße
Jeena Paradies

[Felix Riesterer]

Lieber Jeena,

Ich kenne jemanden, der ist Spastiker, das ist eine Krankheit für die er nichts kann. Durch diese Krankheit ist er zum echten grobmotoriker geworden. Dennoch versucht er durch das Internet Kontakte zu pflegen, Produkte, die er braucht zu bestellen und amderes. Dazu hat er spezielle Hardware und hat sich einen solchen spezial Spastiker Joystik gekauft:

Dies ist sein Mausersatz. Er fährt damit wie bei einem Spiel auf dem Mozitor rum und hat auch große Tasten zum klicken. Das geht aber alles andere als einfach, da er manchmal ganz unkontrollierte Bewegungen macht - was beider Maus bedeuten würde, dass der Mauszeiger gleich auf der anderen Seite des Monitors landet - mit dem Joystik wird das ziemlich kompensiert, so dass er vielleicht nur drei oder vier Zentimeter vom Kurs abweicht.

Soviel zu "barierrefrei"!!

Das hat mich eben tief beeindruckt! Da muss ich mir ja über meine CSS-Dropdown-Navigation nocheinmal Gedanken machen, denn damit könnte eine "unruhige" Hand deutliche Probleme bekommen... Allerdings ist auf jeder Seite eines Navigations-"Knoten"-Punktes eine stehende Subnavigation (ohne Dropdown) zusätzlich verfügbar. Damit sollte dieser User dann aber doch zurechtkommen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Sasch]

Ich denke das ist 1) eine Frage des Geschmacks und 2) die Sache, wie stark die Homepage frequentiert ist.
Eine private Homepage, die nicht massig viele Besucher auf sich zieht, zeichnet sich vielleicht gerade durch diesen Schnick-Schnack aus. Bzw. vielleicht ist es ja gerade das, was dem Webmaster gefällt.
In der Regel ist es doch so, dass solche Spielereien ihr Flair dann verlieren, wenn man weiß wie das realisiert wird.. :-)
Aber das ist es doch: Anfangs ist es noch etwas tolles, vielleicht empfinden es ja auch so die Besucher.
Im übrigen habe ich mir die Frage gestellt, ob es nicht primär um Werbung für diese Seite geht.
Zur eigentlichen Frage und somit zum Skript (was unten folgt):
Gradual-Highlight (das erste JS) kann natürlich weg, dann muss aber auch "onMouseOver="nereidFade..." bei den Links weg. Ich hatte das so noch irgendwo auf der Festplatte, fand das nämlich auch mal ganz groß, das ist aber das Grundgerüst wie es funktioniert bzw. dürfte so laufen. Mit ein bißchen Schnippelei hier und da kommt man dann letzten Endes zum Ziel.

<script>

/*
Gradual-Highlight Image Script II-
By J. Mark Birenbaum ([e-mail])
Permission granted to Dynamicdrive.com to feature script in archive
For full source to script, visit http://dynamicdrive.com
*/

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

/* object - image to be faded (actual object, not name);
* destop - destination transparency level (ie 80, for mostly solid)
* rate   - time in milliseconds between trasparency changes (best under 100)
* delta  - amount of change each time (ie 5, for 5% change in transparency)
*/

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }

clearTimeout(nereidFadeTimers[object.sourceIndex]);

diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}

</script>

<SCRIPT LANGUAGE="JavaScript">
<!--
var msg = "Bitte aktivieren Sie Java Script."
// var dyn = (document.layers || document.all) ? true : alert(msg);
var nav = (document.layers) ? true : false;
var iex = (document.all) ? true : false;
var lft = 20; // (window.screen.width/2);
var pos = 20; // initial top position
var stp = 20; // step increment size
var spd = 110; // speed of increment
var upr = -170; // upper limiter
var lwr = 20; // lower limiter
var tim; // timer variable
var halt=1;
function scroll_up()
{
halt=0;
scrollup();
}
function scrollup()
{
if (halt==0)
{
if(pos > upr) pos -= stp;
do_scroll(pos);
tim = setTimeout("scrollup()", spd);
}
}
function scroll_dn()
{
halt=0;
scrolldn();
}
function scrolldn()
{
if (halt==0)
{
if(pos < lwr) pos += stp;
do_scroll(pos);
tim = setTimeout("scrolldn()", spd);
}
}
function do_scroll(pos)
{
if(iex)
{
document.all.divTxt.style.left = pos;
}
else if (nav)
{
document.divTxt.left = pos;
}
else
{
document.getElementById("divTxt").style.left = pos;
}
}
function no_scroll()
{
clearTimeout(tim);
halt=1;
}
function fset()
{
if (top.frames.length == 0)
{
top.location.href = '../ftagen.htm'
}
}
// -->
</SCRIPT>

</head>

<body bgcolor="#444355" link="#000000" vlink="#000000" alink="#000000">
<DIV
ID="divTxt"
STYLE="position: absolute; top: 5; left: 20; width: 837; z-index: 2; height: 77"

<p><a href="http://www.11freunde.de" target="_blank"><img border="0" src="fusi.jpg" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)"></a>
<a href="http://www.arminia-bielefeld.de" target="_blank"><img border="0" src="arminia.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)"></a>
<img border="0" src="bayer.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)"> <img border="0" src="bochum.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)">
<img border="0" src="bvb.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)"> <img border="0" src="fcbayern.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)">
<img border="0" src="gladbach.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)"> <img border="0" src="hannover.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)">
<img border="0" src="hansa.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)">
<img border="0" src="hertha.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)"> <img border="0" src="hsv.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)">
<img border="0" src="lautern.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)"> <img border="0" src="mainz.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)">
<img border="0" src="scf.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)"> <img border="0" src="schalke.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)">
<img border="0" src="vfbstuttgart.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)"> <img border="0" src="wolfsburg.gif" width="45" height="25" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,70,20)" onMouseOut="nereidFade(this,20,50,10)"></p>

</DIV>
<div
id="pfeilunten"
style="position:absolute; left:675px; top:10px; width:17; height:5; z-index:7"

<A HREF="#" ONMOUSEOVER="scroll_dn()" ONMOUSEOUT="no_scroll()"><img border="0" src="pfeilrechts.gif"  style="filter:alpha(opacity=100)" onMouseOver="nereidFade(this,20,70,20)" onMouseOut="nereidFade(this,100,50,10)" width="15" height="15"></a>
</div>
<div
id="pfeiloben"
style="position:absolute; left:0px; top:10px; width:17; height:5; z-index:8"

<A HREF="#" ONMOUSEOVER="scroll_up()" ONMOUSEOUT="no_scroll()"><img border="0" src="pfeillinks.gif"  style="filter:alpha(opacity=100)" onMouseOver="nereidFade(this,20,70,20)" onMouseOut="nereidFade(this,100,50,10)" width="15" height="15"></a>
</div>