文章

缩放幻灯片-Zoom Slider

缩放幻灯片-Zoom Slider
Today’s Blueprint is a simple content slider with depth-like zoom functionality. Each slide has a predefined zoom area that will be used to calculate the appropriate scale value for a fullscreen fill. Once the icon for zooming is clicked, the zoom area as well as the page get scaled, creating the illusion that the viewer is approaching the item. Once the whole page is covered, we show some more details.
一个简单的内容滑块，具有缩放功能，每张幻灯片都有一个预定义的缩放区域，用于计算全屏填充的合适比例值，点击缩放图标后，缩放区域和页面会缩小，造成观众接近物品的错觉，一旦整个页面被覆盖，我们会显示更多的细节。

查看演示 下载资源

HTML

  1. <!-- Main container -->
  2. <div class="container">
  3. 	<!-- Blueprint header -->
  4. 	<header class="bp-header cf">
  5. 		<!-- Page title etc. -->
  6. 	</header>
  7. 	<!-- Grid -->
  8. 	<section class="slider">
  9. 		<div class="slide slide--current" data-content="content-1">
  10. 			<div class="slide__mover">
  11. 				<div class="zoomer flex-center">
  12. 					<img class="zoomer__image" src="images/iphone.png" alt="iPhone" />
  13. 					<div class="preview">
  14. 						<img src="images/iphone-content-preview.png" alt="iPhone app preview" />
  15. 						<div class="zoomer__area zoomer__area--size-2"></div>
  16. 					</div>
  17. 				</div>
  18. 			</div>
  19. 			<h2 class="slide__title"><span>The Classy</span> iPhone 6</h2>
  20. 		</div>
  21. 		<div class="slide" data-content="content-2">
  22. 			<!-- ... -->
  23. 		</div>
  24. 		<!-- ... -->
  25. 		<nav class="slider__nav">
  26. 			<button class="button button--nav-prev">
  27. 				<i class="icon icon--arrow-left"></i>
  28. 				<span class="text-hidden">Previous product</span>
  29. 			</button>
  30. 			<button class="button button--zoom">
  31. 				<i class="icon icon--zoom"></i>
  32. 				<span class="text-hidden">View details</span>
  33. 			</button>
  34. 			<button class="button button--nav-next">
  35. 				<i class="icon icon--arrow-right"></i>
  36. 				<span class="text-hidden">Next product</span>
  37. 			</button>
  38. 		</nav>
  39. 	</section>
  40. 	<!-- /slider-->
  41. 	<!-- content -->
  42. 	<section class="content">
  43. 		<div class="content__item" id="content-1">
  44. 			<img class="content__item-img rounded-right" src="images/iphone-content.png" alt="Apple Watch Content" />
  45. 			<div class="content__item-inner">
  46. 				<h2>The iPhone 6</h2>
  47. 				<h3>Incredible performance for powerful apps</h3>
  48. 				<p>...</p>
  49. 			</div>
  50. 		</div>
  51. 		<div class="content__item" id="content-2">
  52. 			<!-- ... -->
  53. 		</div>
  54. 		<!-- ... -->
  55. 		<button class="button button--close">
  56. 			<i class="icon icon--circle-cross"></i>
  57. 			<span class="text-hidden">Close content</span>
  58. 		</button>
  59. 	</section>
  60. 	<!-- /content -->
  61. </div>
  62. <script src="js/classie.js"></script>
  63. <script src="js/dynamics.min.js"></script>
  64. <script src="js/main.js"></script>

