Vorhang


Hier geht es zu meinem Beispiel von diesem Skript oder hier mit einem Film als Kino.
Hier geht es zum Download der Skripte und Dateien von der Seite von buildinternet.com.

Vielen Dank an Strunz für den Hinweis auf seiner Testseite zu diesem Skript.

Nach dem Download der Skripte findet Ihr die Datei

curtains.zip

Entpackt diese ZIP Datei und Ihr erhaltet 2 Ordner:

__MACOSX (Für Mac Computer)
curtains (Für PC, Ihr benötigt also nur diesen Ordner)

In dem Ordner curtains findet Ihr eine index.html als Beispiel, die Ihr mal zum Betrachten doppelklicken könnt. Aus dieser index.html habe ich den Quellcode (unten).

Kopiert nun bitte mit Eurem FTP-Programm den gesamten Ordner curtains (natürlich ohne die index.html, die Beispielseite) in das Stammverzeichnis Eures Projektes auf Eurem Server, dort wo sich auch Eure
index.html befindet und zum lokalen Betrachten in den Ordner “Lokale Publizierung” auf Eurem PC.

Ihr zieht Euch eine neue Seite auf und stellt den Master-Rahmen dieser Seite auf “ZeroMargins”.

> Klickt auf das Layout > Fenster Layout-Eigenschaften > fügt den Code unten Zwischen Head Tags ein

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="./curtains/jquery.easing.1.3.js" type="text/javascript"></script>

 
<script type="text/javascript">
  $(document).ready(function() {
 
   $curtainopen = false;
 
   $(".rope").click(function(){
    $(this).blur();
    if ($curtainopen == false){
     $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
     $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
     $(".rightcurtain").stop().animate({width:'60px'},2000 );
     $curtainopen = true;
    }else{
     $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
     $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
     $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
     $curtainopen = false;
    }
    return false;
   });
 
  });
</script>


<style type="text/css">
    *{
       margin:0;
       padding:0;
    }
     body {
     text-align: center;
     background: #4f3722 url('./curtains/images/darkcurtain.jpg') repeat-x;
    }
     img{
     border: none;
    }
     .leftcurtain{
     width: 50%;
     height: 495px;
     top: 0px;
     left: 0px;
     position: absolute;
     z-index: 2;
    }
     .rightcurtain{
     width: 51%;
     height: 495px;
     right: 0px;
     top: 0px;
     position: absolute;
     z-index: 3;
    }
     .rightcurtain img, .leftcurtain img{
     width: 100%;
     height: 100%;
    }
     .logo{
     margin: 0px auto;
     margin-top: 150px;
    }
     .rope{
     position: absolute;
     top: -40px;
     left: 70%;
     z-index: 4;
    }
</style>

... fügt den Code (unten) dann im gleichen HTML-Editor > Beginn des Haupttextes ein

<div align="center">

<div class="leftcurtain"><img src="./curtains/images/frontcurtain.jpg"/></div>
<div class="rightcurtain"><img src="./curtains/images/frontcurtain.jpg"/></div>
<a class="rope" href="#"><img src="./curtains/images/rope.png"/></a>

... und zum Abschluss des DIV-Befehls dann im gleichen HTML-Editor > Ende des Haupttextes das ein

</div>

... anschließend könnt Ihr Text oder ein Bild (wie ich es hier getan habe) ganz normal auf der Seite einfügen. Da ich oben im Code bereits das Zentrieren im Layout-Bereich eingebaut habe ...

<div align="center">
... hier zwischen ist alles zentriert
</div>

.... wird dann der Text oder das Bild auch gleich zentriert erscheinen, wenn Ihr die Elemente links an das Layout setzt. Bitte verwendet für diese Seite keine Tabellen, da sich sonst der Vorhang im IE nicht korrekt schließt.



Viel Erfolg!

nach oben

zurück