smoove.js und die Höhe vom Hintergrund

X_FISH

Grand Admiral Special
Mitglied seit
03.02.2006
Beiträge
4.206
Renomée
1.941
  • BOINC Pentathlon 2017
  • BOINC Pentathlon 2018
  • BOINC Pentathlon 2019
  • SETI@Home Wow!-Event 2019
  • BOINC Pentathlon 2020
  • THOR Challenge 2020
  • BOINC Pentathlon 2021
  • BOINC Pentathlon 2022
  • BOINC Pentathlon 2023
Ich bastle gerade wieder ein wenig mit den aktuellen Möglichkeiten bei CSS und Co. herum.

Mit Effekten beim Scrollen habe ich bisher nur wenig (bis gar nichts) gemacht und schaue mir gerade smoove.js an.

http://plugins.jquery.com/smoove/

Der Effekt mit dem sanften Einblenden von Seiteninhalten ist ganz schick, jedoch wollte ich nun einen größeren <div>-Container (etwa 200% der sichtbaren Seitenhöhe hoch) auf diese Art einbinden.

Der unschöne Effekt: Bei exakt 100% der Seitenhöhe hört die Hintergrundfarbe vom Container auf. :)

Container soll über gesamte Höhe mit weiß gefüllt sein. Der Inhalt im Container verursacht eine Höhe von etwa 1500 px.

Bei einer darstellbaren Seitenhöhe von 1024 px wird der Container nur 1024 px »hoch« mit weißer Füllung versehen. Der Text, welcher unterhalb 1024 px Höhe steht, ist somit nicht mehr lesbar (wegen dem Hintergrundbild).

Hat jemand da ein funktionierendes Beispiel?

Von mir verwendeter Browser (mit dem Fehlerbild): Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.111 Safari/537.36
_____

Beispiele für smoove.js:

http://www.jqueryscript.net/demo/jQ...S3-Scrolling-Effects-On-Your-Web-Page-Smoove/

Oder ist es schlichtweg so, dass nur kleinere Elemente sinnvoll mit smoove.js eingeblendet werden sollten/können?

Grüße, Martin
 
Ich hab damit leider noch nichts gemacht, aber versuche mal mit folgenden CSS-Attributen was zu erzielen:

display: block;
background-size: BREITE HÖHE; (bsp: background-size: 720px 200%;
 
Vielen Dank für die Antwort in dem doch schon ziemlich angestaubten Thread (März '15). Ich hatte noch weitere Probleme mit Smoove (inkl. Smartphonekompatibilität). Bin daher davon abgekommen. Effekte sind schön, aber wenn darunter die Usability so sehr eingeschränkt wird -> dann lieber »langweiliges CSS ohne JS was überall läuft«.

Weniger ist manchmal eben doch mehr.

Grüße, Martin
 
Jo das stimmt wohl.
Was ich sonst wärmstens empfehlen kann, was responsive Design betrifft, ist twitter bootstrap, ist ein HTML / CSS / Javascript - Framework.

http://getbootstrap.com/

Muss man sich kurz einfuchsen, ist aber wirklich sehr geil gemacht, arbeitet auch mit less und sass. Das berechnet dir die Ausgabe anhand der Bildschirmauflösung, man hat ein schönes Gridsystem, wo man auch die Umbrüche der verschiedenen Auflösungen einarbeiten kann. Hat viele Standard geschichten, wie Modals, Slider etc pp. Die wirklich sehr einfach zu steuern sind.

Grüße Darkwolf
 
Zuletzt bearbeitet:
Sieht in jedem Fall interessant aus.

Ob ich das bei meinen bis zu 18 Jahre alten (und mehrfach überarbeiteten) Websites einbinden kann? Muss da wohl mal ein paar Tage Zeit investieren. ist ja nicht (mehr) mein Hauptberuf. ;)

Grüße, Martin
 
Wenn Du das gesaamte Layout damit bauen willst, dann benötigt es wohl seine Zeit, da du jegliche html Ausgabe überarbeiten solltest.

Du kannst jedoch gezielt einzelne "Features" verwenden, da ist dann der Aufwand eher gering.
Es besteht im Prinzip aus einer CSS & einer Javascript Datei die eingebunden wird. Dazu kommt noch JQuery, dann steht dir alles zur Verfügung.
Dann könntest Du dir in ein bestehendes Layout zB. eine Topnavigation einbauen siehe: http://getbootstrap.com/examples/starter-template/

Schau dir die Seite mal an und verkleinere dir das Fenester, dann siehst du wie die Navigation automatisch umbricht, so sieht das dann auch bei Handhelds aus.

Musst halt aufpassen, wenn du zufällig gleichnamige CSS Klassen verwendest, dann könnte es zu Konflikten kommen, da sind eben auch Standards für die ganzen Tags wie p, h2, h3 etc. vordefiniert. Wenn Du jedoch eigene Deklarationen in eigenen CSS Klassen hast, dann haben die Vorrang.

Ansonsten würde ich Dir empfehlen, wenn Du Dir ein paar nette Features ausgeguckt hast und denkst, das könnte man gut einbinden, kannst Du Dir auch
ein Customize erstellen lassen.

http://getbootstrap.com/customize/

Falls Du mal jemanden brauchst, wenn eine Antwort beim Board etwas zu lange dauert kannst dich auch gerne an mich wenden. Ich mache das Hauptberuflich.
Schreib mir einfach eine PN, habe auch ICQ oder Mail, IRC? Bin eigtl für sowas immer erreichbar.

Greez Darkwolf
 
Zurück
Oben Unten