Կառուցեք պորտֆոլիո CSS3 անցումներով

Հեղինակ: Lewis Jackson

Ստեղծման Ամսաթիվը: 5 Մայիս 2021

Թարմացման Ամսաթիվը: 15 Մայիս 2024

Կառուցեք պորտֆոլիո CSS3 անցումներով - Ստեղծագործական

Բովանդակություն

01. CSS անցումների հիմունքները
02. Ինչու՞ օգտագործել անցումներ:
03. Եկեք սկսենք
04. Ակնհայտ, բայց հաճախ անտեսված հուշում
05. Լաքը
06. Այժմ ավելի հին զննարկիչների համար
07. Եզրակացություն
Դուր եկավ սա Կարդացեք սրանք:

Գիտելիք է անհրաժեշտ. Հիմնական CSS և jQuery: JQuery animate () գործառույթի հետ կապված փորձը բոնուս է
Պահանջում է. jQuery, Modernizr, դիտարկիչ և ձեր նախընտրած խմբագիր / IDE
Րագրի ժամանակը. 1,5 - 3 ժամ
Աջակցության ֆայլ

Ի՞նչ են CSS անցումները: W3C նախագծում նշվում է. «Սովորաբար, երբ CSS հատկության արժեքը փոխվում է, ստացված արդյունքն ակնթարթորեն թարմացվում է ՝ ազդակիր տարրերն անմիջապես փոխելով հին գույքի արժեքից նոր գույքի արժեքի: Այս բաժինը նկարագրում է CSS նոր հատկությունների օգտագործմամբ անցումները ճշգրտելու եղանակը: Այս հատկություններն օգտագործվում են ժամանակի ընթացքում հին վիճակից սահուն կենդանի դարձնելու համար նոր պետություն »:

Որքան էլ սա հասարակ հնչի, իրական կյանքում դա նշանակում է, որ CSS անցումներից օգտվելը ժամանակակից կայքում ինտերակտիվություն ավելացնելու հիանալի միջոց է: Չնայած դրանք չեն աջակցվում բոլոր զննարկիչներում, աջակցությունը բարելավվում է, և օգտագործելով հին ընկերներ, ինչպիսիք են Modernizr- ը և Feature Detection- ը, մենք կարող ենք օգտագործել jQuery հետադարձ կապ, որպեսզի հին, պակաս աջակցող դիտարկիչները չկորցնեն:

Այստեղ մենք պատրաստվում ենք կառուցել ժամանակակից, ինտերակտիվ պորտֆոլիոյի էջ ՝ օգտագործելով CSS3 անցումներ ՝ jQuery անիմացիային և HTML5 նշագրմանը փոխարինելու համար: Մենք կքննարկենք վաճառողների նախածանցի խնդիրները և կավելացնենք հետադարձ օգուտներ պակաս օժանդակ զննարկիչների համար:

01. CSS անցումների հիմունքները

Եթե նախկինում չեք լսել CSS անցումների մասին, ապա մտածեք, որ դրանք բնիկ ֆունկցիոնալություն են այն էֆեկտների համար, որոնք նախկինում հասանելի էին միայն JavaScript- ում կամ jQuery- ում: Եթե կարողանաք դա անել jQuery- ի միջոցով կենդանացնել () գործառույթը, CSS- ի անցումներով կարող եք հասնել նույն ազդեցությունների, օրինակ ՝ սահողներ, լուսատուներ և այլն:

Ե՛վ CSS– ի անցումներ, և՛ jQuery կենդանացնել () ըստ էության կատարել նույն բանը, որը նշանակում է որոշակի ոճով անցում կատարել մեկ ոճից մյուսը: Անցման համար շարահյուսությունն է.

