انیمیشن زیبا برای نمایش تولتیپ - Tooltip Animations ( نمونه 11)

زمان مطالعه: 4 دقیقه
۱۹ مهر ۱۳۹۶

در این مطلب نمونه 11 از انیمیشن زیبا برای نمایش Tooltip با عنوان Tooltip Animations رو در اختیارتون میزارم و امیدوارم که بدردتون بخوره و بتونین از اون در سایتتون استفاده کنید. همونطور که اطلاع دارید از Tooltip ها در اکثر مواقع برای نمایش اطلاعات بیشتر در مورد یک موضوع خاص مورد استفاده قرار میگیره. در مثالهایی که در این زمینه قرار میگیره، درون هر دمو یک کلمه قرار داده شده و با هاور کردن بر روی اون یک Tooltip با انیمیشن زیبا نمایش داده میشه و میتونین از اون ایده بگیرید.

همونطور که در دمو مشاهده کردید، یک کلمه بنام Sadoc وجود داره و زمانی که بر روی اون هاور میکنید، Tooltip مربوط به اون با انیمیشنی زیبا نمایش داده میشه. قالب و شکل این Tooltip با استفاده از SVG ساخته شده است و میتونین کد مربوط به اون رو در زیر مشاهده کنید.

کدهای مربوط به این نمونه

کد HTML :

<div class="container">
	<div class="tooltip tooltip--sadoc" data-type="sadoc">
		<div class="tooltip__trigger" role="tooltip" aria-describedby="info-sadoc">
			<span class="tooltip__trigger-text">Sadoc</span>
		</div>
		<div class="tooltip__base">
			<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
				<path d="M 32.1,42.7 54.5,257 185,257 193,269 200,282 207,269 214,257 342,257 368,23.9 Z"/>
			</svg>
			<div class="tooltip__content" id="info-sadoc">We don't see things as they are, we see them as we are.</div>
		</div>
	</div>
</div>

همونطور که میبینید برای نامگذاری کلاسها از مدل BEM استفاده شده است.

کد CSS :

*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: 'Overpass Mono', monospace;
	color: #666;
	background: #2a2c2b;
}

a {
	text-decoration: none;
	color: #6fbb95;
	outline: none;
}

