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

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

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

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

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

کد HTML :

<div class="container">
	<div class="tooltip tooltip--amras" data-type="amras">
		<div class="tooltip__trigger" role="tooltip" aria-describedby="info-amras">
			<span class="tooltip__trigger-text">Amras</span>
		</div>
		<div class="tooltip__base">
			<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
				<path class="path-amras-2" d="M 293,106 A 90.1,90.1 0 0 1 203,197 90.1,90.1 0 0 1 112,106 90.1,90.1 0 0 1 203,16.2 90.1,90.1 0 0 1 293,106 Z"/>
				<path class="path-amras-3" d="M 324,66.2 A 46.9,46.9 0 0 1 277,113 46.9,46.9 0 0 1 230,66.2 46.9,46.9 0 0 1 277,19.3 46.9,46.9 0 0 1 324,66.2 Z"/>
				<path class="path-amras-1" d="M 180,111 A 67.2,67.2 0 0 1 112,178 67.2,67.2 0 0 1 45.9,111 67.2,67.2 0 0 1 112,43.5 67.2,67.2 0 0 1 180,111 Z"/>
				<path class="path-amras-4" d="M 371,98.6 A 52.7,52.7 0 0 1 318,152 52.7,52.7 0 0 1 266,98.6 52.7,52.7 0 0 1 318,45.9 52.7,52.7 0 0 1 371,98.6 Z"/>
				<path class="path-amras-9" d="M 375,167 A 66.8,55.1 0 0 1 308,222 66.8,55.1 0 0 1 241,167 66.8,55.1 0 0 1 308,112 66.8,55.1 0 0 1 375,167 Z"/>
				<path class="path-amras-5" d="M 187,199 A 52,52 0 0 1 136,251 52,52 0 0 1 84.1,199 52,52 0 0 1 136,147 52,52 0 0 1 187,199 Z"/>
				<path class="path-amras-6" d="M 287,217 A 66.8,66.8 0 0 1 221,284 66.8,66.8 0 0 1 154,217 66.8,66.8 0 0 1 221,150 66.8,66.8 0 0 1 287,217 Z"/>
				<path class="path-amras-7" d="M 132,168 A 53.9,53.9 0 0 1 78.7,222 53.9,53.9 0 0 1 24.8,168 53.9,53.9 0 0 1 78.7,114 53.9,53.9 0 0 1 132,168 Z"/>
				<path class="path-amras-8" d="M 343,211 A 48.7,48.7 0 0 1 295,260 48.7,48.7 0 0 1 246,211 48.7,48.7 0 0 1 295,163 48.7,48.7 0 0 1 343,211 Z"/>
			</svg>
			<div class="tooltip__content" id="info-amras">Real learning comes about when the competitive spirit has ceased.</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 */

/* Amras */
.path-amras-1 {
	transform-origin: 115px 111px;
}

.path-amras-2 {
	transform-origin: 204px 107px;
}

.path-amras-3 {
	transform-origin: 279px 66px;
}

.path-amras-4 {
	transform-origin: 320px 99px;
}

.path-amras-5 {
	transform-origin: 137px 199px;
}

.path-amras-6 {
	transform-origin: 222px 217px;
}

.path-amras-7 {
	transform-origin: 80px 168px;
}

.path-amras-8 {
	transform-origin: 296px 211px;
}

.path-amras-9 {
	transform-origin: 310px 167px;
}

کد JS:

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

{
	const config = {
		in: {
			base: {
				duration: 1,
				delay: 50,
				easing: 'linear',
				opacity: 1
			},
			path: {
				duration: 800,
				delay: 100,
				easing: 'easeOutElastic',
				delay: function(t,i) {
					return i*20;
				},
				scale: [0,1],
			},	
			content: {
				duration: 300,
				delay: 250,
				easing: 'easeOutExpo',
				scale: [0.7,1],
				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: 450,
				easing: 'linear',
				opacity: 0
			},
			path: {
				duration: 500,
				easing: 'easeOutExpo',
				delay: function(t,i,c) {
					return (c-i-1)*40;
				},
				scale: 0
			},
			content: {
				duration: 300,
				easing: 'easeOutExpo',
				scale: 0.7,
				opacity: {
					value: 0,
					duration: 100,
					easing: 'linear'
				}
			},
			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

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

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

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

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

 
گزارش مشکل