Carousel for clothing items?

Hey, I want to program a website and create a clothing carousel.

Basically like in this video

How can I program something like this with PHP, CSS, JS, and HTML? Do I need libs for this?

I already had the pictures

(1 votes)
Loading...

Similar Posts

Subscribe
Notify of
6 Answers
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tommentator
1 year ago

What you link as a video is an animation designed/developed with the help of the very expensive Adobe after effects.

If you want to program something similar, you need to have your pictures while moving, zooming, reducing etc.

In addition to the real-time transformation of the images, the images can all be precalculated, and they only have to be hidden. But there are certain many different designs that can be made available.

I don’t know if you can do this with your specifications, you’ll need a dedicated graphicslib. You don’t want to reinvent the bike.

Tommentator
1 year ago
Reply to  DoGame5

I’m really sorry I couldn’t help you!

What would you have expected me to know a tutorial here?

I can program, but what you want to do is not easy. Above all, it also depends on how good it wants; correspondingly, the effort increases extremely.

I hope other programming colleagues here can help you better.

Tommentator
1 year ago

I dare to say that no one – except he just happens to do exactly what you want – can bring code snipsel or example here to solve your problem, this is too special and also expensive.

That’s why I told you that your example video was made by an expensive animation software and I thought you didn’t know that exactly.

That’s why I explained what you have to do to animate images in this way with a program…

I wish you a lot of success and happiness in your project.

elmex7
1 year ago

I realized something like that via SVG. It’s really easy with CSS animations.

In each group (g-tag) is an image, in Example 8

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;
	}