横向SVG滑动焦点图特效

横向SVG滑动焦点图特效

简介

一款由SVG实现的反应灵敏的简单响应式滑动焦点图特效。

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

事件控制

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);
		}
	});
}
打赏
下载 在线预览 积分 (-2) 吐槽 (2)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