Anzeige

Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung | PSD-Tutorials.de

Erstellt von onpoint, 23.10.2013.

  1. onpoint

    onpoint Aktives Mitglied

    Dabei seit:
    27.01.2010
    Beiträge:
    551
    Geschlecht:
    männlich
    Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung
    Hallo an die Forengemeinde,

    ich hätte eine kleine Frage. Wer kennt ein Skript, welches folgendes ermöglicht?

    Link: http://prothemeus.com/demo/noble/

    Es geht mir dabei um die Elemente (hier die Fotos), die sich beim Verändern des Viewportes automatatisch skalieren und ausrichten. In Meinem Fall habe ich zwei Hintergrundbilder, die ich mit jeweils 50% Breite vollflächig platzieren möchte.

    Masonry steht bei solchen Skripten natürlich weit oben, allerdings ist das nicht 100%tig das, was ich suche.

    Wäre super, wenn von euch jemand was kennt! :)

    Viele Grüße und nen schönen Abend!
     
    #1      
  2. cythux

    cythux Aktives Mitglied

    Dabei seit:
    10.01.2008
    Beiträge:
    1.489
    Geschlecht:
    männlich
    Ort:
    Waimes (Weismes), Belgien
    Software:
    PS CC 2014, Lightroom 5 Aptana Studio 3, ST2/3, SASS+COMPASS
    Kameratyp:
    Canon EOS 1200D
    Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung
    AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

    Ich denke mal ganz spontan, das dies mittels Mediaqueries erstellt wurde
     
    #2      
  3. onpoint

    onpoint Aktives Mitglied

    Dabei seit:
    27.01.2010
    Beiträge:
    551
    Geschlecht:
    männlich
    Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung
    AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

    Hallo cythux,

    css mediequeries arbeiten ja mit breakpoints. Das Layout der Beispielseite wurde mit Prozenten aufgebaut und ist flexibel.. deshalb schließe ich an der Stelle den Einsatz von mediaqueries eher aus..

    Viele Grüße!
     
    #3      
  4. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung
    AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

    Wenn die beiden Bilder stets die gleichen sind, könntest du nicht ein großes daraus machen und dieses per Vollbild-PlugIn in den Hintergrund packen? Wenn beide gleich breit sind, benutzen sie nebeneinander gestellt (und zentriert) 50% der Breite. Die automatische Anpassung erfolgt dann durch das PlugIn.


    Duddle
     
    #4      
  5. cythux

    cythux Aktives Mitglied

    Dabei seit:
    10.01.2008
    Beiträge:
    1.489
    Geschlecht:
    männlich
    Ort:
    Waimes (Weismes), Belgien
    Software:
    PS CC 2014, Lightroom 5 Aptana Studio 3, ST2/3, SASS+COMPASS
    Kameratyp:
    Canon EOS 1200D
    Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung
    #5      
  6. onpoint

    onpoint Aktives Mitglied

    Dabei seit:
    27.01.2010
    Beiträge:
    551
    Geschlecht:
    männlich
    Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung
    AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

    Interessant allemal! Werde ich sicherlich bei einem meiner Projekte verwenden, allerdings macht dieses Skript nichts anderes als Masonry auch...sprich: es ordnet elemente neu an, um sie schön am viewport auszurichten, resized sie aber nicht...mit flexiblen Größenangaben gibts da oft Probleme..

    @Duddle:

    Die Bilder werden dynamisch erzeugt, es sind also immer andere.

    Bis hierhin danke für Eure Posts!
     
    #6      
  7. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung
    AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

    Könntest du etwas näher beschreiben, wie sich die Seite verhalten soll? Dein erster Beitrag sagt, du willst 2 Bilder im Hintergrund als Vollbild.
    Zusätzlich sollen sie sich aber anpassen und neu ausrichten. Wann genau soll das passieren? Soll das animiert werden oder willst du schlichtweg ein responsives Umbrechen?

    Auf dieser Seite skalieren die Bilder auch und ordnen sich ab bestimmten Größen anders an. Würde das schon reichen?


    Duddle
     
    #7      
  8. onpoint

    onpoint Aktives Mitglied

    Dabei seit:
    27.01.2010
    Beiträge:
    551
    Geschlecht:
    männlich
    Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung
    AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

    Hallo Duddle,

    danke für Deinen Beitrag. Ich möchte, dass die Fotos sich genau wie in der Beispielwebsite oben verhalten. Sprich: Bei Browser-resize skalieren sie sich und ordnen sich animiert wieder ein.

    Ich habs auch fast geschafft im eigenen Projekt (danke cythux, Isotope hat mich weitergebracht!)

    Nur gibts noch ein kleines Problem:

    Die Fotos stellen sich nicht immer nebeneinander. Je nachdem wie man den Browser skaliert brechen sie um und stellen sich wieder untereinander.

    Meine erste Befürchtung war eine ungerade Zahl bei der Breite des Elements. Dann kann man natürlich nicht mehr durch 2 teilen und es bleibt immer ein Restpixel von 1. Deshalb hab ich mit einer Abfrage alias "if varelemwidth % 2 == 1, dann zieh 1px vom zweiten Element ab }

    Hat so auch funktioniert, die 1px wurden vom zweiten Element abgezogen, wenn der Fall eintrat, allerdings standen die Fotos trotzdem untereinander...es muss also an was anderes liegen.

    Hier könnt ihr euch das Projekt anschauen, vielleicht hilft das:
    http://s348610024.online.de/project/

    Ich dachte, dass vielleicht die custom scrollbars was damit zu tun haben, allerdings gibts auch keine veränderung, wenn ich diese rausnehme. Komisch ist aber, dass wenn die Scrollbars drin sind, die Fotos beim Aufruf der Seite Abstände zueinander haben, nach dem Resizen aber nicht...

    Findet ihr vielleicht den Fehler? :)

    Danke im Voraus!
     
    #8      
  9. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung
    AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

    Das Wordpress-Theme verhält sich an bestimmten Punkten auch so, also nehme ich an das sind schlichtweg Punkte an denen das Script mathematisch es nicht anders hinbekommt, auch mit gerundeten Werten. Das ist jedoch nur Spekulation.
    Beim lokalen Test sehe ich auch, dass z.B. "width: 49.8%" für #mainbar li.home-picture seltener umbricht als bei den jetzigen 50%, aber das bringt natürlich unschöne Abstände.


    Duddle
     
    #9      
  10. onpoint

    onpoint Aktives Mitglied

    Dabei seit:
    27.01.2010
    Beiträge:
    551
    Geschlecht:
    männlich
    Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung
    AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

    Hallo Duddle,

    danke für den Hinweis. Selbst mit 49.9% bricht es nur noch selten um, allerdings taucht wie du sagst manchmal ein Abstand von einem Pixel auf, das ist natürlich unschön und nur eine Notlösung.

    Was auch seltsam ist: Wenn man die Seite aufruft sind die Scrollbars dafür verantwortlich, dass die bilder abstände von optisch geschätzt mindestens 5 Pixel haben. Nach dem resizen ist alles wieder gut. Woran liegt das? Hast du da vielleicht auch was gefunden?

    Grüße und danke!
     
    #10      
  11. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung
    AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

    Pack die Initialisierung in
    Code (Text):
    1. $(window).load(function(){
    2. });
    dann wartet er bis alle Bilder korrekt geladen wurden.


    Duddle
     
    #11      
x
×
×