Startseite Forum
Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

Umblättern
(1 Leser) (1) Gast
  • Seite:
  • 1

THEMA: Umblättern

Umblättern 1 Jahr, 6 Monate her #9187

  • Levinia
  • OFFLINE
  • Fresh Boarder
  • Beiträge: 4
  • Karma: 0
Hallo,

keine Ahnung, ob ich hier richtig bin und ob man diese Idee überhaupt mit einem Javascript umsetzen kann. Aber vielleicht hat ja jemand einen Tipp für mich oder kann mir sonst irgendwie helfen.

Also: Idee ist es, ein Onlinebuch (das sich derzeit auf einer normalen html-basierten Homepage mit css-Design befindet) auch tatsächlich wie ein Buch zu gestalten. Sprich: der Text steht auf einer "Buchseite" und wenn man zur nächsten Seite bzw. zum nächsten Kapitel "blättert", wirkt es, als würde man tatsächlich umblättern.

Fragen wären also:
a) Wie kann ich eine solche "Buchseite" gestalten? Nur mit einer Hintergrundgrafik oder gibt es da auch Programmiertricks? (Ich möchte lange Ladezeiten natürlich möglichst vermeiden.)
b) Gibt es ein Script, mit dem man einen solchen "Umblättereffekt" erzeugen kann, wenn der Leser am Ende der Seite auf den Link zum nächsten Kapitel klickt?

Über Antworten würde ich mich freuen.

Aw: Umblättern 1 Jahr, 6 Monate her #9188

  • Betzi
  • OFFLINE
  • Junior Boarder
  • Beiträge: 28
  • Karma: 0
Hi!
Ich weiß dass es irgentwo soetwas gibt, geringe wartezeiten etc. kostet bloß was. aber sonst weiß ichh nichts...

edit:

erstmal das weiß ich nicht genau ob das das richtige ist:
www.apfeltalk.de/forum/pageflip-online-bl-t198132.html

dann dashier:
www.blaetterkatalog.de/Blaetterkatalog.31.0.html
das ist das oben schon beschriebene, ich finds gut

und hier kannst dir mal angucken wies so aussieht:
sortiment.obi.de/obi/rubrik.do?pk=pJ2HefkybyuA1Y6WbzuK1d-142
Letzte Änderung: 1 Jahr, 6 Monate her von Betzi.

Aw: Umblättern 1 Jahr, 6 Monate her #9189

  • Levinia
  • OFFLINE
  • Fresh Boarder
  • Beiträge: 4
  • Karma: 0
Hallo und vielen Dank


Betzi schrieb:
Hi!
Ich weiß dass es irgentwo soetwas gibt, geringe wartezeiten etc. kostet bloß was. aber sonst weiß ichh nichts...

edit:

erstmal das weiß ich nicht genau ob das das richtige ist:
www.apfeltalk.de/forum/pageflip-online-bl-t198132.html

dann dashier:
www.blaetterkatalog.de/Blaetterkatalog.31.0.html
das ist das oben schon beschriebene, ich finds gut

und hier kannst dir mal angucken wies so aussieht:
sortiment.obi.de/obi/rubrik.do?pk=pJ2HefkybyuA1Y6WbzuK1d-142


Sieht klasse aus, allerdings ... kostenlos ist das leider alles nicht so wirklich oder würde bedeuten, dass man die komplette Seite neu bauen müsste. Der Tipp im Apfeltalk mit der Bild / Html / Java-Variante ist vermutlich am ehesten das, was ich umsetzen könnte (wenngleich ich die Beschreibung zunächst etwas verwirrend fand - ich bin leider kein Programmiercrack ).

Noch ein paar mehr Informationen:
Also - es ist kein pdf. Das Buch ist auf gut 200 Html-Dateien untergebracht, ganz normal in einem PSpad geschrieben, in tags gesetzt und per css in Form gebracht. Es ist ein kostenloses Onlinebuch zu einem speziellen Thema - und es hat auch dementsprechend viele Besucher aus einer bestimmten Szene, ist also eine bestehende, recht gut besuchte Webseite.

Mein Problem ist das Design. Es sieht ein bisschen langweilig aus, zumal css auch gewisse Grenzen hat. Außerdem muss so eine Leseseite auch auf Lesefreundlichkeit ausgerichtet sein. Sprich: Schnickschnack kann man sich sparen. Alles, was irgendwie leuchtet, blinkt oder hopst ist da fehl am Platz. So ist sie jetzt sehr schlicht und gut zu lesen - aber eben auch ... öde.

Meine Idee war daher - um das Ganze optisch etwas aufzupeppen - den Text auf eine "Buchseite" zu setzen (farblich anderer Hintergrund, etwas farblich abgesetztes übersichtliches Menü) und dann eben so eine Art Umblättereffekt.

Könnte man diesen Effekt, der hier beschrieben wird:
de.selfhtml.org/dhtml/beispiele/bilderbuch.htm
mittels Java auch etwas einfacher hinbekommen?
In Bezug auf die weiterführenden Links? Im Moment habe ich das ganz schlicht mit "weiter zu 1995" als gewöhnlichen HTML-Link. Selbst, wenn es nicht so richtig "blättern" würde, aber dass vielleicht "gleitet", so, als würde man eine Seite "wegziehen" und dann taucht die nächste auf.

Und wie könnte man den Hintergrund als "Buchseite" gestalten, ohne jede Menge Grafiken laden zu müssen und ohne dass man - für mich - schwer komplizierte Sachen wie Flash oder Perl zurückgreifen muss? Also z.B. dass man einen fast weißen Hintergrund nimmt und darauf einen Farbverlauf einsetzt oder die Umrandung "zerknittert", so dass der Eindruck von Pergament entsteht o.ä.???

Aw: Umblättern 1 Jahr, 6 Monate her #9203

  • Super_Mario
  • OFFLINE
  • Platinum Boarder
  • Beiträge: 623
  • Karma: 35
Hallo,

das mit dem Seitenübergang lässt sich sogar mit normalen HTML machen

Dafür gibt es den revealTrans()-Filter, der für diverse dynamische Seitenübergänge sorgt. Darunter gibt es auch Roll-Effekte, die wie der Effekt auf der SELFHTML Seite aussehen, nur, dass es sich dabei auf die ganze Seite bezieht. Laut SELFHTML funktioniert das Ganze halt leider nur im Internet Explorer. Ich hab aber gelesen, dass es auch im Opera und Netscape laufen soll.

Für den Filter gibt es vier Auslöser:
• Page-Enter beim Betreten der Seite von einer fremden Seite
• Page-Exit beim Wechseln von der Seite zu einer fremden Seite
• Site-Enter beim Betreten der Seite von einer anderen Seite am gleichen Server
• Site-Exit beim Wechseln von der Seite zu einer anderen Seite am gleichen Server

Platzieren tut man den Filter in einem Meta-Tag im head der Seite.

So sieht das Ganze aus, wenn der Roll-Übergang mit Site-Exit verwendet wird:
<meta http-equiv="Page-Exit" content="revealTrans(Duration=4.0,Transition=7)">

Die rot geschriebene Zahl ist die Zeit in Sekunden, wie lange der Effekt andauern soll. Die grün geschriebene Zahl ist der Effekt-Index, der angibt, welcher Effekt verwendet werden soll.

Eine Auflistung aller Effekte und ihrer Indexnummern gibt es hier: de.selfhtml.org/dhtml/modelle/dynamische...ter.htm#reveal_trans



Jetzt zum Design:
Also ein Buchseiten-Design lässt sich schon machen. Für das Pergament-Papier und die zerknitterten Ränder wirst du aber schon Hintergrundgrafiken brauchen. Mit Filtern würde es wahrscheinlich auch irgendwie funktionieren, allerdings währe das sicher recht umständlich.

Hier hätte ich noch einen Vorschlag für ein Buch-Design ohne Grafiken:
<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>
<meta http-equiv="Page-Exit" content="revealTrans(Duration=4.0,Transition=7)">
</head>

<body bgcolor="#663311">

<center>
<table border="0" width="1000" cellspacing="0" cellpadding="0" bgcolor="#FFEEAA" style="border: 3px solid #443300">
  <tr>
    <td width="460">

<!-- Anfang Inhalt linke Seite -->

      <table border="0" width="100%">
        <tr>
          <td width="100%" align="center">&nbsp;</td>
        </tr>
      </table>

<!-- Ende Inhalt linke Seite -->

    </td>

<!-- Anfang Schattierungen -->

    <td width="12" bgcolor="#F5E5A9"></td>
    <td width="10" bgcolor="#EEDDA5"></td>
    <td width="8" bgcolor="#E0D0A0"></td>
    <td width="5" bgcolor="#D5C599"></td>
    <td width="3" bgcolor="#CCBB99"></td>
    <td width="4" bgcolor="#BBAA88"></td>
    <td width="3" bgcolor="#CCBB99"></td>
    <td width="5" bgcolor="#D5C599"></td>
    <td width="8" bgcolor="#E0D0A0"></td>
    <td width="10" bgcolor="#EEDDA5"></td>
    <td width="12" bgcolor="#F5E5A9"></td>

<!-- Ende Schattierungen -->

    <td width="460">