անցումային հատկություն. բարձրություն;
անցումային տևողությունը ՝ 3 վ;
անցում-հետաձգում `2s;
անցումային ժամանակի գործառույթ. գծային;

Կամ ձեզ համար կարճ տառատեսակների CSS սիրահարներ.

անցում. {անցում-հատկություն} {անցում-տևողություն} {անցում-ձգձգում} {անցում-ժամանակի-ֆունկցիա}

Կարող ենք նաև խմբավորել բազմաթիվ անցումներ միասին, եթե բաժանենք կետանիշով: Օրինակ:

անցում. բարձրությունը 200 մմ 50 մ գծային;
լայնությունը 400 մմ 500 մմ հեշտությամբ դուրս գալը;
գույն 600ms 0ms հեշտությամբ ներթափանցում;

Նկատի ունեցեք, որ դուք կարող եք նաև բազմակի արժեքներ դնել ձեռքի հատկությունների վրա: Այսպիսով, մենք հիմա գիտենք շարահյուսությունը, եկեք կատարենք մի պարզ օրինակ ՝ սավառնող էֆեկտի վրա կոճակ / ձգան տարր. Ահա մի քանի HTML:

div>
սավառնել վրաս
/ div>

Եվ որոշ CSS:

div. կոճակ {
լիցքավորում ՝ 2px 20px;
բարձրությունը `30px;
լայնությունը `100px;
գծի բարձրությունը `30px;
տեքստի հավասարեցում. կենտրոն;
եզրագիծ ՝ 2px պինդ # 878787;
ֆոն-գույն ՝ # c0c0c0;
սահման-շառավիղ `10px;
լուսանցք ՝ 20px;
կուրսորը ՝ ցուցիչ;
}

Հիմա եկեք ասենք, որ մենք ուզում ենք, որ այն hover- ում այլ տեսք ունենա, ուստի hover- ի վրա ավելացնում ենք ևս մի քանի CSS.

div. կոճակ ՝ սավառնել {
ֆոնային գույն ՝ # ff0000;
լիցքավորում ՝ 40px;
սահմանի լայնությունը `4px;
սահմանի գույնը `կանաչ;
գույնը ՝ #ffffff;
}

Սավառնել վրայով կոճակ տարրը և ոճը միանգամից անջատվում են: Չնայած սա գեղեցիկ է, այն կարող է ավելի լավ լինել: Իրերը մակարդակի վրա վերցնելու համար եկեք անցում կատարենք սավառնել դասարան:

անցում. լիցք 2000 մմ 0 մ գծային;

Վայ Այժմ, երբ սավառնում ենք, լցոնումը դանդաղ է փոխվում, ճիշտ այնպես, ինչպես jQuery անիմացիայի էֆեկտով, բայց մյուս ոճերը պարզապես փոխվում են ակնթարթորեն: Դա այն պատճառով է, որ ազդեցություն ունեն միայն անցումային ոճերը. մնացած ամեն ինչ ակնթարթային է: Դուք նաև կնկատեք, որ փոփոխությունները նորից անմիջապես կան ակնթարթորեն, երբ բաշխեք այն կոճակ տարր.

Փոխեք CSS- ը: Հեռացրեք անցումը դեպի սավառնել դաս, և CSS- ի երկու կանոններին էլ ավելացրեք.

անցում. բոլոր 2000 մմ 0 մ գծերը

Ի բոլորը նշանակում է, որ մենք ուզում ենք, որ բոլոր հատկությունները ունենան անցման էֆեկտ: Այսպիսով, հիմա փորձեք: Անմիջապես կնկատեք, որ այն հոյակապ է թվում, և գործընթացի ցանկացած կետում jQuery անիմացիայի գործառույթներ չեն օգտագործվել:

02. Ինչու՞ օգտագործել անցումներ:

Եթե CSS անցումները կարող են հասնել նույն ազդեցությունների, ինչ jQuery- ին կենդանացնել (), ինչու՞ չփրկել ձեզ նոր բան սովորելու դժվարությունից և չմնալ jQuery- ի օգտագործման հետ: Ինչու՞ օգտագործել մի բան, որն ամբողջությամբ չի աջակցվում:

Դե, քանի որ մատակարարների շրջանում ընդհանուր առմամբ աջակցությունը լավն է, հին բրաուզերների վրա ազդեցությունը պահպանում է նույն ֆունկցիոնալությունը (նրանք միանգամից անցնում են մեկ ոճից մյուսը ՝ անտեսելով անցումային կանոնները), և, իհարկե, կան կատարողականի առավելություններ.

Նիշքի փոքր չափը Քիչ JavaScript- ը կնշանակի ավելի փոքր սկրիպտ ֆայլ և ավելի թեթեւ կայք, ինչը կհանգեցնի բեռնման ավելի արագ ժամանակի և ավելի քիչ արգելափակման, երբ սկրիպտը բեռնվում է:
Ավելի քիչ սցենարական աշխատանք հաճախորդի վրա Որքան շատ կարողանանք անել CSS- ի հետ, այնքան ավելի արագ և ավելի զգայուն կզգա կայքը ՝ բարելավելով օգտագործողի փորձը:
Նվազեցնում է JS գրադարանների օգտագործումը, ինչպիսիք են jQuery- ը Երբ օգտագործվում է jQuery մեթոդ, կան մի քանի այլ գործառույթներ, որոնք կոչվում են դրա մաս: Կարող եք մտածել, որ կենդանի () ֆունկցիան ընդամենը մեկ զանգ է, բայց դրա մի քանիսը, և դրանք շուտով գումարվում են: Օգտագործելով CSS ՝ jQuery- ի միջուկը զանգերն իջեցնելու համար բարելավում են ձեր կայքերի և վեբ հավելվածների աշխատանքը:
Ոչ օժանդակ զննարկիչները պահպանում են գործունակությունը Այս մասին ավելի ուշ: Այժմ հաշվի առեք այս jQuery- ը.

$ ('# Տարր'). Մկնիկի կենտրոն (գործառույթ () {
$ (սա): կենդանի ({
«Ոճ» ՝ «արժեք»,
«Ոճ» ՝ «արժեք»,
'Style': 'value'} 600, 'easy-in-out'
);
}). մկնիկի տերև (գործառույթ () {
$ (սա): կենդանի ({
«Ոճ» ՝ «արժեք»,
«Ոճ» ՝ «արժեք»,
'Style': 'value'} 600, 'easy-in-out'
);
});

Չնայած սա կոդային հսկայական քանակություն չէ, մի քանի նմանատիպ էֆեկտներ ունենալը կշիռ կավելացնի JS ֆայլին, գումարած ՝ առաջին հերթին կա jQuery գրադարանի ավելացված քաշը: Նույնին կարելի է հասնել CSS անցումներով: Պարզապես մուտքագրեք.

տարր{
'Ոճ': 'արժեք';
'Ոճ': 'արժեք';
'Ոճ': 'արժեք';
Անցում. {Արժեքներն այստեղ}
}
տարր ՝ սավառնել {
'Ոճ': 'արժեք';
'Ոճ': 'արժեք';
'Ոճ': 'արժեք';
Անցում. {Արժեքներն այստեղ}
}

CSS- ի անցումները կարող են նաև օգուտ քաղել ապարատային արագացումից, երբ դա օգտագործվում է միացված որոշ զննարկիչներում: Սա jQuery- ի օգտագործման համեմատ ավելի բարձր է կատարողականի առավելություններից կենդանացնել (), Լավ է նաև բջջայինը համարելը: Ավելի քիչ JavaScript, բնական էֆեկտների և ապարատային արագացման գործարկման դեպքում կատարողականի օգուտներն իրոք կավելանան:

Այսպիսով, եկեք սկսենք, թե ինչ կարող ենք անել, օրինակներից, այնուհետև մենք այն ամբողջությամբ կմիավորենք, որպեսզի ստեղծենք փափուկ ծրագիր, որը կարող եք օգտագործել պորտֆելների, բլոգերի, պատկերասրահների կամ ցանկացած այլ բանի համար, որը ցանկանում եք փորձել:

03. Եկեք սկսենք

Մենք պատրաստվում ենք կառուցել որոշ տարաներ, որոնք ցույց կտան մեր պորտֆոլիոյում մի կտոր աշխատանքին վերաբերող պատկեր: Բեռնարկղը կկանգնի պետության վրա, որը ցույց կտա կարճ նկարագրություն և կտտոցի վիճակ, որը ցույց կտա ամբողջ պորտֆելը: Մենք jQuery- ով կօգտագործենք տարայի դասը փոխելու համար, և CSS- ի անցումներով `բոլոր անիմացիաները կարգավորելու համար: Ահա մեր տարան.

