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

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

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

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

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

کد HTML :

<div class="container">
	<div class="tooltip tooltip--narvi" data-type="narvi">
		<div class="tooltip__trigger" role="tooltip" aria-describedby="info-narvi">
			<span class="tooltip__trigger-text">Narvi</span>
		</div>
		<div class="tooltip__base">
			<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
				<path class="path-narvi" d="M 307,150 199,212 92.5,274 92.7,150 92.5,26.2 200,88.4 Z"/>
			</svg>
			<div class="tooltip__content" id="info-narvi">Life isn't about finding yourself. Life is about creating yourself.</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 */

/* Narvi */
.path-narvi {
	transform-origin: 200px 150px;
}

.tooltip--narvi .tooltip__content {
	width: 80%;
}

کد JS:

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

{
	const config = {
		in: {
			base: {
				duration: 1,
				easing: 'linear',
				opacity: 1
			},
			path: {
				duration: 800,
				easing: 'easeOutQuint',
				rotate: [0,90],
				opacity: {
					value: 1,
					duration: 200,
					easing: 'linear'
				}
			},
			content: {
				duration: 600,
				easing: 'easeOutQuint',
				translateX: [50,0],
				opacity: {
					value: 1,
					duration: 100,
					easing: 'linear'
				}
			},
			trigger: {
				translateX: [
					{value: '-30%', duration: 100, easing: 'easeInQuint'},
					{value: ['30%','0%'], duration: 250, easing: 'easeOutQuint'}
				],
				opacity: [
					{value: 0, duration: 100, easing: 'easeInQuint'},
					{value: 1, duration: 250, easing: 'easeOutQuint'}
				],
				color: [
					{value: '#6fbb95', duration: 1, delay: 100, easing: 'easeOutQuint'}
				]
			}
		},
		out: {
			base: {
				duration: 100,
				delay: 400,
				easing: 'linear',
				opacity: 0
			},
			path: {
				duration: 500,
				delay: 0,
				easing: 'easeInOutQuint',
				rotate: 0,
				opacity: {
					value: 0,
					duration: 50,
					delay: 210,
					easing: 'linear'
				}
			},
			content: {
				duration: 500,
				easing: 'easeInOutQuint',
				translateX: 100,
				opacity: {
					value: 0,
					duration: 50,
					delay: 210,
					easing: 'linear'
				}
			},
			trigger: {
				translateX: [
					{value: '30%', duration: 200, easing: 'easeInQuint'},
					{value: ['-30%','0%'], duration: 200, easing: 'easeOutQuint'}
				],
				opacity: [
					{value: 0, duration: 200, easing: 'easeInQuint'},
					{value: 1, duration: 200, easing: 'easeOutQuint'}
				],
				color: [
					{value: '#666', duration: 1, delay: 200, easing: 'easeOutQuint'}
				]
			}
		}
	};

	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

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

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

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

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

 
گزارش مشکل