Radial SVG Responsive Slider

Shares

A simple, responsive slider, with a radial transition effect powered by SVG clipPath and mask elements.

Source: https://codyhouse.co/gem/radial-svg-slider/

HTML:

<div class="cd-radial-slider-wrapper">
	<ul class="cd-radial-slider" data-radius1="60" data-radius2="1364" data-centerx1="110" data-centerx2="1290">
		<li class="visible">
			<div class="svg-wrapper">
				<svg viewBox="0 0 1400 800">
					<title>Animated SVG</title>
					<defs>
						<clipPath id="cd-image-1">
							<circle id="cd-circle-1" cx="110" cy="400" r="1364"/>
						</clipPath>
					</defs>
 
					<image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
				</svg>
			</div> <!-- .svg-wrapper -->
 
			<div class="cd-slider-content">
				<div class="wrapper">
					<div>
						<h2>Slide #1 Title</h2>
						<p>Lorem ipsum dolor sit amet, consectetur.</p>
						<a href="#0" class="cd-btn">Learn More</a>
					</div>
				</div>
			</div> <!-- .cd-slider-content -->
		</li>
 
		<li class="next-slide">
			<!-- ... -->
		</li>
 
		<!-- additional slides here -->
 
	</ul> <!-- .cd-radial-slider -->
 
	<ul class="cd-slider-navigation">
		<li><a href="#0" class="next">Next</a></li>
		<li><a href="#0" class="prev">Prev</a></li>
	</ul> <!-- .cd-slider-navigation -->
 
	<div class="cd-round-mask">
		<svg viewBox="0 0 1400 800">
			<defs>
				<mask id="cd-left-mask" height='800px' width="1400px" x="0" y="0" maskUnits="userSpaceOnUse">
					<path fill="white" d="M0,0v800h1400V0H0z M110,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S143.137,460,110,460z"/>
			    </mask>
 
			    <mask id="cd-right-mask" height='800px' width="1400px" x="0" y="0" maskUnits="userSpaceOnUse">
					<path fill="white" d="M0,0v800h1400V0H0z M1290,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S1323.137,460,1290,460z"/>
			    </mask>
			</defs>
		</svg>
	</div>
</div> <!-- .cd-radial-slider-wrapper -->

CSS:

.cd-radial-slider > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: transform .2s;
}
.cd-radial-slider > li.visible {
  position: relative;
  opacity: 1;
}
.cd-radial-slider > li.is-animating, 
.cd-radial-slider > li.prev-slide, 
.cd-radial-slider > li.next-slide {
  opacity: 1;
}
.cd-radial-slider > li.is-animating {
  z-index: 2;
}
.cd-radial-slider > li.scale-down, 
.cd-radial-slider > li.move-up {
  z-index: 3;
}
.cd-radial-slider > li.move-up {
  /* class added to the navigation round element when clicked - used to create the click effect */
  animation: cd-clicked .2s;
}
.cd-radial-slider > li.scale-down {
  /* class added to the navigation round element to create the scale down effect  */
  transform: scale(0);
}
.cd-radial-slider > li.next-slide {
  /* for the scale-down/click effect - change the transform origin so that it is the center of the navigation round element */
  transform-origin: 92.14% 50%;
}
.cd-radial-slider > li.prev-slide {
  transform-origin: 7.86% 50%;
}

Event Handling:

var radialSlider = function(element) {
	this.element = element;
	this.slider = this.element.find('.cd-radial-slider');
	this.slides = this.slider.children('li');
	//...
	this.navigation = this.element.find('.cd-radial-slider-navigation');
	//...
	this.bindEvents();
} 
 
radialSlider.prototype.bindEvents = function() {
	var self = this;
 
	//update visible slide when clicking the navigation round elements
	this.navigation.on('click', function(event){
		if( !self.animating ) {
			self.animating =  true;
			event.preventDefault();
			var direction = ( $(event.target).hasClass('next') ) ? 'next' : 'prev';
			//update radialSlider index properties
			self.updateIndexes(direction);
			//show new slide
			self.updateSlides(direction);
		}
	});
}

Animate:

clipPathVisible.animate({'r': radius2}, duration, customMinaAnimation, function(){
	//callback function here
});

Apply Mask:

this.slides.eq(this.visibleIndex).find('image').attr('style', 'mask: url(#'+this.rightMask.attr('id')+')');
Subscribe to the JqueryPlugins.net mailing list:
* indicates required

Reply

Pin It on Pinterest