single-scrolling-page aber auch schräg "fliegen" nur wie?

[nnom2002]

Hallo alle zusammen =)
Ich bin grad dabei meine Seite zu bauen hab zwar viel ahnung von html und css aber noch nicht soo viel von Java script und jquery.

ich wollte eine single-scrolling-page bauen (hier ein schickes Beispiel: f$ | dsign)




aber bei mir soll es nicht nur Vertikal ODER Horizontal hin und her Fliegen sondern auch Schräg von einem zum anderen Punkt. doch leider geht das nicht mit der kennt jemand eine Methode die ich gebrauchen kann?


vielen dank bis den Nico =)

 

[cebito]

AW: single-scrolling-page aber auch schräg "fliegen" nur wie?

Wieso sollte das nicht gehen mit der "Methode"?
Vielleicht so ungefähr?

   $('html,body').animate({
      scrollTop:  $(verweisziel).offset().top,
      scrollLeft:  $(verweisziel).offset().left
   },  3000 , function (){location.hash = verweisziel;});

Ungetestet, aber auch nur als Denkanstoß gedacht.

 

[sokie]

AW: single-scrolling-page aber auch schräg "fliegen" nur wie?

vielleicht ist auch das Plugin "scrollTo" interessant.
demo hier-> jQuery.ScrollTo
Projektseite hier->

 

[nnom2002]

AW: single-scrolling-page aber auch schräg "fliegen" nur wie?

vielleicht ist auch das Plugin "scrollTo" interessant.
demo hier-> jQuery.ScrollTo
Projektseite hier->

=) sowas hab ich gesucht jetzt hab ich aber große Probleme das auf meiner Seite anzuwenden. Allein das tut auf Englisch macht die ganze sache schon schwierig und irgendwie gibs da ne methode wo man im java script hinschreibt wo es hingehen soll (zB 300px nach unten) oder die methode mit einem Ankerlink. Wobei ich gern den Ankerlink nutzen möchte. kann mir jemand helfen vllt mit einem guten Deutschen tut oder sonst irgendwie.

 

[sokie]

AW: single-scrolling-page aber auch schräg "fliegen" nur wie?

Das ist kein Script, dass man mal eben so in die seite einbindet, und mit ein paar angaben lauffähig macht.
da geht es schon um überlaufenden Inhalte. Das heisst dass deine Seite vom Aufbau schon so sein muss, dass das script benutzt werden kann.
Am besten ist du postest (wie eigentlich bei jeder Frage um den Themenbereich html/css/scripts) den Code (html und css) oder besser einen Link zu der Seite.

 

[nnom2002]

AW: single-scrolling-page aber auch schräg "fliegen" nur wie?

Ok also ich hab die Seite jetzt mal Hochgeladen mit dem grundgerüst wie ich mir das vorgestellt habe:

ich hab das script mal rausgelassen da es eh überhaupt nicht funktoniert hat.

also wie man sieht verweist die Navi auf Ankerlinks im Dokument.

 

[sokie]

AW: single-scrolling-page aber auch schräg "fliegen" nur wie?

ja, das Markup ist optimal für Dein Vorhaben.
ich würde allerdings dem Body noch ein overflow: hidden geben, um die Scrollbars loszuwerden.
um dein jQeury/Javascript auszuführen wenn die Seite geladen ist, erstellst du eine einfache Hüllfunktion mit $(document).ready().

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
   //hier kommt das ganze script rein.
  }
</script>

da die a elemente in #navi schon den passenden Bezeichner im href haben wird das einfach:

    //sammeln aller a elemente über den selektor $("#navi a"):
   $("#navi a").each(function(){ //per each() wird über die einzelnen Elemente iteriert (ähnl. "for"-Schleife):
    $this.click(function(e){//"e" steht für das click-event
      e.preventDefault();//verhindert das neuladen der Seite bei click
      var idName = $(this).attr("href");//liest den Wert aus dem href-attr. des angeklickten a
      $("body").scrollTo(idName,2000); //scrollt das jeweilige Element an die position.
    }//ende click-handler
  });//ende each()

das wars auch schon, die 2000 steht für die animationsdauer in millisekunden.