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

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

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

همونطور که در دمو مشاهده کردید، یک کلمه بنام Walda وجود داره و زمانی که بر روی اون هاور میکنید، Tooltip مربوط به اون با انیمیشنی زیبا نمایش داده میشه.

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

کد HTML :

<div class="container">
	<div class="tooltip tooltip--walda" data-type="walda">
		<div class="tooltip__trigger" role="tooltip" aria-describedby="info-walda">
			<span class="tooltip__trigger-text">Walda</span>
		</div>
		<div class="tooltip__base">
			<div class="tooltip__deco"></div>
			<div class="tooltip__content" id="info-walda">
				<span class="tooltip__letters">A day without sunshine <br/>is like, you know, night.</span>
			</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 */

/* Walda */
.tooltip--walda .tooltip__base {
	left: 0;
	bottom: 0.75em;
	position: absolute;
	margin-left: 0;
	width: 250px;
	height: 100px;
	padding: 0 0 0 0.25em;
}

.tooltip--walda .tooltip__trigger-text {
	padding: 1em;
}

.tooltip--walda .tooltip__content {
	margin: 0;
	width: 100%;
	height: 100%;
	align-items: flex-start;
	text-align: left;
	font-size: 0.85em;
	line-height: 2;
	opacity: 1;
	justify-content: flex-start;
}

.tooltip--walda .tooltip__letters span {
	display: inline-block;
	white-space: pre;
	opacity: 0;
}

.tooltip--walda .tooltip__deco {
	width: 4px;
	height: 100%;
	background: #141514;
	transform-origin: 50% 100%;
}

کد JS:

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

{
	const config = {
		in: {
			base: {
				duration: 100,
				easing: 'linear',
				opacity: 1
			},
			deco: {
				duration: 500,
				easing: 'easeOutExpo',
				scaleY: [0,1]
			},
			content: {
				duration: 125,
				easing: 'easeOutExpo',
				delay: function(t,i) {
					return i*15;
				},
				easing: 'linear',
				translateY: ['50%','0%'],
				opacity: [0,1]
			},
			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: '#6fbb95', duration: 1, delay: 100, easing: 'easeOutQuad'}
				]
			}
		},
		out: {
			base: {
				duration: 100,
				delay: 100,
				easing: 'linear',
				opacity: 0
			},
			deco: {
				duration: 400,
				easing: 'easeOutExpo',
				scaleY: 0
			},
			content: {
				duration: 1,
				easing: 'linear',
				opacity: 0
			},
			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

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

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

reza____ebliser

سلام دوست عزیز
ظاهراً در چند ماه اخیر تنها کسی که توی این سایت فعالیت داشته شما هستید؛ انجمن سایت که تعطیل شده و مدتی هست هر سوالی پرسیده بشه اصلاً جواب داده نمیشه
میخواستم از شما خواهش کنم این را بررسی بفرمایید و بنده رو راهنمایی کنید
https://7learn.com/forums/topic/%d9%84%d9%88%d8%af%db%8c%d9%86%da%af-%d9%85%d8%b1%d8%a8%d9%88%d8%b7-%d8%a8%d9%87-%da%a9%d8%af%d8%a7%d9%85-%d9%81%d8%b1%db%8c%d9%85%d9%88%d8%b1%da%a9-%d8%a7%d8%b3%d8%aa-%d8%9f
ممنونم
منتظر پاسخ شما هستم

محمد اسفندیاری

سلام

دوست عزیز این موارد تکنیک هستند و از فریم ورک خاصی استفاده نشده است….

لینکهای زیر میتونه بهتون کمک کنه:

https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

https://github.com/victorvoid/placeload.js

https://codepen.io/Mestika/pen/ByNYBa

http://blog.iamsuleiman.com/stop-using-loading-spinner-theres-something-better/

موفق باشید

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

 
گزارش مشکل