پلاگین بزرگنمایی اسلاید(زوم اسلایدر)
پلاگین بزرگنمایی اسلاید(زوم اسلایدر)

پلاگین بزرگنمایی اسلاید(زوم اسلایدر)

امروز در این آموزش قصد داریم تا به شما نحوه ایجاد و ساخت یک اسلاید شو زیبا رو بدهیم که در آن برای ملموس شدن آموزش از محصولات شرکت اپل استفاده خواهیم کرد.

برای مشاهده لینک وارد شود

ایده اصلی این آموزش به این شکل است که ما ابتدا عکسی از محصولات شرکت اپل را در قالب مخصوص آن قرار می دهیم و سپس کاربران با کلیک بر روی آیکون ذره بین موجود در پایین آن عکس به صفحه ای با توضیحات کامل مربوط به آن محصول هدایت میشود  و سپس با زدن علامت ضربدر گوشه صفحه به صفحه اولیه برگشت داده میشود.

خوب کار را با نوشتن کدهای HTML آغاز می کنیم.ما ابتدا نام و تصویر مربوط به هر محصول را بارگذاری می کنیم که این کار توسط تکه کد پایین انجام می گیرد.البته این کد برای یک محصول است

<div class="slide" data-content="content-2">
	<div class="slide__mover">
		<div class="zoomer flex-center">
		  <img class="zoomer__image" src="images/ipad.png" alt="iPad Mini" />
		   <div class="preview">
		     <img src="images/ipad-content-preview.png" alt="iPad Mini app preview" />
		  <div class="zoomer__area zoomer__area--size-4"></div>
	        </div>
         </div>
</div>

سپس ما توضیحات مربوط به هر محصول را بصورت جداگانه وارد می کنیم تا هنگام بزرگنمایی آن محتوا ها برای کاربران نمایش داده بشود.نمونه ای از آن را در زیر مشاهده می کنید.

<div class="content__item" id="content-3">
 <img class="content__item-img rounded-right" src="images/macbook-content.jpg" alt="MacBook Content" />
  <div class="content__item-inner">
   <h2>مک بوک</h2>
    <h3>آینده ای روشن از نسل نوت بوک ها</h3>
     <p>مطمئن از بدنه‌ای که ۴ سال از تاریخ طراحیش می‌گذرد، کمپانی اپل اوایل بهار ۹۳ و بدون برگزاری هیچ‌گونه مراسم       خاصی، نسل جدید لپ‌تاپ‌های MacBook Air را با همان ظاهر مدل‌های سال گذشته معرفی نمود. اما این موضوع فقط مربوط به ظاهر دستگاه نمی‌باشد و داخل سری جدید MacBook Air هم، به جز ارتقایی ناچیز در مورد پردازنده‌ی مرکزی، دستخوش تغییر خاصی نشده است. همانند سال‌های گذشته، نسل جدید MacBook Air نیز در دو مدل ۱۱ و ۱۳ اینچی تولید و عرضه گشته‌اند.</p>
    <p><a href="https://www.apple.com/macbook/design/" target="_blank">مشاهده توضیحات بیشتر در سایت اپل</a></p>
   </div>
 </div>

ما برای هر محصول یک لینک قرار می دهیم تا کاربران توضیحات بیشتر در مورد محصولات را از سایت اصلی دنبال کنند که این کار توسط تکه کد زیر انجام می پذیرد.

<p><a href="https://www.apple.com/watch/new-ways-to-connect/" target="_blank">مشاهده توضیحات بیشتر در سایت اپل</a></p>

خوب به سراغ کدهای CSS می رویم.چون کدهای استفاده شده در این آموزش خیلی زیاد است ما فقط بخشی از کدهای مربوط به استایل ها را برایتان می آوریم.در زیر ما استایل مربوط به بزرگنمایی تصاویر را برایتان قرار می دهیم و توضیح خاصی به دلیل سادگی برای آن ارائه نمی کنیم.

.zoomer {
	position: relative;
	height: 360px; /* this is needed for IE10 so that vertical flexbox centering works */
}