<!-- Anfang Inhalt rechte Seite -->

      <table border="0" width="100%">
        <tr>
          <td width="100%" align="center">&nbsp;</td>
        </tr>
        <tr>
          <td width="100%" align="center">Überschrift
            <p>Text Text Text Text Text Text Text<br>
            Text Text Text Text Text Text Text<br>
            Text Text Text Text Text Text Text<br>
            Text Text Text Text Text Text Text<br>
            Text Text Text Text Text Text Text<br>
            Text Text Text Text Text Text Text<br>
            Text Text Text Text Text Text Text<br>
            Text Text Text Text Text Text Text</td>
        </tr>
        <tr>
          <td width="100%" align="center">&nbsp;</td>
        </tr>
      </table>

<!-- Ende Inhalt rechte Seite -->

    </td>
  </tr>
</table>
</center>

</body>

</html>
liebe Grüße
Super Mario

Meine Webseite ist Mario & Luigis wunderbare Welt. Dort gibt es auch eine große Auswahl an kostenlosen und werbefreien Javascripts. Meine Javascripts laufen in vielen, bzw. allen Browsern und sind W3C valide!
Letzte Änderung: 1 Jahr, 6 Monate her von Super_Mario.

Aw: Umblättern 1 Jahr, 6 Monate her #9207

  • Levinia
  • OFFLINE
  • Fresh Boarder
  • Beiträge: 4
  • Karma: 0
Vielen Dank für die ausführliche Antwort

Da ist doch einiges bei, was mal ausprobierenswert ist. Von Tabellen habe ich herzlich wenig Ahnung, aber damit könnte man sicher mal experimentieren und schauen, was am besten aussieht. Ist eine gute Idee.

Den Slide-Effekt sieht man wohl aber tatsächlich nur im IE. Ich bin jetzt mit dem Opera unterwegs - und da tut sich bei den Beispielen auf der SELFHTML-Seite absolut gar nichts. Und wenn ich mir die Webseitenstatistik so anschaue - mit IE sind da nicht viele unterwegs. Der häufigste Browser ist der FF.

Gab es hier nicht eine Kategorie mit Java-Linkeffekten? Ich habe die mal gesehen, aber jetzt finde ich sie irgendwie nicht mehr wieder. Vielleicht findet man da ja auch was anderes, was ganz interessant aussieht.

Aw: Umblättern 1 Jahr, 6 Monate her #9215

  • Super_Mario
  • OFFLINE
  • Platinum Boarder
  • Beiträge: 623
  • Karma: 35
Hatte schon vermutet, dass das mit Opera und Mozilla nur Gerüchte waren Ich hab jetzt gerade gegoogelt; Firefox unterstützt leider nichts in der Art. Aber du kannst die Seitenübergänge mit revealTrans() ja trotzdem für die IE Besucher auf die Seite stellen.

Eine Kategorie mit Link-Effekten gibt es hier, soviel ich weis, nicht. Wahrscheinlich meinst du die Text-Effekte. Da gibt es nämlich auch Javascripts, die mit Links arbeiten.

Hier geht's zu den Texteffekten
liebe Grüße
Super Mario

Meine Webseite ist Mario & Luigis wunderbare Welt. Dort gibt es auch eine große Auswahl an kostenlosen und werbefreien Javascripts. Meine Javascripts laufen in vielen, bzw. allen Browsern und sind W3C valide!

Aw: Umblättern 1 Jahr, 6 Monate her #9216

  • Levinia
  • OFFLINE
  • Fresh Boarder
  • Beiträge: 4
  • Karma: 0
Super_Mario schrieb:
Hatte schon vermutet, dass das mit Opera und Mozilla nur Gerüchte waren Ich hab jetzt gerade gegoogelt; Firefox unterstützt leider nichts in der Art. Aber du kannst die Seitenübergänge mit revealTrans() ja trotzdem für die IE Besucher auf die Seite stellen.

Eine Kategorie mit Link-Effekten gibt es hier, soviel ich weis, nicht. Wahrscheinlich meinst du die Text-Effekte. Da gibt es nämlich auch Javascripts, die mit Links arbeiten.

Hier geht's zu den Texteffekten


Ja, bei den Texteffekten war auch was mit Links dabei. Ich werde es mal durchschauen. Vielen Dank

Aw: Umblättern 1 Jahr, 6 Monate her #9220

  • Super_Mario
  • OFFLINE
  • Platinum Boarder
  • Beiträge: 623
  • Karma: 35
Gerne
liebe Grüße
Super Mario

Meine Webseite ist Mario & Luigis wunderbare Welt. Dort gibt es auch eine große Auswahl an kostenlosen und werbefreien Javascripts. Meine Javascripts laufen in vielen, bzw. allen Browsern und sind W3C valide!
  • Seite:
  • 1
Ladezeit der Seite: 0.47 Sekunden

Login

Aktuell im Forum

mehr