հոդված>
img src = "http://placekitten.com/278/150">
p> որոշ իքսում այստեղ p>
/ հոդված>

Բեռնարկղերը բավականին պարզ են. Մեր օրինակում կա ընդամենը պատկեր և պարբերություն: Բայց դուք կարող եք պատկերը փոխարինել վերնագրի / վերնագրի համար կամ ունենալ ձեզ դուր եկած այլ HTML տարրեր: Մենք այստեղ պատկեր ենք օգտագործում ՝ պատկերացում կազմելու համար, թե ինչ բովանդակության մասին է խոսքը: Մտածեք այն որպես մանրապատկեր ամբողջ բովանդակության համար:

Ամբողջ էջի նշումը կարող եք գտնել այս ձեռնարկի օժանդակ ֆայլերում. Պարզապես դիտեք աղբյուրը դրա համար ցուցադրություն. html.

Ինչպես տեսնում եք, ես օգտագործել եմ որոշ տեղապահի պատկերներ www.placekitten.com կայքից և որոշ ipsum տեքստը ավելացնելու համար, բայց ազատորեն ավելացրու այն ամենը, ինչ ուզում ես: Պարզապես համոզվեք, որ CSS- ում կարգավորում եք բարձրությունը:

04. Ակնհայտ, բայց հաճախ անտեսված հուշում