.flex-center {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.zoomer__image {
	display: block;
	margin: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
}

.zoomer__area,
.preview {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.zoomer__area:focus {
	outline: none;
}

.zoomer__area--size-1 {
	/* اپل واچ */
	width: 96px;
	height: 118px;
}

.zoomer__area--size-2 {
	/* آیفون */
	width: 112px;
	height: 198px;
}

.zoomer__area--size-3 {
	/* مک بوک */
	width: 315px;
	height: 200px;
}

.zoomer__area--size-4 {
	/* آی پد */
	width: 150px;
	height: 200px;
}

.zoomer__area--size-5 {
	/* آی مک */
	width: 315px;
	height: 189px;
}

.preview {
	overflow: hidden;
	background: #18191b;
}

.preview img {
	display: block;
	border-radius: inherit;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.zoomer--active .preview img {
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

.rounded {
	border-radius: 15px;
}

.rounded-right {
	border-radius: 0 15px 15px 0;
}

.preview__content {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

استایل مربوط به محتوا های نمایش داده شده نیز در زیر قرار دارند

.content {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: -100%;
	overflow: hidden;
	overflow-y: scroll;
	width: 100%;
	height: 100vh;
	background: #18191b;
	-webkit-overflow-scrolling: touch;
}

.content--open {
	left: 0;
}

.content__item {
	position: absolute;
	top: 0;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;
	height: 0;
	min-height: 100%;
	margin: 0 auto;
	padding: 2em 0;
	pointer-events: none;
	opacity: 0;
	color: #fff;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.content__item--current {
	pointer-events: auto;
	opacity: 1;
}

.content__item--reset {
	height: auto;
}

.content h2 {
	font-size: 3.5em;
	font-weight: normal;
	margin: 0;
}

.content h3 {
	font-size: 1.95em;
	font-weight: normal;
	margin: 0.25em 0 0.5em;
	color: #685884;
}

.content p {
	font-size: 1.25em;
	line-height: 1.5;
}

.content__item-img {
	display: block;
	max-width: 40vw;
	max-height: 80vh;
	-webkit-transform: translate3d(-120%,0,0);
	transform: translate3d(-120%,0,0);
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
}

.content__item--current .content__item-img {
	-webkit-transform: translate3d(-10px,0,0);
	transform: translate3d(-10px,0,0);
}

.content__item-inner {
	padding: 0 10vw 0;
	opacity: 0;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

.content__item--current .content__item-inner {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

ما هنگام رفتن به توضیحات محصولات و همچنین برگشتن از آن ها از انیمیشن یا جابجایی استفاده می کنیم که کدهای مربوطه در زیر قرار دارند.

.zoomer {
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.zoomer.zoomer--notrans {
	-webkit-transition: none;
	transition: none;
}

.zoomer__image {
	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.zoomer--active .zoomer__image {
	opacity: 0;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.preview img {
	-webkit-transition: -webkit-transform 0.6s 0.3s;
	transition: transform 0.6s 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.zoomer--active .preview img {
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.content {
	-webkit-transition: left 0s;
	transition: left 0s;
}

.content__item {
	-webkit-transition: opacity 0s;
	transition: opacity 0s;
}

.content,
.content__item {
	/* delay for content to disappear and zoomer to start transitioning back to 0 */
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;

ما در آخر کدهای مربوط به جاوا اسکریپت را می آوریم  و چون در داخل کد تمام توضیحات لازم را برایتان قرار دادیم دیگر نیازی به توضیحات اضافی نداریم.


(function(window) {

	'use strict';

	var bodyEl = document.body, 
		docElem = window.document.documentElement,
		support = { transitions: Modernizr.csstransitions },
    //پایان انتقال نام رویداد
		transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' },
		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
		onEndTransition = function( el, callback ) {
			var onEndCallbackFn = function( ev ) {
				if( support.transitions ) {
					if( ev.target != this ) return;
					this.removeEventListener( transEndEventName, onEndCallbackFn );
				}
				if( callback && typeof callback === 'function' ) { callback.call(this); }
			};
			if( support.transitions ) {
				el.addEventListener( transEndEventName, onEndCallbackFn );
			}
			else {
				onEndCallbackFn();
			}
		},
		//   سایز پنجره
		win = {width: window.innerWidth, height: window.innerHeight},
    //برخی متغییر های کمکی برای جلوگیری از اسکرول خوردن
		lockScroll = false, xscroll, yscroll,
		scrollContainer = document.querySelector('.container'),
    //اسلاید اصلی و آیتم های آن
		sliderEl = document.querySelector('.slider'),
		items = [].slice.call(sliderEl.querySelectorAll('.slide')),
		//  مجموع  تعداد آیتم ها
		itemsTotal = items.length,
		//   کنترل ها و جهت های پیمایش 
		navRightCtrl = sliderEl.querySelector('.button--nav-next'),
		navLeftCtrl = sliderEl.querySelector('.button--nav-prev'),
		zoomCtrl = sliderEl.querySelector('.button--zoom'),
		//  عنصر محتوای اصلی
		contentEl = document.querySelector('.content'),
		//   بستن محتوای کنترل
		closeContentCtrl = contentEl.querySelector('button.button--close'),
		// ایندکس آیتم فعلی
		current = 0,
    //بررسی آیتم در صورت باز بودن
		isOpen = false,
		isFirefox = typeof InstallTrigger !== 'undefined',
    //هنگام بزرگنمایی آیتم،اندازه  بدنه را تغییر می دهد(به جز فایرفاکس زیرا این مرورگر عملکرد خوبی ندارد)
		bodyScale = isFirefox ? false : 3;

	// تعدادی تابع کمکی:
	function scrollX() { return window.pageXOffset || docElem.scrollLeft; }
	function scrollY() { return window.pageYOffset || docElem.scrollTop; }
	//http://www.sberry.me/articles/javascript-event-throttling-debouncing از
	function throttle(fn, delay) {
		var allowSample = true;

		return function(e) {
			if (allowSample) {
				allowSample = false;
				setTimeout(function() { allowSample = true; }, delay);
				fn(e);
			}
		};
	}

	function init() {
		initEvents();
	}

	// اتصال رویداد
	function initEvents() {
		//   باز کردن آیتم ها
		zoomCtrl.addEventListener('click', function() {
			openItem(items[current]);
		});

		//   بستن محتوا 
		closeContentCtrl.addEventListener('click', closeContent);

		//   پیمایش
		navRightCtrl.addEventListener('click', function() { navigate('right'); });
		navLeftCtrl.addEventListener('click', function() { navigate('left'); });

		//   تغییر اندازه پنجره
		window.addEventListener('resize', throttle(function(ev) {
			//   بازنشانی اندازه پنجره
			win = {width: window.innerWidth, height: window.innerHeight};

      //بازنشانی جابجایی آیتم ها
			items.forEach(function(item, pos) {
				if( pos === current ) return;
				var el = item.querySelector('.slide__mover');
				dynamics.css(el, { translateX: el.offsetWidth });
			});
		}, ۱۰));

    //رویداد پیمایش با کیبورد
		document.addEventListener( 'keydown', function( ev ) {
			if( isOpen ) return; 
			var keyCode = ev.keyCode || ev.which;
			switch (keyCode) {
				case 37:
					navigate('left');
					break;
				case 39:
					navigate('right');
					break;
			}
		} );
	}

	// بازکردن یک آیتم
	function openItem(item) {
		if( isOpen ) return;
		isOpen = true;

    //عنصر جابجا خواهد شد
		var zoomer = item.querySelector('.zoomer');
    //پیش نمایش عناصر اسلاید
		classie.add(zoomer, 'zoomer--active');
		//  غیرفعال کردن اسکرول
		scrollContainer.addEventListener('scroll', noscroll);
		// اعمال جابجایی
		applyTransforms(zoomer);
    //تغییر اندازه بدنه شبیه حرکت دوربین برای نمایش آیتم
		if( bodyScale ) {
			dynamics.animate(bodyEl, { scale: bodyScale }, { type: dynamics.easeInOut, duration: 500 });
		}
    //پس از پایان یافتن انتقال:
		onEndTransition(zoomer, function() {
			//   بازنشانی جابجایی بدنه
			if( bodyScale ) {
				dynamics.stop(bodyEl);
				dynamics.css(bodyEl, { scale: 1 });
				
        // تنظیم برای سافاری(اجازه برای تنظیم  بچه ها برای حفظ موقعیت)
				bodyEl.style.WebkitTransform = 'none';
				bodyEl.style.transform = 'none';
			}
			//   اسکرول نخورد
			classie.add(bodyEl, 'noscroll');
			classie.add(contentEl, 'content--open');
			var contentItem = document.getElementById(item.getAttribute('data-content'))
			classie.add(contentItem, 'content__item--current');
			classie.add(contentItem, 'content__item--reset');


      //بازنشانی  جابجایی بزرگنمایی برای برگشتن به موقعیت اولیه  که در آن آیتم جابجا نشده بود
			classie.add(zoomer, 'zoomer--notrans');
			zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)';
			zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)';
		});
	}

	// بستن آیتم/محتوا
	function closeContent() {
		var contentItem = contentEl.querySelector('.content__item--current'),
			zoomer = items[current].querySelector('.zoomer');

		classie.remove(contentEl, 'content--open');
		classie.remove(contentItem, 'content__item--current');
		classie.remove(bodyEl, 'noscroll');
				
		if( bodyScale ) {
			//   بازنشانی تنظیم برای سافاری(اجازه برای تنظیم  بچه ها برای حفظ موقعیت)
			bodyEl.style.WebkitTransform = '';
			bodyEl.style.transform = '';
		}

		/*   تنظیم برای فلیکر مرورگر سافاری */
		var nobodyscale = true;
		applyTransforms(zoomer, nobodyscale);
		/*   تنظیم برای فلیکر مرورگر سافاری */

    //منتظر ماندن برای به پایان رسیدن جابجایی محتوای داخلی آیتم ها
		onEndTransition(contentItem, function(ev) {
			classie.remove(this, 'content__item--reset');
			
			//   بازنشانی اجازه اسکرول کردن
			lockScroll = false;
			scrollContainer.removeEventListener('scroll', noscroll);

			/*   تنظیم برای فلیکر مرورگر سافاری */
			zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)';
			zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)';
			/*    تنظیم برای فلیکر مرورگر سافاری */
			
      //بزرگ کردن عکس پس زمینه محصولات بدون جابجایی
			applyTransforms(zoomer);
			
			//    برگرداندن عکس پس زمینه محصولات به حالت اولیه
			setTimeout(function() {	
				classie.remove(zoomer, 'zoomer--notrans');
				classie.remove(zoomer, 'zoomer--active');
				zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)';
				zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)';
			}, ۲۵);

			if( bodyScale ) {
				dynamics.css(bodyEl, { scale: bodyScale });
				dynamics.animate(bodyEl, { scale: 1 }, {
					type: dynamics.easeInOut,
					duration: 500
				});
			}

			isOpen = false;
		});
	}

  //اعمال مقدار های ضروری برای تغییر اندازه آیتم ها
	function applyTransforms(el, nobodyscale) {
    //محل بزرگنمایی  و مقدار تغییر اندازه
		var zoomerArea = el.querySelector('.zoomer__area'), 
			zoomerAreaSize = {width: zoomerArea.offsetWidth, height: zoomerArea.offsetHeight},
			zoomerOffset = zoomerArea.getBoundingClientRect(),
			scaleVal = zoomerAreaSize.width/zoomerAreaSize.height < win.width/win.height ? win.width/zoomerAreaSize.width : win.height/zoomerAreaSize.height;

		if( bodyScale && !nobodyscale ) {
			scaleVal /= bodyScale; 
		}

		//  اعمال جابجایی
		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)';
		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)';
	}

	// هدایت اسلایدر
	function navigate(dir) {
		var itemCurrent = items[current],
			currentEl = itemCurrent.querySelector('.slide__mover'),
			currentTitleEl = itemCurrent.querySelector('.slide__title');

    //به روز رسانی مقدار ارزش فعلی جدید
		if( dir === 'right' ) {
			current = current < itemsTotal-1 ? current + 1 : 0;
		}
		else {
			current = current > 0 ? current - 1 : itemsTotal-1;
		}

		var itemNext = items[current],
			nextEl = itemNext.querySelector('.slide__mover'),
			nextTitleEl = itemNext.querySelector('.slide__title');
		
    //انیمیشن آیتم فعلی برای بیرون رفتن
		dynamics.animate(currentEl, { opacity: 0, translateX: dir === 'right' ? -1*currentEl.offsetWidth/2 : currentEl.offsetWidth/2, rotateZ: dir === 'right' ? -10 : 10 }, {
			type: dynamics.spring,
			duration: 2000,
			friction: 600,
			complete: function() {
				dynamics.css(itemCurrent, { opacity: 0, visibility: 'hidden' });
			}
		});

		//  انیمیشن عنوان فعلی برای بیرون رفتن
		dynamics.animate(currentTitleEl, { translateX: dir === 'right' ? -250 : 250, opacity: 0 }, {
			type: dynamics.bezier,
			points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}],
			duration: 450
		});

    //اعمال تنظیمات برای عنصر هدایت به راست
		dynamics.css(itemNext, { opacity: 1, visibility: 'visible' });
		dynamics.css(nextEl, { opacity: 0, translateX: dir === 'right' ? nextEl.offsetWidth/2 : -1*nextEl.offsetWidth/2, rotateZ: dir === 'right' ? 10 : -10 });

    //انیمیشن آمدن عنصر بعدی
		dynamics.animate(nextEl, { opacity: 1, translateX: 0 }, {
			type: dynamics.spring,
			duration: 2000,
			friction: 600,
			complete: function() {
				items.forEach(function(item) { classie.remove(item, 'slide--current'); });
				classie.add(itemNext, 'slide--current');
			}
		});

    //اعمال تنظیمات برای عنوان بعدی برای آمدن به صفحه
		dynamics.css(nextTitleEl, { translateX: dir === 'right' ? 250 : -250, opacity: 0 });
		//  انیمیشن آمدن عنوان بعدی
		dynamics.animate(nextTitleEl, { translateX: 0, opacity: 1 }, {
			type: dynamics.bezier,
			points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}],
			duration: 650
		});
	}

	// غیرفعال کردن حالت اسکرول
	function noscroll() {
		if(!lockScroll) {
			lockScroll = true;
			xscroll = scrollContainer.scrollLeft;
			yscroll = scrollContainer.scrollTop;
		}
		scrollContainer.scrollTop = yscroll;
		scrollContainer.scrollLeft = xscroll;
	}

	init();

})(window);

پایان

0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


هفت − 2 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>