main-post-cover

    Təmiz CSS-də linklərin altından xətt çəkmə animasiyası

    Digər
    Code-News
    18.02.2019
    Farid Pardashunas

    #Step IT Academy tərəfindən təqdim olunur  





        Personal saytımın yaradılmasında hazır məzmundan istifadə etmək əvəzinə onu sıfırdan yaratmağımın əsas üstünlüyü ondadır ki, mən brauzerin təmzimləmərdən başlayıb getdikcə öz dizayn effektlərimi əlavə edirəm. Mən saytın şişməsindən qaçıram, lakin personalizasiya - vacib işdir. Bir tərəfdən spartavari Hacker News saytları ilə Craigslist arasındaki kompromisi tapmaq, digər tərəfdən də köhnə MySpace kimi dəhşət yüklü olmasından uzaq olmaq lazımdır.
         Necəsə bir dəfə qarşıma maraqlı dizayn effekti olan bir sayt çıxdı. Linklərin üzərinə mouse-u yaxınlaşdırdıqda altdan xətt animasiya formasında çıxırdı və mən bunu öz saytımda da reallaşdırmaq istədim. Amma mənə bu effekt təmiz CSS-də lazım idi, çünki belə xırda işlər üçün JavaScript-i yüklü edib və sonra mümkünü performans xətaları ilə üzləşmək istəmirəm.
    Bu effekt belə görsənir:

    Reallaşdırma
        Mətnin altında xətlər çəkmək sən demə o qədər də asan iş deyilmiş. Məsələ sizin standartdan nə qədər kənara çıxmağa hazır olmanızdan asılıdır.
        Mən iki yanaşma üzərində düşündüm. İkisi də əslində text-decorationdan imtina edib psevdoelementlərə sərhəd əlavə etmək sayəsində bunu reallaşdırırlar. Sonra isə bu sərhəd CSS keçidləri vasitəsi ilə animasiya halına gəlir. Təəssüf ki, bu həllərin bir mənfi cəhəti var. Onlar, link bir sətrdən daha çox olduqda düzgün işləmirlər. Xətt yalnız birinci sətrdə yaranır.

    Sonunda mən Shaw-un CodePen-ini tapdım və bu nöqsanın həll yolu tapılmış oldu.
    Bu da kod
    a {
        text-decoration: none;
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0% 100%;
        background-repeat: no-repeat;
        background-size: 0% 2px;
        transition: background-size .3s;
    }
    
    a:hover {
        background-size: 100% 2px;
    }
    

    Gəlin bu həlli xırdalayaq.
    Öncə standart text-decoration effektini söndürürük.
        İndi isə bizə fon şəkli lazım olacaq, çünki o, bir neçə sətri əhatə edə bilər. Əslində real şəkil də götürmək olar amma söhbət cəmi bir xətdən gedir, ona görə də linear-gradient işimizə yarayır. Adətən onu iki rəng arasında istifadə edirlər, lakin bizə xəttin link ilə eyni rəngdə olması lazımdır ona görə də currentColor-dan istifadə edəcəyik.
        Background-positiondan istifadə edərək şəkli sol aşağı küncə yerləşdiririk. 0% horizontal üçün, 100% isə vertikal yerləşmə üçün təyin olunur.
        Background-repeat efektini söndürürük.
        Background-size ilə sıfır en və 2 px hündürlük təyin edirik. Ensiz olmasını ona görə edirik ki, xətt yalnız mouse ilə linkin üzərinə gəldikdə yaransın.
        Fon ölçüləri ilə əlaqəli transition təyin edirik.
        Linkin üzərinə gəldikdə şəklin eninini dəyişirik, transition isə bizə animasiya qazandırır.
    Hazırdır! Mən kodun lakonik olması ilə çox razıyam. Əgər saytınıza bənzər effekt əlavə etmək istəyirsinizsə bu realizasiyadan yararlanmaqdan çəkinməyin.
    Linki kopyala