# HTML5 One-Pager Seite



## yuro (1. Juni 2012)

Servuuus,

Edit: Habs jetzt  rausgefunden... also hab da mal so ne Beispielseite:

http://www.hyundai-i30.eu/

Ich will jetzt auch ne Website kreieren wo ein Mensch nach unten schwimmt, sobald ich auf einen Link in der Navigation klicke, d.h. er scrollt dann zu dem jeweiligen Menüpunkt runter. Realisieren tu ich das mit HTML5 und CSS3.

Im Hintergrund sind Fische die sich bewegen sollen.

Was benötige ich genau? da Brauch ich doch mehrfache Grafikbilder vom Menschen bzw. von den Fischen oder?


----------



## ByeBye 270552 (1. Juni 2012)

Servus yuro,

also wenn du es so machen willst wie Hyundai, dann brauchst du auch JavaScript. Falles es nur ähnlich sein soll, muss ich gestehen, dass ich noch nicht ganz verstanden habe, was du darstellen willst.

Liebe Grüße,
Mainz007


----------



## yuro (3. Juni 2012)

Also ich will das jetzt nicht genau wie hyundai machen sondern in der Form als One-Pager-Site und halt nur mit reinem HTML5 und CSS3. Das Template will ich dann in ein CMS reinpacken und zwar TYPO3.

Jetzt hab ich halt ne Frage wenn ich zum beispiel mit der Maus auf ein button rüberfahre soll von links der Textinhalt in einer Box kommen. Die Box realisier ich in der css datei und den Text will ich in Typo3 eintragen. Jetzt ist meine Frage wie ich das machen kann, da ja alles auf einer Seite passiert. Kennt sich da jemand genauer aus?


----------



## javaDeveloper2011 (3. Juni 2012)

Hi,

für solche Effekte, erst recht wenn eine Aktion auf einem Element (Klick auf Button) etwas mit einem anderen Element (Text) machen soll, braucht du immer JavaScript.
"One-Pager-Site" geht natürlich auch so, mit der altmodischen Methode:
*<a href="#ENGINEERING">ENGINEERING</a>*
führt zu
*<h1 id="ENGINEERING">ENGINEERING</h1>*
Willst du aber langsames - effektvolles - Scrollen braucht du JS, am besten jQuery.

javaDeveloper2011


----------



## yuro (5. Juni 2012)

Hm.. ok. Wie würd ich das denn in JavaScript schreiben wenn ich die Box mit HTML und CSS realisiert habe, also das Aussehen sozusagen programmiert. ich will ja eigentlich nur den textinhalt im TYPO3 Editor editierbar machen.


----------



## javaDeveloper2011 (5. Juni 2012)

Hi,

zum Scroll-Effekt gibts ein gutes Tutorial bei dr.web

jQuery Scroll Path ist zwar nicht wonach du gesucht hast, bin aber drauf gestoßen und wollte es dir nicht vorenthalten.

javaDeveloper2011


----------



## Boyan Sabev (5. Juni 2012)

Schau mal bei jquery tools vorbei! 

http://jquerytools.org

Du willst nehme ich mal an dass der schwimmer immer mitgeht, sehe nicht warum du mehrere images dazu brauchst. Einfach ein transparentes png image mit position fixed (oder besser noch eine gute alternative zu fixed)


----------