CSS

  1. /* Helper classes */
  2. html,
  3. body {
  4. 	overflow: hidden;
  5. 	height: 100%;
  6. }
  8. .container {
  9. 	position: relative;
  10. 	overflow: hidden;
  11. 	overflow-y: scroll;
  12. 	width: 100%;
  13. 	height: 100%;
  14. 	-webkit-overflow-scrolling: touch;
  15. }
  17. .noscroll .container {
  18. 	overflow-y: hidden;
  19. }
  21. .slider {
  22. 	position: relative;
  23. 	z-index: 200;
  24. 	width: 100%;
  25. 	margin: 0 auto;
  26. 	padding: 0 0 7em;
  27. 	text-align: center;
  28. 	-webkit-user-select: none;
  29. 	-moz-user-select: none;
  30. 	-ms-user-select: none;
  31. 	user-select: none;
  32. 	-webkit-touch-callout: none;
  33. 	-khtml-user-select: none;
  34. }
  36. .slide {
  37. 	position: absolute;
  38. 	top: 0;
  39. 	visibility: hidden;
  40. 	width: 100%;
  41. 	opacity: 0;
  42. }
  44. .slide--current {
  45. 	position: relative;
  46. 	z-index: 100;
  47. 	visibility: visible;
  48. 	opacity: 1;
  49. }
  51. .slide__mover {
  52. 	position: relative;
  53. 	z-index: 100;
  54. }
  56. .slide__title {
  57. 	font-size: 1.75em;
  58. 	font-weight: normal;
  59. 	margin: 0 auto;
  60. 	padding: 1em 0 0 0;
  61. }
  63. .slide__title span {
  64. 	font-size: 55%;
  65. 	font-weight: bold;
  66. 	display: block;
  67. 	letter-spacing: 2px;
  68. 	text-transform: uppercase;
  69. 	color: #35303d;
  70. }
  72. .slider__nav {
  73. 	position: absolute;
  74. 	bottom: 2em;
  75. 	width: 100%;
  76. 	text-align: center;
  77. }
  79. .button {
  80. 	font-size: 1.31em;
  81. 	position: relative;
  82. 	display: inline-block;
  83. 	overflow: hidden;
  84. 	margin: 0 25px;
  85. 	padding: 0;
  86. 	cursor: pointer;
  87. 	color: #5c5edc;
  88. 	border: none;
  89. 	background: none;
  90. }
  92. .button:focus {
  93. 	outline: none;
  94. }
  96. .button:hover {
  97. 	color: #fff;
  98. }
  100. .text-hidden {
  101. 	position: absolute;
  102. 	top: 200%;
  103. }
  105. .button--close {
  106. 	font-size: 1.55em;
  107. 	position: absolute;
  108. 	top: 30px;
  109. 	right: 30px;
  110. 	margin: 0;
  111. 	opacity: 0;
  112. 	color: #50505a;
  113. 	-webkit-transition: opacity 0.3s;
  114. 	transition: opacity 0.3s;
  115. }
  117. .content--open .button--close {
  118. 	opacity: 1;
  119. }
  121. /* Zoomer */
  122. .zoomer {
  123. 	position: relative;
  124. 	height: 360px; /* this is needed for IE10 so that vertical flexbox centering works */
  125. }
  127. .flex-center {
  128. 	display: -webkit-flex;
  129. 	display: -ms-flexbox;
  130. 	display: flex;
  131. 	-webkit-align-items: center;
  132. 	-ms-flex-align: center;
  133. 	align-items: center;
  134. 	-webkit-justify-content: center;
  135. 	-ms-flex-pack: center;
  136. 	justify-content: center;
  137. }
  139. .zoomer__image {
  140. 	display: block;
  141. 	margin: 0;
  142. 	-webkit-flex: none;
  143. 	-ms-flex: none;
  144. 	flex: none;
  145. }
  147. .zoomer__area,
  148. .preview {
  149. 	position: absolute;
  150. 	top: 50%;
  151. 	left: 50%;
  152. 	-webkit-transform: translate3d(-50%,-50%,0);
  153. 	transform: translate3d(-50%,-50%,0);
  154. }
  156. .zoomer__area:focus {
  157. 	outline: none;
  158. }
  160. .zoomer__area--size-1 {
  161. 	/* Apple Watch */
  162. 	width: 96px;
  163. 	height: 118px;
  164. }
  166. .zoomer__area--size-2 {
  167. 	/* iPhone */
  168. 	width: 112px;
  169. 	height: 198px;
  170. }
  172. .zoomer__area--size-3 {
  173. 	/* MacBook */
  174. 	width: 315px;
  175. 	height: 200px;
  176. }
  178. .zoomer__area--size-4 {
  179. 	/* iPad */
  180. 	width: 150px;
  181. 	height: 200px;
  182. }
  184. .zoomer__area--size-5 {
  185. 	/* iMac */
  186. 	width: 315px;
  187. 	height: 189px;
  188. }
  190. .preview {
  191. 	overflow: hidden;
  192. 	background: #18191b;
  193. }
  195. .preview img {
  196. 	display: block;
  197. 	border-radius: inherit;
  198. 	-webkit-transform: translate3d(0,0,0);
  199. 	transform: translate3d(0,0,0);
  200. }
  202. .zoomer--active .preview img {
  203. 	-webkit-transform: translate3d(100%,0,0);
  204. 	transform: translate3d(100%,0,0);
  205. }
  207. .rounded {
  208. 	border-radius: 15px;
  209. }
  211. .rounded-right {
  212. 	border-radius: 0 15px 15px 0;
  213. }
  215. .preview__content {
  216. 	position: absolute;
  217. 	top: 0;
  218. 	left: 100%;
  219. 	width: 100%;
  220. 	height: 100%;
  221. 	border-radius: inherit;
  222. }
  223. /* Content */
  224. .content {
  225. 	position: fixed;
  226. 	z-index: 1000;
  227. 	top: 0;
  228. 	left: -100%;
  229. 	overflow: hidden;
  230. 	overflow-y: scroll;
  231. 	width: 100%;
  232. 	height: 100vh;
  233. 	background: #18191b;
  234. 	-webkit-overflow-scrolling: touch;
  235. }
  237. .content--open {
  238. 	left: 0;
  239. }
  241. .content__item {
  242. 	position: absolute;
  243. 	top: 0;
  244. 	display: -webkit-flex;
  245. 	display: -ms-flexbox;
  246. 	display: flex;
  247. 	overflow: hidden;
  248. 	height: 0;
  249. 	min-height: 100%;
  250. 	margin: 0 auto;
  251. 	padding: 2em 0;
  252. 	pointer-events: none;
  253. 	opacity: 0;
  254. 	color: #fff;
  255. 	-webkit-align-items: center;
  256. 	-ms-flex-align: center;
  257. 	align-items: center;
  258. }
  260. .content__item--current {
  261. 	pointer-events: auto;
  262. 	opacity: 1;
  263. }
  265. .content__item--reset {
  266. 	height: auto;
  267. }
  269. .content h2 {
  270. 	font-size: 3.5em;
  271. 	font-weight: normal;
  272. 	margin: 0;
  273. }
  275. .content h3 {
  276. 	font-size: 1.95em;
  277. 	font-weight: normal;
  278. 	margin: 0.25em 0 0.5em;
  279. 	color: #685884;
  280. }
  282. .content p {
  283. 	font-size: 1.25em;
  284. 	line-height: 1.5;
  285. }
  287. .content__item-img {
  288. 	display: block;
  289. 	max-width: 40vw;
  290. 	max-height: 80vh;
  291. 	-webkit-transform: translate3d(-120%,0,0);
  292. 	transform: translate3d(-120%,0,0);
  293. 	-webkit-flex: none;
  294. 	-ms-flex: none;
  295. 	flex: none;
  296. }
  298. .content__item--current .content__item-img {
  299. 	-webkit-transform: translate3d(-10px,0,0);
  300. 	transform: translate3d(-10px,0,0);
  301. }
  303. .content__item-inner {
  304. 	padding: 0 10vw 0;
  305. 	opacity: 0;
  306. 	-webkit-transform: translate3d(0,50px,0);
  307. 	transform: translate3d(0,50px,0);
  308. }
  310. .content__item--current .content__item-inner {
  311. 	opacity: 1;
  312. 	-webkit-transform: translate3d(0,0,0);
  313. 	transform: translate3d(0,0,0);
  314. }
  317. /**************************/
  318. /* All synced transitions */
  319. /**************************/
  321. .zoomer {
  322. 	-webkit-transition: -webkit-transform 0.5s;
  323. 	transition: transform 0.5s;
  324. 	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  325. 	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  326. }
  328. .zoomer.zoomer--notrans {
  329. 	-webkit-transition: none;
  330. 	transition: none;
  331. }
  333. .zoomer__image {
  334. 	-webkit-transition: opacity 0.3s 0.3s;
  335. 	transition: opacity 0.3s 0.3s;
  336. }
  338. .zoomer--active .zoomer__image {
  339. 	opacity: 0;
  340. 	-webkit-transition-delay: 0s;
  341. 	transition-delay: 0s;
  342. }
  344. .preview img {
  345. 	-webkit-transition: -webkit-transform 0.6s 0.3s;
  346. 	transition: transform 0.6s 0.3s;
  347. 	-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  348. 	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  349. }
  351. .zoomer--active .preview img {
  352. 	-webkit-transition: -webkit-transform 0.3s;
  353. 	transition: transform 0.3s;
  354. }
  356. .content {
  357. 	-webkit-transition: left 0s;
  358. 	transition: left 0s;
  359. }
  361. .content__item {
  362. 	-webkit-transition: opacity 0s;
  363. 	transition: opacity 0s;
  364. }
  366. .content,
  367. .content__item {
  368. 	/* delay for content to disappear and zoomer to start transitioning back to 0 */
  369. 	-webkit-transition-delay: 0.3s;
  370. 	transition-delay: 0.3s;
  371. }
  373. .content--open,
  374. .content__item--current {
  375. 	-webkit-transition: none;
  376. 	transition: none;
  377. }
  379. .content__item-img {
  380. 	-webkit-transition: -webkit-transform 0.4s;
  381. 	transition: transform 0.4s;
  382. 	-webkit-transition-timing-function: cubic-bezier(0.7,1,0.8,1);
  383. 	transition-timing-function: cubic-bezier(0.7,1,0.8,1);
  384. }
  386. .content__item--current .content__item-img {
  387. 	-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  388. 	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  389. 	-webkit-transition-duration: 1s;
  390. 	transition-duration: 1s;
  391. }
  393. .content__item-inner {
  394. 	-webkit-transition: -webkit-transform 0.6s, opacity 0.3s;
  395. 	transition: transform 0.6s, opacity 0.3s;
  396. 	-webkit-transition-timing-function: cubic-bezier(0.7,1,0.8,1), ease;
  397. 	transition-timing-function: cubic-bezier(0.7,1,0.8,1), ease;
  398. }
  400. .content__item--current .content__item-inner {
  401. 	-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1), ease;
  402. 	transition-timing-function: cubic-bezier(0.2,1,0.3,1), ease;
  403. 	-webkit-transition-duration: 1.7s;
  404. 	transition-duration: 1.7s;
  405. }
  407. /* Media Queries */
  408. @media screen and (max-width: 50em) {
  409. 	.content__item {
  410. 		display: block;
  411. 	}
  412. 	.content__item-img {
  413. 		max-width: calc(100% - 80px);
  414. 		max-height: 70vh;
  415. 	}
  416. 	.content h2 {
  417. 		font-size: 3em;
  418. 	}
  419. 	.content__item-inner {
  420. 		font-size: 82%;
  421. 		padding: 4em 3em 2em;
  422. 	}
  423. }