a:hover,
a:focus {
	color: #fff;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

.container {
	width: 400px;
	height: 300px;
	margin: 250px auto 0;
	text-align: center;
}

/* Public styles */

.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip__trigger {
	cursor: pointer;
	position: relative;
}

.tooltip__trigger-text {
	display: block;
	padding: 0.85em;
	pointer-events: none;
}

.tooltip__base {
	position: absolute;
	bottom: 2em;
	left: 50%;
	margin-left: -150px;
	width: 300px;
	height: 200px;
	display: flex;
    align-items: center;
    justify-content: center;
	opacity: 0;
	pointer-events: none;
}

.tooltip__content {
	color: #797979;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 65%;
	padding: 0 1em;
	opacity: 0;
	font-size: 0.85em;
}

.tooltip__shape,
.tooltip__deco {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.tooltip__shape {
	fill: #141514;
}

/* Indivudual styles */

/* Sadoc */
.tooltip--sadoc .tooltip__base {
	bottom: 2.5em;
}

.tooltip--sadoc .tooltip__shape path {
	fill: #1d1f1e;
	stroke: #5a5c5b;
	stroke-width: 3px;
}

کد JS:

در این مطلب از Anime و Charming استفاده شده است.

{
	const config = {
		in: {
			base: {
				duration: 1,
				delay: 100,
				easing: 'linear',
				opacity: 1,
				translateY: {
					value: [-40,0],
					duration: 800,
					easing: 'easeOutElastic'
				}
			},
			path: {
				duration: 600,
				easing: 'easeInOutSine',
				strokeDashoffset: [anime.setDashoffset, 0],
				fill: {
					value: '#141514',
					duration: 400,
					delay: 500,
					easing: 'linear'
				}
			},
			content: {
				duration: 800,
				delay: 420,
				easing: 'easeOutElastic',
				translateY: [20,0],
				opacity: {
					value: 1,
					easing: 'linear',
					duration: 100
				}
			},
			trigger: {
				translateY: [
					{value: '50%', duration: 100, easing: 'easeInQuad'},
					{value: ['-50%','0%'], duration: 100, easing: 'easeOutQuad'}
				],
				opacity: [
					{value: 0, duration: 100, easing: 'easeInQuad'},
					{value: 1, duration: 100, easing: 'easeOutQuad'}
				],
				color: {
					value: '#6fbb95', 
					duration: 1,
					delay: 100, 
					easing: 'easeOutQuad'
				}
			}
		},
		out: {
			base: {
				duration: 1,
				delay: 400,
				easing: 'linear',
				opacity: 0
			},
			path: {
				duration: 300,
				easing: 'easeInOutSine',
				strokeDashoffset: anime.setDashoffset,
				fill: {
					value: '#2a2c2b',
					duration: 400,
					easing: 'linear'
				}
			},
			content: {
				duration: 200,
				easing: 'easeOutExpo',
				translateY: 20,
				opacity: {
					value: 0,
					easing: 'linear',
					duration: 50
				}
			},
			trigger: {
				translateY: [
					{value: '50%', duration: 100, easing: 'easeInQuad'},
					{value: ['-50%','0%'], duration: 100, easing: 'easeOutQuad'}
				],
				opacity: [
					{value: 0, duration: 100, easing: 'easeInQuad'},
					{value: 1, duration: 100, easing: 'easeOutQuad'}
				],
				color: {
					value: '#666', 
					duration: 1, 
					delay: 100, 
					easing: 'easeOutQuad'
				}
			}
		}
	};

	const tooltip = document.querySelector('.tooltip');
	
	class Tooltip {
		constructor(el) {
			this.DOM = {};
			this.DOM.el = el;
			this.DOM.trigger = this.DOM.el.querySelector('.tooltip__trigger');
			this.DOM.triggerSpan = this.DOM.el.querySelector('.tooltip__trigger-text');
			this.DOM.base = this.DOM.el.querySelector('.tooltip__base');
			this.DOM.shape = this.DOM.base.querySelector('.tooltip__shape');
			if( this.DOM.shape ) {
				this.DOM.path = this.DOM.shape.childElementCount > 1 ? Array.from(this.DOM.shape.querySelectorAll('path')) : this.DOM.shape.querySelector('path');
			}
			this.DOM.deco = this.DOM.base.querySelector('.tooltip__deco');
			this.DOM.content = this.DOM.base.querySelector('.tooltip__content');

			this.DOM.letters = this.DOM.content.querySelector('.tooltip__letters');
			if( this.DOM.letters ) {
				// Create spans for each letter.
				charming(this.DOM.letters);
				// Redefine content.
				this.DOM.content = this.DOM.letters.querySelectorAll('span');
			}
			this.initEvents();
		}
		initEvents() {
			this.mouseenterFn = () => {
				this.mouseTimeout = setTimeout(() => {
					this.isShown = true;
					this.show();
				}, 75);
			}
			this.mouseleaveFn = () => {
				clearTimeout(this.mouseTimeout);
				if( this.isShown ) {
					this.isShown = false;
					this.hide();
				}
			}
			this.DOM.trigger.addEventListener('mouseenter', this.mouseenterFn);
			this.DOM.trigger.addEventListener('mouseleave', this.mouseleaveFn);
			this.DOM.trigger.addEventListener('touchstart', this.mouseenterFn);
			this.DOM.trigger.addEventListener('touchend', this.mouseleaveFn);
		}
		show() {
			this.animate('in');
		}
		hide() {
			this.animate('out');
		}
		animate(dir) {
			if ( config[dir].base ) {
				anime.remove(this.DOM.base);
				let baseAnimOpts = {targets: this.DOM.base};
				anime(Object.assign(baseAnimOpts, config[dir].base));
			}
			if ( config[dir].shape ) {
				anime.remove(this.DOM.shape);
				let shapeAnimOpts = {targets: this.DOM.shape};
				anime(Object.assign(shapeAnimOpts, config[dir].shape));
			}
			if ( config[dir].path ) {
				anime.remove(this.DOM.path);
				let shapeAnimOpts = {targets: this.DOM.path};
				anime(Object.assign(shapeAnimOpts, config[dir].path));
			}
			if ( config[dir].content ) {
				anime.remove(this.DOM.content);
				let contentAnimOpts = {targets: this.DOM.content};
				anime(Object.assign(contentAnimOpts, config[dir].content));
			}
			if ( config[dir].trigger ) {
				anime.remove(this.DOM.triggerSpan);
				let triggerAnimOpts = {targets: this.DOM.triggerSpan};
				anime(Object.assign(triggerAnimOpts, config[dir].trigger));
			}
			if ( config[dir].deco ) {
				anime.remove(this.DOM.deco);
				let decoAnimOpts = {targets: this.DOM.deco};
				anime(Object.assign(decoAnimOpts, config[dir].deco));
			}
		}
		destroy() {
			this.DOM.trigger.removeEventListener('mouseenter', this.mouseenterFn);
			this.DOM.trigger.removeEventListener('mouseleave', this.mouseleaveFn);
			this.DOM.trigger.removeEventListener('touchstart', this.mouseenterFn);
			this.DOM.trigger.removeEventListener('touchend', this.mouseleaveFn);
		}
	}

	const init = (() => new Tooltip(tooltip))();
};

میبینید که در ابتدا یک شئ بنام config ساختیم و تنظیمات مربوط به Tooltip رو مشخص کردیم. بعد از اون یک کلاس بنام Tooltip به وجود آوردیم و متدهای مورد نظر رو ایجاد کردیم.در نهایت نیز از این کلاس استفاده کردیم و المنت Tooltip مورد نظرمون رو بهش پاس دادیم.

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل