Antworten auf deine Fragen:
Neues Thema erstellen

Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

onpoint

Aktives Mitglied

Hallo an die Forengemeinde,

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

Link:

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!
 

cythux

Aktives Mitglied

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

Ich denke mal ganz spontan, das dies mittels Mediaqueries erstellt wurde
 

onpoint

Aktives Mitglied

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!
 

Duddle

Posting-Frequenz: 14µHz

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
 

onpoint

Aktives Mitglied

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!
 

Duddle

Posting-Frequenz: 14µHz

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 skalieren die Bilder auch und ordnen sich ab bestimmten Größen anders an. Würde das schon reichen?


Duddle
 

onpoint

Aktives Mitglied

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:


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!
 

Duddle

Posting-Frequenz: 14µHz

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
 

onpoint

Aktives Mitglied

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!
 

Duddle

Posting-Frequenz: 14µHz

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

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


Duddle
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.359
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben