سلام دوستان عزیز. تصمیم گرفتیم علاوه بر آموزش وردپرس ، آموزش UI/UX هم در مدرسه وردپرس داشته باشیم.  مقاله امروز مدرسه وردپرس در خصوص آموزش UI/UX، آموزش ساخت Border با انیمیشن هست. با این مقاله می تونیم باکس هایی داشته باشیم که در زمان هاور ماوس، انیمیشن زیبایی داشته باشند. این انیمیشن زیبا Border در وب سایت Carl Philipe Brenner وجود دارد.

دانلود سورسمشاهده دمو

نحوه نمایش Border با انیمیشن

عملکرد این انیمیشن بدین صورت هست که زمانی که ماوس خود را بر روی باکس هاور می کنید، تصویر پس زمینه به صورت Transparent میشه و Border ها با افکت زیبا نمایان میشن. نمونه یکی از افکت ها را در تصویر زیر میبینید:

ساخت Border انیمیشن

نکته: ما از css transitions برای SVG ها استفاده کرده ایم و ممکن است در برخی از مرورگر ها کار نکند!

ساخت Border با انیمیشن

بسیار خب حالا باید شروع به نوشتن کد کنیم. در این آموزش فقط از کدهای HTML و CSS استفاده می کنیم و برای درک این مقاله بهتره که با این کدها آشنایی داشته باشید

کد HTML

در ابتدا باید کدهای HTML مربوط به باکس ها رو اضافه کنیم. پس کد زیر را قرار دهید:

<div class="box">
	<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
		<line class="top" x1="0" y1="0" x2="900" y2="0"/>
		<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
		<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
		<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
	</svg>
	<h3>D</h3>
	<span>1395</span>
	<span>نمونه متن آزمایشی</span>
</div>

در کد بالا یک بلاک با کلاس box اضافه کردیم و داخل باکس SVG های مربوط به Border هارو اضافه کردیم و در ادامه عنوان و متن هایی که میخواییم داخل باکس نمایش داده بشه را قرار میدیم.

کد CSS

حالا می تونیم کدهای CSS این بلاک رو قرار بدیم. پس کد زیر رو برای استایل دادن به بلاک اصلیمون میزاریم:

.box {
	width: 300px;
	height: 460px;
	position: relative;
	background: rgba(255,255,255,1);
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
	color: #2c3e50;
	box-shadow: inset 0 0 0 3px #2c3e50;
	-webkit-transition: background 0.4s 0.5s;
	transition: background 0.4s 0.5s;
}

.box:hover {
	background: rgba(255,255,255,0);
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

و در ادامه کدهای CSS برای استایل دادن به متن های داخل باکس که قراره نمایش داده بشن:

.box h3 {
	font-family: "Ruthie", cursive;
	font-size: 180px;
	line-height: 370px;
	margin: 0;
	font-weight: 400;
	width: 100%;
}

.box span {
	display: block;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	padding: 5px;
}

.box h3,
.box span {
	-webkit-transition: color 0.4s 0.5s;
	transition: color 0.4s 0.5s;
}

.box:hover h3,
.box:hover span {
	color: #fff;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

و در ادامه اضافه کردن کدهای CSS برای استایل دادن به SVG ها قبل از هاور ماوس و در حالت عادی

.box svg {
	position: absolute;
	top: 0;
	left: 0;
}

.box svg line {
	stroke-width: 3;
	stroke: #ecf0f1;
	fill: none;
	-webkit-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

.box svg line.top,
.box svg line.bottom {
	stroke-dasharray: 330 240; 
}

.box svg line.left,
.box svg line.right {
	stroke-dasharray: 490 400;
}

و حالا اضافه کردن کدهای CSS برای استایل دادن به SVG ها در حالت هاور ماوس

.box:hover svg line {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.box:hover svg line.top {
	-webkit-transform: translateX(-600px);
	transform: translateX(-600px);
}

.box:hover svg line.bottom {
	-webkit-transform: translateX(600px);
	transform: translateX(600px);
}

.box:hover svg line.left {
	-webkit-transform: translateY(920px);
	transform: translateY(920px);
}

.box:hover svg line.right {
	-webkit-transform: translateY(-920px);
	transform: translateY(-920px);
}

و بعد فایل رو ذخیره کرده و دمو رو میبینیم. این افکت یکی از افکت ها می باشد و در نسخه دمو که برای دانلود قرار دادیم، چهار افکت مختلف انیمیشن Border وجود دارد

همینطور که مشاهده می کنید بدون استفاده از هیچ کد JS تونستیم یک افکت زیبا ایجاد کنیم

مقاله امروز مدرسه وردپرس در خصوص ساخت Border با انیمیشن به پایان رسید. امیدوارم که لذت برده باشید

شاد باشید

 

دانلود سورسمشاهده دمو

کلمات کلیدی: ، ، ،

2 دیدگاه برای “ساخت Border با انیمیشن

  • خسرو
    - ۲۴ اردیبهشت , ۱۳۹۹

    سلام اول میخوام تشکر کنم از آموزش عالی و خیلی خوبتون و سایت بسیار خوبتون!! واقعا آموزنده و عالی هست و من که همیشه استفاده میکنم!!
    یه سوال داشتم برای اینکه border از یه گوشه شروع کنه و دور تا دور شکل کشیده بشه و ب نقطه شروع برسه چکار باید بکنیم؟؟

  • امیر رهبری
    - ۲۷ اسفند , ۱۳۹۹

    سلام
    ازین کدها کجا و چطور در قالب وردپرس می تونم استفاده کنم

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --