ساخت افکت مخصوص لینک

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

پیشنیازها

1. hover:
2. after:: و before:: در CSS
3. ترنزیشن ها
4. تغییر شکل و مکان عناصر در فضای دو بعدی

ساده بودن HTML

سعی می کنیم تا جایی که امکانش هست به عنصر <a> عنصر دیگری اضافه نکنیم. چرا؟

• کارایی بهتر: هرچه عنصر HTML کمتر زندگی بهتر (هم زندگی ما هم زندگی ربات هایی که صفحه را می خوانند)
• نگهداری ساده تر: اگر در آینده نیاز داشتیم تا افکت کل لینک های سایت را تغییر دهیم نیاز به دست کاری HTML نخواهیم داشت.
• حجم کمتر: عنصر HTML کمتر حجم فایل کمتر و دوباره زندگی بهتر…

پس در نهایت HTML ما برای تمام مثال ها در این مطلب بصورت زیر خواهد بود:

<a href="">لینک خفن من</a>

شروع کار در سی اس اس

اول یک سری تنظیمات اولیه برای عنصر لینک در سی اس اس در نظر می گیریم. تنظیماتی از قبیل تعیین رنگ، از بین بردن خط زیر لینک، تنظیم فونت و غیره:

a {
  color: white;
  text-decoration: none;
}

از نظر تجربه کاربری یا خط زیر لینک را حذف نکنیم یا اگر کردیم جایگزینی برای آن قرار دهیم.

اضافه کردن شبه عنصر

برای اینکه بتوانیم به افکت مورد نظرمان برسیم نیاز به یک عنصر داریم. از آنجایی که گفتیم نمی خواهیم به HTML دست بزنیم پس باید به سراغ شبه عناصر در سی اس اس برویم. فعلا فقط با استفاده از شبه عنصر after یک خط در زیر لینک می سازیم.

برای اینکه مطمئن باشیم که این خط همیشه و همه جا با لینک خواهند ماند به خود لینک position از نوع relative و به شبه عنصر absolute می دهیم و سپس با تنظیم مختصات، آن را در زیر لینک قرار می دهیم:

a {
  position: relative;
  color: #fff;
  text-decoration: none;
}

a::after {
  content: ' ';       /* شبه عنصر نمایش داده بشه */
  display: block;     /* بتونیم بهش ابعاد بدیم */
  width: 100%;        /* عرضش بشه اندازه عرض لینک */
  height: .2em;       /* :) */
  position: absolute; /* بشه بهش نسبت به لینک مختصات داد */
  bottom: -.5em;      /* یکم از لینک فاصله بگیره */
  left: 0;            /* لبه چپ شبه عنصر با لبه چپ لینک یکی بشه */
  right: 0;           /* :) */
  background: #fff;   /* سفید برفی بشه */
}

تا اینجا رسیدیم به این:

 

See the Pen Link Effect (Step 1) by Mojtaba Seyedi (@seyedi) on CodePen.

 

اولین افکت

با یک افکت ساده شروع می کنیم. فرض کنیم می خواهیم زمانی که لینک در حالت hover قرار می گیرد، خط با یک حرکت آرام از بالا به سمت پایین ظاهر شود.

پس باید خط را در حالت عادی عنصر لینک مخفی کنیم و کمی هم به سمت بالا ببریم. برای مخفی کردن از ویژگی opacity و برای بالا بردن از transform استفاده می کنیم:

a::after {
  opacity: 0;  
  transform: translate(0,-.3em);
}

حال می خواهیم زمانی که موس بر روی لینک رفت، خط آشکار شده و سرجای اولش برگردد. و چون می خواهیم این تغییرات به آرامی صورت بگیرند از transition استفاده می کنیم:

a::after {
  transform: translate(0,-.3em);
  opacity: 0;  
  transition: all .2s ease;
}

a:hover::after {
  transform: translate(0);
  opacity: 1;  
}

 

See the Pen Link Effect (Step 2) by Mojtaba Seyedi (@seyedi) on CodePen.

 

من نخواستم خط بالاتر برود ولی اگر شما نیاز به این کار داشتید بهتر است بدانید که اگر خط بالاتر برود روی نوشته قرار می گیرد پس اگر می خواهید خط روی نوشته را نگیرد باید از ویژگی z-index استفاده کنید:

a::after {
  z-index: -1;
}

همچنین اگر می خواهید بر روی شتاب حرکت و نحوه آشکار شدنش بیشتر کار کنید می توانید به مطلب timing-function سر بزنید.

سعی کنید در دموی بالا موس را از سمت پایین بر روی لینک ببرید مشاهده می کنید که ظاهر شدن خط با مشکلاتی همراه است. راه حل این مشکل این است که کاری کنیم که خط ما تاثیری از نشانه گر نگیرد. برای این کار از ویژگی pointer-events با مقدار none کمک می گیریم.

همچنین اگر این دمو را با مرورگر کروم آزمایش کنیم متوجه خواهیم شد زمانی که موس بر روی لینک می رود و خارج می شود متن لینک دچار ماتی و کمی لرزه می شود. اگر به جای transform دو بعدی از سه بعدی استفاده کنیم این مشکل از بین خواهد رفت.

 

See the Pen Link Effect (Step 3) by Mojtaba Seyedi (@seyedi) on CodePen.

 

افکت دوم

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

کد تقریبا در همان کد دموی قبلی است فقط دیگر نیازی به استفاده از ویژگی opacity نداریم و همچنین به جای اینکه عنصر را کمی بالا ببریم در حالت اول عرض آن را صفر می کنیم و در حالت دوم عرض را به حالت اول بر می گردانیم. این کار را با استفاده از تابع scaleX انجام خواهیم داد:

a::after {
  transform: scaleX(0);
  transition: transform .15s ease;
}

a:hover::after {
  transform: scaleX(1);
}

 

See the Pen Link Effect2 (Step 1) by Mojtaba Seyedi (@seyedi) on CodePen.

 

افکت سوم

به عنوان سومین افکت می خواهیم خطی همیشه ثابت زیر لینک باشد و در حالت دوم فقط عرض آن کمی بیشتر شود (یعنی از دو طرف کشیده شود). و خط دیگری از پایین لینک به سمت بالای لینک حرکت کند طوری که در آخر دو خط بالا و پایین عنصر قرار بگیرند.

برای ساخت خط دوم می توانیم از شبه عنصر before:: کمک بگیریم.

پس در حالت اول دو خط زیر عنصر قرار دارند یکی از آنها آشکار و دیگری پنهان است و در حالت دوم یکی از آنها فقط از دو طرف کمی کشیده شده و دومی هم کشیده شده و هم به سمت بالای عنصر حرکت می کند:

a::after,
a::before {
  content: ' ';
  display: block;
  width: 100%;
  height: .1em;
  position: absolute;
  bottom: -.5em;
  left: 0;
  right: 0;  
  z-index: -1;
  background: #fff;  
  pointer-events: none;
  transform: translate3d(0,0,0) scale3d(1,1,1);
  transition: all .2s ease;
}

a:hover::after {
  transform: scale3d(1.1,1,1);
}

a:hover::before {
  transform: translate3d(0,-100%,0) scale3d(1.1,1,1); /* صد درصد اینجا یعنی اندازه کل ارتفاع شبه عنصر */
  bottom: 100%; /* صد درصد اینجا یعنی اندازه کل ارتفاع عنصر لینک */
}

 

See the Pen Link Effect 3 (Step 1) by Mojtaba Seyedi (@seyedi) on CodePen.

 

سی اس اس خیل مَرده جدا عنصر اضافه نکنید

فرض کنید به عنوان افکت چهارم قصد داریم زمانی که موس بر روی لینک قرار می گیرد چهار متن با محتوای لینک از چهار گوشه آن خارج شوند.

کمی فکر کنید ببینید راه حلی برای این کار دارید…

 

See the Pen Link Effect 4 by Mojtaba Seyedi (@seyedi) on CodePen.

 

(تعارف که نداریم افکت خیلی مسخره ای هستش ولی فقط بخاطر نشون دادن قدرت سی اس اس… :)

در اینجا راه حل، استفاده از text-shadow است:

a {
  position: relative;
  color: #fff;
  text-decoration: none;
  transition: text-shadow .3s ease;
}

a:hover {
  text-shadow: 3em -1em 0 black,
               3em 1em 0 red,
               -3em -1em 0 blue,
               -3em 1em 0 green
               ;
}

کارایی

اگر دقت کنیم می بینیم که در مثال های بالا تا جایی که امکان داشت برای انجام افکت ها فقط از transform و opacity استفاده شد. دلیل این موضوع این بود که مرورگر این ویژگی ها را بهتر و با Performance بیشتری اجرا می کند. دلیل این موضوع را می توانیم در این آدرس بررسی کنیم.

دستیابی پذیری

بهتر است برای اینکه افرادی وجود دارند که به دلایلی امکان استفاده از موس برای آنها وجود ندارد و فقط می توانند از صفحه کلید استفاده کنند دو کار انجام دهیم:

اول اینکه اگر لینکی افکت خاصی ندارد outline آن را ازش نگیریم.

(اگر با کلید tab لینک را انتخاب کنیم متوجه خطی دور لینک خواهیم شد که نشان می دهد الان لینک در حالت انتخاب قرار گرفته است)

دوم اینکه افکت را برای حالت focus نیز پیاده سازی کنیم.

به عنوان نمونه در مثال آخر خواهیم داشت:

a:hover,
a:focus {
  text-shadow: 3em -1em 0 black,
               3em 1em 0 red,
               -3em -1em 0 blue,
               -3em 1em 0 green
               ;
}

( هدف این مطلب ساخت افکت های خیلی خوشگل نبود اگر هم بود من نمی تونستم طراحی کنم چون طراح نیستم… هدف بررسی نکات فنی و ریز ماجرا بود تا دید بهتری برای طراحان وب عزیز بوجود بیاد. حالا این شما و این هم خلاقیتتون :) لینک افکت هایی که می سازید رو می تونید در قسمت توضیحات قرار بدید… )