Ես տեսնում եմ շատ կայքեր, որտեղ մշակողը օգտագործել է CSS- ի նորմալացման / վերակայման ձև: Չնայած ինքնին դա, իհարկե, վատ բան չէ, նրանք հաճախ տեղադրում են CSS- ը, որտեղ այն պարունակում է շատ ոճ պիտակների / նշագրման համար, որոնք նույնիսկ կայքում չեն:

Անհրաժեշտ CSS- ի հեռացումը թույլ է տալիս ավելի թեթեւ CSS ֆայլերի և ավելի արագ բեռնման էջի: Փորձեք helium.js: Դա մի փոքրիկ JavaScript ֆայլ է, որը սկանավորում է ձեր կայքը և ընդգծում ցանկացած CSS, որը ձեր կայքը չի օգտագործում: Դուք կզարմանաք, թե որքանով կարող եք ապահով կերպով հանել: Ահա ամբողջական տեղադրված CSS- ը.

/*
* * HTML CSS shiv / fix [Այստեղ ես օգտագործել եմ միայն անհրաժեշտ տարրերը]
*/
հոդված, վերնագիր, բաժին {ցուցադրում: բլոկ;}
/*
* * [Որոշ ոճեր ՝ ցուցադրմանը գույն և ենթատեքստ ավելացնելու համար]
*/
html {font-size: 100%; text-size-adjust: 100%; background-color: # f0f0f0; fontfamily:
Tahoma; տառատեսակի ոճը ՝ շեղ; գույնը ՝ # 878787;}
մարմին {margin: 0; padding: 0; height: 700px;}
վերնագիր {բարձրությունը ՝ 80 հատ; ֆոնի գույնը ՝ # fbfbfb; եզրագծի ներքևում ՝ 2 հատ ամուր
#878787;}
վերնագիր h1 {լայնությունը `960px; լուսանցքը` 0 ավտոմատ; տառատեսակի քաշը `նորմալ; padding-top:
10 հատ;}
/*
* * [Որոշ ոճեր, որոնք օգտագործվել են CSS անցումային էֆեկտներ ստեղծելու համար]
*/
բաժին {լայնությունը ՝ 960px; լուսանցքը ՝ 0 ավտոմատ; դիրքը ՝ հարաբերական;}
բաժնի div {float: ձախ; լայնությունը `318px;}

Այսպիսով, մենք սահմանել ենք CSS, որպեսզի հոդվածը ունենա անթափանցիկություն ՝ 0, երբ դասը ուղիղ ավելացնենք, դա իրականում կտա մի գեղեցիկ մարում: CSS- ի համար ապրել դասը `

Article.live {անթափանցիկություն ՝ 1; լայնություն ՝ 278px; բարձրություն ՝ 150px;}

Դրանից հետո մեզ պետք է ա :սավառնել պետություն, որը ցույց կտա կարճ նկարագրությունը, երբ մկնիկը գտնվում է յուրաքանչյուր իրի վրա: CSS- ն է.

Article.live:hover{height:270px;}

Այժմ CSS- ը տեղադրված է, մենք պետք է ավելացնենք CSS- ի անցման բոլոր կարևոր ոճերը: Անցումներով ամբողջական CSS կոդն է.

Article.live {անթափանցիկություն ՝ 1; լայնություն ՝ 278px; բարձրություն ՝ 150px; անցում ՝ բոլոր 2s;}
Article.live:hover{height:270px; transition:all 1s;}

Այսպիսով, այժմ ամբողջ CSS- ը տեղում է: Այնուամենայնիվ, եթե ձեր զննարկիչում ստուգեք էջը, ապա ոչինչ չեք տեսնի: Սրա պատճառն այն է, որ մենք պետք է ավելացնենք ապրել դաս ՝ էջի բեռնման պորտֆելի բոլոր տարրերին: Դա անելու համար մենք օգտագործում ենք որոշ jQuery:

$ (գործառույթ () {
$ («հոդված»): addClass («կենդանի»);
});

Այս պահին մենք ունենք գեղեցիկ բեռի էֆեկտ և սավառնող ազդեցություն: Հիմա մեզ պետք է կտտոցով միջոցառում ՝ պորտֆոլիոյի ամբողջական կետը ցուցադրելու համար: Մեզ անհրաժեշտ է նաև դաս ՝ մնացած բոլոր իրերը թաքցնելու համար, ուստի ուշադրության կենտրոնում է այն օգտվողը, որն ընտրել է: Մենք օգտագործում ենք լրիվ դասարան և ա գնացել դասարան CSS- ն է.

Article.full {z-index: 1; ձախ ՝ 0; լայնություն ՝ 915px; անթափանցիկություն ՝ 1; բարձրություն ՝ 350px; անցում ՝

բոլոր 4-ները;}
Article.gone {անթափանցիկություն ՝ 0; անցում ՝ բոլոր 1-երը;}

Եվ այն ավելացնելու jQuery- ն է.

$ («հոդված»): կտտացնել (գործառույթ () {
$ ('Section div'). ToggleClass ('թաքնված');
$ («հոդված»). ոչ ($ տարր) .toggleClass («գնացել է»);
$ («հոդված»). ոչ ($ տարր) .toggleClass («ուղիղ»);
$ element.toggleClass ("լրիվ");
$ (այս) .toggleClass («ուղիղ»);
});

Մենք օգտագործել ենք jQuery ՝ CSS դասերը տարրերին ավելացնելու համար, բայց խուսափել ենք jQuery անիմացիոն գործառույթներ կանչելուց և ունենք այն առավելությունները, որոնք բերում են ավելի քիչ JS ֆունկցիայի զանգեր: Կարող եք նաև ավելի առաջ գնալ և մաքուր JavaScript օգտագործել ՝ կտտացնելու իրադարձությունները և դասի փոփոխությունները ավելացնելու, էջն էլ ավելի օպտիմալացնելու և այն ավելի թեթեւ դարձնելու համար:

Կարևոր է նկատել, որ CSS- ի անցումը նշանակում է, որ մենք կարող ենք ավելի քիչ սցենարներ օգտագործել `հիանալի էֆեկտներ ստեղծելու համար: Բայց մինչ մենք կստանանք CSS

մենք ստիպված կլինենք օգտագործել մի քանիսը:

05. Լաքը

Այսպիսով, հիմնական աշխատանքն ավարտված է, և շատ գեղեցիկ է թվում, գուցե մի փոքր պարզ: Այսպիսով, եկեք հիմա ավելացնենք մի փոքր լրացուցիչ CSS և JavaScript ՝ համեմունքները համեմելու համար:

Սկսեմ, որ կենդանի դասը ավելացնելիս ես կավելացնեմ էջի բեռնման պատահական ձգձգում: Սա նշանակում է, որ իրերը պատահականորեն կբեռնվեն: Դա անելու համար մենք կօգտագործենք պատահականորեն առաջադրված թիվ ժամանակների նախադրված ցուցակից: Այս կերպ մենք կարող ենք երաշխավորել նկատելիորեն տարբեր բեռնման ժամանակներ (այլ ոչ թե բոլորովին պատահական համարի, որը կարող է մեզ տալ այնպիսի արժեքներ, ինչպիսիք են 450 և 480: միլիվայրկյանների վերածվելիս դա շատ նկատելի չէր լինի): Եկեք գործառույթ կազմենք `պատահական ժամանակի հետաձգում ավելացնելու համար.

գործառույթ addDelay (տարրեր) {
var timeArray = նոր զանգված (200, 600, 1000, 1400, 1800, 2200, 2600);
համար (var count = 0; count տարրեր. երկարություն; հաշվել ++) {
setTimeout ('$ ("հոդված"). eq (' + հաշվիչ + '). addClass ("կենդանի"), timeArray [parseInt (Math.random () * 6)]);
}
}

Ապա զանգահարեք այն իրերի մեր հավաքածուի հետ միասին.

addDelay ($ («հոդվածներ»));

Դրանից հետո մի փոքր լրացուցիչ CSS ՝ տեսքը հարմարեցնելու համար: Ամբողջ CSS- ն է.

հոդված {բարձրությունը ՝ 150px; z- ինդեքսը ՝ 0; դիրքը ՝ հարաբերական; վարարումը ՝ թաքնված; անթափանցիկությունը ՝ 0;
լուսանցք ՝ 10px; լիցք ՝ 10px; բոց ՝ ձախ; եզրագծի շառավիղ ՝ 10px; ֆոնային գույն ՝ #
fbfbfb; եզրագիծ ՝ 1px պինդ # 878787; անցում ՝ բարձրություն 1s;}
Article.live {անթափանցիկություն ՝ 1; լայնություն ՝ 278px; բարձրություն ՝ 150px; անցում ՝ բոլոր 2s;}
Article.live:hover{height:270px; transition:all 1s;}
Article.full {z-index: 1; ձախ ՝ 0; լայնություն ՝ 915px; անթափանցիկություն ՝ 1; բարձրություն ՝ 350px; անցում ՝

բոլոր 4-ները;}
Article.gone {անթափանցիկություն ՝ 0; անցում ՝ բոլոր 1-երը;}
Article img {box-shadow: 0 1px 2px # 000; կուրսորը ՝ ցուցիչ;}

06. Այժմ ավելի հին զննարկիչների համար

Այժմ մենք ունենք փափուկ տեսք ունեցող պորտֆոլիոյի էջ ՝ CSS անցումներով վարվող անիմացիաներով: Այսպիսով, հիմա մենք հասնում ենք չաջակցվող զննարկիչների խնդրին, բայց նախ եկեք մի պահ պարզենք, թե ինչ նկատի ունեմ ոչ աջակցող ասելով: Եթե զննարկիչը չի աջակցում CSS- ի անցումներին, աշխարհը չի ավարտվի: Դուք դեռ կստանաք ոճի բոլոր փոփոխությունները, որոնց հետևում եք, բայց դրանք կլինեն ակնթարթորեն, ինչպես դա արվեց մեր առաջին օրինակում:

Սրա մասին ամենալավն այն է, որ ոչ աջակցող զննարկիչների արդյունքում դուք ոչ մի ֆունկցիոնալություն չեք կորցնի: Միակ խնդիրն այն է, որ այն պարզապես այնքան սահուն չի լինի, որքան վերջին Chrome- ում և մյուս բոլոր նոր նոր զննարկիչներում:

Կարող եք վիճել այն բանի դեմ, որ ֆունկցիոնալությունը մնա նույնը. այնուամենայնիվ, այն հեշտությամբ ավելացվում է jQuery- ի միջոցով, և կարող է մնալ կարևոր կետ հաճախորդների համար, ովքեր ցանկանում են կայուն օգտագործման փորձ: Հիմնական ոչ օժանդակ զննարկիչները, որոնք, ամենայն հավանականությամբ, կարող եք հանդիպել, ներառում են Firefox 3.5 և ավելի ցածր, ինչպես նաև Internet Explorer 9 և ավելի ցածր:

Մենք կօգտագործենք Modernizr պայմանական պայմանը ՝ անցումային աջակցությունը ստուգելու համար ՝ ավելացնելով jQuery իրադարձության կարգավարները, եթե այն չի աջակցվում:

Ահա վերադարձի կոդը.

գործառույթն ամբողջությամբ Աջակցված () {
/ * մենք մեր ամբողջ ֆունկցիոնալ JavaScript- ը տեղափոխում ենք այստեղ ՝ աջակցվող զննարկիչների համար * /
}
գործառույթը nonSupportive () {
/ * ահա այն վայրը, ուր հետ ես ընկնում, կգնաք * /
/ * ծալեք IE և նախնական Firefox 3.5 զննարկիչները * /
}
եթե (! Modernizr.CSStransitions) {
nonSupportive ();
}
ուրիշ {
լրիվ Աջակցված ();
}

Դրանից հետո պարզապես պետք է ավելացնել մի քանի JavaScript ոչ աջակցող դիտարկիչների համար.

$ («հոդված»): կտտացնել (գործառույթ () {
// կտտացրեք կտտացրած տարրը
var $ տարր = $ (սա);
if (! $ element.hasClass ("լրիվ")) {
$ («հոդված»): ոչ ($ տարր): կենդանի ({’անթափանցիկություն’ ՝ 0}, 1000);
$ element.animate ({
'Լայնություն'. '915px',
'Բարձրություն' ՝ '350px',
'Անթափանցիկություն'. 1}, 4000, ֆունկցիա () {
$ (այս) .addClass ("լրիվ");
});
} ուրիշ {
$ («հոդված»): ոչ ($ տարր): կենդանի ({’անթափանցիկություն’ ՝ 1}, 1000);
$ element.animate ({
'Լայնություն'. '278px',
'Բարձրություն' ՝ '150px',
'Անթափանցիկություն'. 1}, 4000, ֆունկցիա () {
$ element.removeClass ("լրիվ");
$ element.addClass ("կենդանի");
});
}
});

07. Եզրակացություն

Այս հրահանգներին հետևելուց հետո մենք կհայտնվենք փափուկ և ժամանակակից տեսք ունեցող պորտֆոլիոյի էջի վրա, որը կարող է նաև մի քանի լրացուցիչ օգտագործումներ ունենալ (փորձեք այն օգտագործել WordPress թեմայում և ծույլ բեռնել ձեր բլոգի գրառումները, օրինակ): Այն նաև ունի հետադարձ կապ ՝ զննարկիչների մի շարք գործառույթներն ու ոճը պահպանելու համար:

Գնացեք և օգտագործեք CSS անցումներ: Ինչպես արդեն ասացի, եթե կարող եք դա անել jQuery- ի միջոցով կենդանացնել (), դուք կարող եք դա անել անցումներով. իրականում ավելին, քանի որ դրա համար անհրաժեշտ է լրացում կենդանացնել () գույներ

Մինչև այն ամբողջովին ապահովված լինի, դուք պետք է հաշվի առնեք հետադարձի օգտագործումը, անկախ նրանից, թե դա մի փոքր jQuery կոդ է ՝ նույն ազդեցություններին հասնելու համար, կամ եթե ուրախ եք, որ ոճի ակնթարթային փոփոխություն է տեղի ունենում, առանց IE և հին զննարկիչների անցում կատարելու: Բայց շատ շուտ չի անցնի, մինչ անցումային բոլոր էֆեկտները կատարվեն CSS անցումներով և օգտվեն դրանց բերած բազմաթիվ առավելություններից:

Այս հոդվածը առաջին անգամ հայտնվեց .net ամսագրի 233 համարում ՝ աշխարհի ամենաշատ վաճառվող ամսագիր վեբ դիզայներների և մշակողների համար:
Շնորհակալություն Քրիս Միլսին ՝ այս ձեռնարկը գնահատելու համար

Էնդրյուն ինտեգրված շուկայավարման Turn Key գործակալության ավագ մշակող է. Www.atmd.co.uk