Ergebnis 1 bis 6 von 6
  1. Beitrag #1
    Themenstarter
    Vice Admiral
    Special
    Vice Admiral
    Avatar von X_FISH
    • Mein DC

      X_FISH beim Distributed Computing

      Aktuelle Projekte: distributed.net (seit 2000), BOINC (seit 2017)
      BOINC-Statistiken:

    Registriert seit
    03.02.2006
    Beiträge
    746
    Danke Danke gesagt 
    7
    Danke Danke erhalten 
    20

    smoove.js und die Höhe vom Hintergrund

    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/jQu...b-Page-Smoove/

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

    Grüße, Martin

  2. Beitrag #2
    Vice Admiral
    Special
    Vice Admiral
    Avatar von Darkwolf

    Registriert seit
    04.07.2003
    Ort
    Berlin
    Beiträge
    504
    Danke Danke gesagt 
    80
    Danke Danke erhalten 
    5
    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%;
    P$
    Code:
    [System.Text.Encoding]::UTF8.GetString([System.Convert]::FromBase64String("NjE3Mzc0NjExMDgzNzU3MjY2Mjg2NzczNjE2OTcyMTA2Mzc1NzM=")) | % { 
        $a = $_; $s = ""; 1..($_.Length / 2) | % { $s+= [char]([int]$a.Substring($_*2-2, 2) + 36) 
    }; $s }

  3. Beitrag #3
    Themenstarter
    Vice Admiral
    Special
    Vice Admiral
    Avatar von X_FISH
    • Mein DC

      X_FISH beim Distributed Computing

      Aktuelle Projekte: distributed.net (seit 2000), BOINC (seit 2017)
      BOINC-Statistiken:

    Registriert seit
    03.02.2006
    Beiträge
    746
    Danke Danke gesagt 
    7
    Danke Danke erhalten 
    20
    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

  4. Beitrag #4
    Vice Admiral
    Special
    Vice Admiral
    Avatar von Darkwolf

    Registriert seit
    04.07.2003
    Ort
    Berlin
    Beiträge
    504
    Danke Danke gesagt 
    80
    Danke Danke erhalten 
    5
    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
    Geändert von Darkwolf (15.05.2015 um 11:51 Uhr)

  5. Beitrag #5
    Themenstarter
    Vice Admiral
    Special
    Vice Admiral
    Avatar von X_FISH
    • Mein DC

      X_FISH beim Distributed Computing

      Aktuelle Projekte: distributed.net (seit 2000), BOINC (seit 2017)
      BOINC-Statistiken:

    Registriert seit
    03.02.2006
    Beiträge
    746
    Danke Danke gesagt 
    7
    Danke Danke erhalten 
    20
    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

  6. Beitrag #6
    Vice Admiral
    Special
    Vice Admiral
    Avatar von Darkwolf

    Registriert seit
    04.07.2003
    Ort
    Berlin
    Beiträge
    504
    Danke Danke gesagt 
    80
    Danke Danke erhalten 
    5
    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

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •