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

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

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

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

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

کد HTML :

<div class="container">
	<div class="tooltip tooltip--hador" data-type="hador">
		<div class="tooltip__trigger" role="tooltip" aria-describedby="info-hador">
			<span class="tooltip__trigger-text">Hador</span>
		</div>
		<div class="tooltip__base">
			<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
				<path class="path-hador-1" d="M 154,283 A 6.12,6.12 0 0 1 149,290 6.12,6.12 0 0 1 142,286 6.12,6.12 0 0 1 146,278 6.12,6.12 0 0 1 154,283 Z"/>
				<path class="path-hador-2" d="M 167,265 A 7.83,7.83 0 0 1 162,276 7.83,7.83 0 0 1 152,270 7.83,7.83 0 0 1 157,261 7.83,7.83 0 0 1 167,265 Z"/>
				<path class="path-hador-3" d="M 183,244 A 11.9,11.9 0 0 1 174,258 11.9,11.9 0 0 1 160,250 11.9,11.9 0 0 1 168,235 11.9,11.9 0 0 1 183,244 Z"/>
				<path class="path-hador-4" d="M 327,120 A 127,111 0 0 1 200,231 127,111 0 0 1 72.9,120 127,111 0 0 1 200,9.44 127,111 0 0 1 327,120 Z"/>
			</svg>
			<div class="tooltip__content" id="info-hador">Acquiring knowledge is a form of imitation.</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 */

/* Hador */
.tooltip--hador .tooltip__base {
	bottom: 2.25em;
	margin-left: -115px;
}

.path-hador-1 {
	transform-origin: 148px 284px;
}

.path-hador-2 {
	transform-origin: 160px 268px;
}

.path-hador-3 {
	transform-origin: 171px 246px;
}

.path-hador-4 {
	transform-origin: 200px 120px;
}

.tooltip--hador .tooltip__content {
	width: 50%;
	margin: 0 0 2.5em;
}

کد JS:

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

{
	const config = {
		in: {
			base: {
				duration: 1,
				delay: 100,
				easing: 'linear',
				opacity: 1
			},
			path: {
				duration: 1000,
				easing: 'easeOutExpo',
				delay: function(t,i) {
					return i*150;
				},
				scale: [0,1],
				translateY: function(t,i,c) {
					return i === c-1 ? ['50%','0%'] : 0;
				},
				rotate: function(t,i,c) {
					return i === c-1 ? [90,0] : 0;
				}
			},	
			content: {
				duration: 600,
				delay: 750,
				easing: 'easeOutExpo',
				scale: [0.5,1],
				opacity: {
					value: 1,
					easing: 'linear',
					duration: 400
				}
			},
			trigger: {
				translateX: [
					{value: '30%', duration: 200, easing: 'easeInExpo'},
					{value: ['-30%','0%'], duration: 200, easing: 'easeOutExpo'}
				],
				opacity: [
					{value: 0, duration: 200, easing: 'easeInExpo'},
					{value: 1, duration: 200, easing: 'easeOutExpo'}
				],
				color: [
					{value: '#6fbb95', duration: 1, delay: 200, easing: 'easeOutExpo'}
				]
			}
		},
		out: {
			base: {
				duration: 1,
				delay: 450,
				easing: 'linear',
				opacity: 0
			},
			path: {
				duration: 300,
				easing: 'easeOutExpo',
				delay: function(t,i,c) {
					return (c-i-1)*50;
				},
				scale: 0
			},	
			content: {
				duration: 200,
				easing: 'easeOutExpo',
				scale: 0.7,
				opacity: {
					value: 0,
					duration: 50,
					easing: 'linear'
				}
			},
			trigger: {
				translateX: [
					{value: '30%', duration: 100, easing: 'easeInQuad'},
					{value: ['-30%','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

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

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

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

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

 
گزارش مشکل