Pratik khadka khadkaPratik

Fancy Slider

Based on dribbble shot by Kreativa Studio - https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation

Fullscreen please. Looks best in Webkit browsers, because clip-path not working in FF/IE without SVG fallbacks, which I don't want to use in this demo. Not responsive atm, I will figure out something soon.

Features:

Clip-path for image masking rectangle border (webkit only).

Fullscreen drag-slider with parallax

Sort of responsive. Tested in Chrome/FF/last IE, everywhere looks fine.

Source of inspiration - https://stupid-studio.com/ (their js is minified, so all code is mine, except some parts of svg, like viewBox/minHeight).

A Pen by Nikolay Talanov on CodePen.

License.

	<div id="modal-container">
	<div class="modal-background">
	<div class="modal">
	<h2>I'm a Modal</h2>
	<p>Hear me roar.</p>
	<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
	<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
	</svg>
	</div>
	</div>