JavaScript

  1. /**
  2.  * main.js
  3.  * http://www.codrops.com
  4.  *
  5.  * Licensed under the MIT license.
  6.  * http://www.opensource.org/licenses/mit-license.php
  7.  * 
  8.  * Copyright 2015, Codrops
  9.  * http://www.codrops.com
  10.  */
  11. ;(function(window) {
  13. 	'use strict';
  15. 	var bodyEl = document.body, 
  16. 		docElem = window.document.documentElement,
  17. 		support = { transitions: Modernizr.csstransitions },
  18. 		// transition end event name
  19. 		transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' },
  20. 		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
  21. 		onEndTransition = function( el, callback ) {
  22. 			var onEndCallbackFn = function( ev ) {
  23. 				if( support.transitions ) {
  24. 					if( ev.target != this ) return;
  25. 					this.removeEventListener( transEndEventName, onEndCallbackFn );
  26. 				}
  27. 				if( callback && typeof callback === 'function' ) { callback.call(this); }
  28. 			};
  29. 			if( support.transitions ) {
  30. 				el.addEventListener( transEndEventName, onEndCallbackFn );
  31. 			}
  32. 			else {
  33. 				onEndCallbackFn();
  34. 			}
  35. 		},
  36. 		// window sizes
  37. 		win = {width: window.innerWidth, height: window.innerHeight},
  38. 		// some helper vars to disallow scrolling
  39. 		lockScroll = false, xscroll, yscroll,
  40. 		scrollContainer = document.querySelector('.container'),
  41. 		// the main slider and its items
  42. 		sliderEl = document.querySelector('.slider'),
  43. 		items = [].slice.call(sliderEl.querySelectorAll('.slide')),
  44. 		// total number of items
  45. 		itemsTotal = items.length,
  46. 		// navigation controls/arrows
  47. 		navRightCtrl = sliderEl.querySelector('.button--nav-next'),
  48. 		navLeftCtrl = sliderEl.querySelector('.button--nav-prev'),
  49. 		zoomCtrl = sliderEl.querySelector('.button--zoom'),
  50. 		// the main content element
  51. 		contentEl = document.querySelector('.content'),
  52. 		// close content control
  53. 		closeContentCtrl = contentEl.querySelector('button.button--close'),
  54. 		// index of current item
  55. 		current = 0,
  56. 		// check if an item is "open"
  57. 		isOpen = false,
  58. 		isFirefox = typeof InstallTrigger !== 'undefined',
  59. 		// scale body when zooming into the items, if not Firefox (the performance in Firefox is not very good)
  60. 		bodyScale = isFirefox ? false : 3;
  62. 	// some helper functions:
  63. 	function scrollX() { return window.pageXOffset || docElem.scrollLeft; }
  64. 	function scrollY() { return window.pageYOffset || docElem.scrollTop; }
  65. 	// from http://www.sberry.me/articles/javascript-event-throttling-debouncing
  66. 	function throttle(fn, delay) {
  67. 		var allowSample = true;
  69. 		return function(e) {
  70. 			if (allowSample) {
  71. 				allowSample = false;
  72. 				setTimeout(function() { allowSample = true; }, delay);
  73. 				fn(e);
  74. 			}
  75. 		};
  76. 	}
  78. 	function init() {
  79. 		initEvents();
  80. 	}
  82. 	// event binding
  83. 	function initEvents() {
  84. 		// open items
  85. 		zoomCtrl.addEventListener('click', function() {
  86. 			openItem(items[current]);
  87. 		});
  89. 		// close content
  90. 		closeContentCtrl.addEventListener('click', closeContent);
  92. 		// navigation
  93. 		navRightCtrl.addEventListener('click', function() { navigate('right'); });
  94. 		navLeftCtrl.addEventListener('click', function() { navigate('left'); });
  96. 		// window resize
  97. 		window.addEventListener('resize', throttle(function(ev) {
  98. 			// reset window sizes
  99. 			win = {width: window.innerWidth, height: window.innerHeight};
  101. 			// reset transforms for the items (slider items)
  102. 			items.forEach(function(item, pos) {
  103. 				if( pos === current ) return;
  104. 				var el = item.querySelector('.slide__mover');
  105. 				dynamics.css(el, { translateX: el.offsetWidth });
  106. 			});
  107. 		}, 10));
  109. 		// keyboard navigation events
  110. 		document.addEventListener( 'keydown', function( ev ) {
  111. 			if( isOpen ) return; 
  112. 			var keyCode = ev.keyCode || ev.which;
  113. 			switch (keyCode) {
  114. 				case 37:
  115. 					navigate('left');
  116. 					break;
  117. 				case 39:
  118. 					navigate('right');
  119. 					break;
  120. 			}
  121. 		} );
  122. 	}
  124. 	// opens one item
  125. 	function openItem(item) {
  126. 		if( isOpen ) return;
  127. 		isOpen = true;
  129. 		// the element that will be transformed
  130. 		var zoomer = item.querySelector('.zoomer');
  131. 		// slide screen preview
  132. 		classie.add(zoomer, 'zoomer--active');
  133. 		// disallow scroll
  134. 		scrollContainer.addEventListener('scroll', noscroll);
  135. 		// apply transforms
  136. 		applyTransforms(zoomer);
  137. 		// also scale the body so it looks the camera moves to the item.
  138. 		if( bodyScale ) {
  139. 			dynamics.animate(bodyEl, { scale: bodyScale }, { type: dynamics.easeInOut, duration: 500 });
  140. 		}
  141. 		// after the transition is finished:
  142. 		onEndTransition(zoomer, function() {
  143. 			// reset body transform
  144. 			if( bodyScale ) {
  145. 				dynamics.stop(bodyEl);
  146. 				dynamics.css(bodyEl, { scale: 1 });
  147. 				
  148. 				// fix for safari (allowing fixed children to keep position)
  149. 				bodyEl.style.WebkitTransform = 'none';
  150. 				bodyEl.style.transform = 'none';
  151. 			}
  152. 			// no scrolling
  153. 			classie.add(bodyEl, 'noscroll');
  154. 			classie.add(contentEl, 'content--open');
  155. 			var contentItem = document.getElementById(item.getAttribute('data-content'))
  156. 			classie.add(contentItem, 'content__item--current');
  157. 			classie.add(contentItem, 'content__item--reset');
  160. 			// reset zoomer transform - back to its original position/transform without a transition
  161. 			classie.add(zoomer, 'zoomer--notrans');
  162. 			zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)';
  163. 			zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)';
  164. 		});
  165. 	}
  167. 	// closes the item/content
  168. 	function closeContent() {
  169. 		var contentItem = contentEl.querySelector('.content__item--current'),
  170. 			zoomer = items[current].querySelector('.zoomer');
  172. 		classie.remove(contentEl, 'content--open');
  173. 		classie.remove(contentItem, 'content__item--current');
  174. 		classie.remove(bodyEl, 'noscroll');
  175. 				
  176. 		if( bodyScale ) {
  177. 			// reset fix for safari (allowing fixed children to keep position)
  178. 			bodyEl.style.WebkitTransform = '';
  179. 			bodyEl.style.transform = '';
  180. 		}
  182. 		/* fix for safari flickering */
  183. 		var nobodyscale = true;
  184. 		applyTransforms(zoomer, nobodyscale);
  185. 		/* fix for safari flickering */
  187. 		// wait for the inner content to finish the transition
  188. 		onEndTransition(contentItem, function(ev) {
  189. 			classie.remove(this, 'content__item--reset');
  190. 			
  191. 			// reset scrolling permission
  192. 			lockScroll = false;
  193. 			scrollContainer.removeEventListener('scroll', noscroll);
  195. 			/* fix for safari flickering */
  196. 			zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)';
  197. 			zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)';
  198. 			/* fix for safari flickering */
  199. 			
  200. 			// scale up - behind the scenes - the item again (without transition)
  201. 			applyTransforms(zoomer);
  202. 			
  203. 			// animate/scale down the item
  204. 			setTimeout(function() {	
  205. 				classie.remove(zoomer, 'zoomer--notrans');
  206. 				classie.remove(zoomer, 'zoomer--active');
  207. 				zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)';
  208. 				zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)';
  209. 			}, 25);
  211. 			if( bodyScale ) {
  212. 				dynamics.css(bodyEl, { scale: bodyScale });
  213. 				dynamics.animate(bodyEl, { scale: 1 }, {
  214. 					type: dynamics.easeInOut,
  215. 					duration: 500
  216. 				});
  217. 			}
  219. 			isOpen = false;
  220. 		});
  221. 	}
  223. 	// applies the necessary transform value to scale the item up
  224. 	function applyTransforms(el, nobodyscale) {
  225. 		// zoomer area and scale value
  226. 		var zoomerArea = el.querySelector('.zoomer__area'), 
  227. 			zoomerAreaSize = {width: zoomerArea.offsetWidth, height: zoomerArea.offsetHeight},
  228. 			zoomerOffset = zoomerArea.getBoundingClientRect(),
  229. 			scaleVal = zoomerAreaSize.width/zoomerAreaSize.height < win.width/win.height ? win.width/zoomerAreaSize.width : win.height/zoomerAreaSize.height;
  231. 		if( bodyScale && !nobodyscale ) {
  232. 			scaleVal /= bodyScale; 
  233. 		}
  235. 		// apply transform
  236. 		el.style.WebkitTransform = 'translate3d(' + Number(win.width/2 - (zoomerOffset.left+zoomerAreaSize.width/2)) + 'px,' + Number(win.height/2 - (zoomerOffset.top+zoomerAreaSize.height/2)) + 'px,0) scale3d(' + scaleVal + ',' + scaleVal + ',1)';
  237. 		el.style.transform = 'translate3d(' + Number(win.width/2 - (zoomerOffset.left+zoomerAreaSize.width/2)) + 'px,' + Number(win.height/2 - (zoomerOffset.top+zoomerAreaSize.height/2)) + 'px,0) scale3d(' + scaleVal + ',' + scaleVal + ',1)';
  238. 	}
  240. 	// navigate the slider
  241. 	function navigate(dir) {
  242. 		var itemCurrent = items[current],
  243. 			currentEl = itemCurrent.querySelector('.slide__mover'),
  244. 			currentTitleEl = itemCurrent.querySelector('.slide__title');
  246. 		// update new current value
  247. 		if( dir === 'right' ) {
  248. 			current = current < itemsTotal-1 ? current + 1 : 0;
  249. 		}
  250. 		else {
  251. 			current = current > 0 ? current - 1 : itemsTotal-1;
  252. 		}
  254. 		var itemNext = items[current],
  255. 			nextEl = itemNext.querySelector('.slide__mover'),
  256. 			nextTitleEl = itemNext.querySelector('.slide__title');
  257. 		
  258. 		// animate the current element out
  259. 		dynamics.animate(currentEl, { opacity: 0, translateX: dir === 'right' ? -1*currentEl.offsetWidth/2 : currentEl.offsetWidth/2, rotateZ: dir === 'right' ? -10 : 10 }, {
  260. 			type: dynamics.spring,
  261. 			duration: 2000,
  262. 			friction: 600,
  263. 			complete: function() {
  264. 				dynamics.css(itemCurrent, { opacity: 0, visibility: 'hidden' });
  265. 			}
  266. 		});
  268. 		// animate the current title out
  269. 		dynamics.animate(currentTitleEl, { translateX: dir === 'right' ? -250 : 250, opacity: 0 }, {
  270. 			type: dynamics.bezier,
  271. 			points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}],
  272. 			duration: 450
  273. 		});
  275. 		// set the right properties for the next element to come in
  276. 		dynamics.css(itemNext, { opacity: 1, visibility: 'visible' });
  277. 		dynamics.css(nextEl, { opacity: 0, translateX: dir === 'right' ? nextEl.offsetWidth/2 : -1*nextEl.offsetWidth/2, rotateZ: dir === 'right' ? 10 : -10 });
  279. 		// animate the next element in
  280. 		dynamics.animate(nextEl, { opacity: 1, translateX: 0 }, {
  281. 			type: dynamics.spring,
  282. 			duration: 2000,
  283. 			friction: 600,
  284. 			complete: function() {
  285. 				items.forEach(function(item) { classie.remove(item, 'slide--current'); });
  286. 				classie.add(itemNext, 'slide--current');
  287. 			}
  288. 		});
  290. 		// set the right properties for the next title to come in
  291. 		dynamics.css(nextTitleEl, { translateX: dir === 'right' ? 250 : -250, opacity: 0 });
  292. 		// animate the next title in
  293. 		dynamics.animate(nextTitleEl, { translateX: 0, opacity: 1 }, {
  294. 			type: dynamics.bezier,
  295. 			points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}],
  296. 			duration: 650
  297. 		});
  298. 	}
  300. 	// disallow scrolling (on the scrollContainer)
  301. 	function noscroll() {
  302. 		if(!lockScroll) {
  303. 			lockScroll = true;
  304. 			xscroll = scrollContainer.scrollLeft;
  305. 			yscroll = scrollContainer.scrollTop;
  306. 		}
  307. 		scrollContainer.scrollTop = yscroll;
  308. 		scrollContainer.scrollLeft = xscroll;
  309. 	}
  311. 	init();
  313. })(window);
文章链接：https://www.sbkko.com/zoom-slider.html
文章标题：缩放幻灯片-Zoom Slider
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！

相关文章:

  1. 全屏图片幻灯-full width image slider
  1. 下拉菜单-horizontal drop down menu
  1. 垂直的图标菜单-Vertical Icon Menu
  1. 背景幻灯片-Background Slideshow
  1. 固定背景滚动布局-Fixed Background Scrolling Layout
  1. 垂直时间线内容-Vertical Timeline

点点赞赏，手留余香

给TA打赏
共0人
还没有人赞赏，快来当第一个赞赏的人吧！
    0 0
    web网站布局网页下载网页设计页面素材
    网页布局资源

    产品网格布局-Filterable Product Grid

    2017-11-15 20:05:20

    网页布局资源

    堆叠的页面导航-Page Stack Navigation

    2017-11-15 20:13:47

    猜你喜欢
    0 条回复 A文章作者 M管理员
    肆意发布无意义灌水形式的评论，将被关小黑屋哦！
    欢迎您，新朋友，感谢参与互动！
      暂无讨论，说说你的看法吧

    请输入验证码

    请输入图片中的验证码
    点击发送按钮获取验证码

    取消
    ×

    公告

    2021-12-8 14:13:35
    欢迎投稿，一起分享互联网效率资源

    很高兴，您能点击进来，并有意愿向我投稿.... 「SBKKO部落」是一个专注于分享互联网资源，分享有趣的国内外新奇网站以及各种效率工具，垂直于IT互联网的学习、交流、分享社区。 非常欢迎您投稿与更多读者分享您使用电脑时的技巧、心得，投稿成功会自动增加网站积分哦！ 投稿链接 - https://www.sbkko.com/write 本站不保证来稿一定被采用，但不管被采用与否，本站都将给来稿者以反馈…

    前往查看详情
    ×
    ×
    ￥undefined
    请打开手机使用微信扫码支付
    「」
    ×

    ....支付确认中....

    「」
    ×
    支付金额

    ￥

    undefined
    ×
    积分支付
    您当前的积分为0

    检测到您未绑定微信账户，请先绑定微信

    立刻绑定
    确定
    ×

    打开微信扫一扫

    扫码并「关注我们的公众号」安全快捷登录

    ×

    下载海报：

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通

    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索

    • 扫码打开当前页

    • 微信公众号

    • 微信小程序

    • QQ资源群

    返回顶部