Karussell für Kleidungsstücke?
Hey, ich will eine Webseite programmieren und ein Kleidungskarussell erstellen.
Im Grunde so wie in diesem Video
Wie kann ich so etwas programmieren mit php, css, js & html? Brauche ich dafür libs?
Die Bilder hätte ich bereits
2 Antworten
Was du als Video verlinkt hast, ist ja eine Animation die mit Hilfe des sehr teuren Adobe after effects designed/entwickelt wurde.
Wenn du sowas ähnliches programmieren willst, musst du deine Bilder, während diese sich auf eine Art Ellipsenbahn bewegend, vergrößern, verkleinern etc. können.
Neben der Echtzeit Transformation der Bilder, können die Bilder alle auch vorberechnet werden, und die müssen dann nur noch eingeblendet werden. Aber es gibt bestimmt viele verschiedene Entwürfe wie man das bereitstellen kann.
Ob du das mit deinen Vorgaben schaffst weiß ich nicht, eine dedizierte Grafiklib wirst du wohl brauchen. Du willst ja das Rad nicht neu erfinden.
Das tut mir jetzt echt leid, dass ich dir nicht helfen konnte!
Was hättest du denn von mir erwartet, dass ich hier ein Tutorial kenne/mache?
Ich kann zwar programmieren, aber das was du genau machen möchtest, ist nicht ganz einfach. Vor allem kommt es auch noch drauf an, wie gut es haben willst; entsprechend steigt der Aufwand extrem.
Ich hoffe anderen Programmierkollegen hier können dir besser helfen.
Ein paar Beispiele, Libs und/oder kleine Code Beispiele, statt meinen Beitrag nochmal zu erkären
Ich wage zu behaupten, dass keiner – außer er macht gerade zufällig genau das was du machen willst – hier Code Schnipsel oder Beispiel bringen kann, um dein Problem zu lösen, dazu ist das zu speziell ist und außerdem aufwendig.
Deswegen habe ich dir auch erklärt, dass dein Beispiel Video durch eine teure Animationssoftware gemacht wurde und bin davon ausgegangen, dass du das gar nicht so genau weißt
Darum habe ich erklärt was du überhaupt können musst, um Bilder in dieser Art mit einem Programm zu animieren...
Ich wünsche dir noch viel Erfolg und Glück bei deinem Projekt.
Ich habe sowas mal via SVG realisiert. Geht eigentlich ganz einfach mit CSS Animationen darin.
In jeder Gruppe (g-tag) ist ein Bild, im Beispiel 8 Stück
svg > g {
offset-path: path('M 640 120 C 120 118.466 120 238.466 120 238.466 C 120 238.466 120 360 640 360 C 1160 360 1160 240 1160 240 C 1160 240 1160 120 640 120');
offset-distance: 0;
offset-rotate: 0deg;
animation-name: path3dfollow;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-style: preserve-3d;
filter: url('#simpleshadow');
}
@keyframes path3dfollow {
0% {
offset-distance: 0;
transform: scale(-0.25,0.25);
}
25%,
75% {
transform: scale(0,0.25);
}
50% {
transform: scale(0.75,0.75);
}
100% {
transform: scale(-0.25,0.25);
offset-distance: 100%;
}
}
svg > g:nth-of-type(1) {
animation-delay: -1.5s;
}
svg > g:nth-of-type(2) {
animation-delay: -3s;
}
svg > g:nth-of-type(3) {
animation-delay: -4.5s;
}
svg > g:nth-of-type(4) {
animation-delay: -6s;
}
svg > g:nth-of-type(5) {
animation-delay: -7.5s;
}
svg > g:nth-of-type(6) {
animation-delay: -9s;
}
svg > g:nth-of-type(7) {
animation-delay: -10.5s;
}
svg > g:nth-of-type(8) {
animation-delay: -12s;
}
Danke das du meine Idee nochmal detailliert beschrieben hast.. Nur geholfen hast du mir damit leider nicht.
Am Ende soll eine Person auf dieser Webseite zu sehen sein welche dann als Mockup verschiedene Kleidungen trägt. Die in einem solchen Karussell gewechselt werden kann