UI tilt ef­fect with SVG

Learn how to use CSS, SVG and Javascript to add a tilt­ing ef­fect to UI el­e­ments to add en­gage­ment to land­ing pages

Web Designer - - Meta Contents -

In­tro­duce an­i­mated hover ef­fects to land­ing pages us­ing CSS, Javascript and SVG

An­i­ma­tion ap­plied to user in­ter­face el­e­ments have now be­come much more prominent and are no longer the de­light­ful sur­prises they once were – now, they’re ex­pected.

The ex­plo­sion of pro­to­typ­ing tools in the past few years has given web de­sign­ers an op­por­tu­nity to cre­ate de­tailed in­ter­ac­tions and an­i­ma­tions. These tools also give us an op­por­tu­nity to learn new ideas and un­der­stand the pur­pose of the an­i­ma­tion with­out get­ting to heavy. How­ever, in front-end de­vel­op­ment, DOM el­e­ments can now be eas­ily an­i­mated us­ing CSS, and to­gether with Javascript and SVGS, you can cre­ate some amaz­ing UI an­i­ma­tions.

So in this tu­to­rial we will cre­ate a cou­ple of UI el­e­ments for a fic­ti­tious restau­rant and give them a nice hover ef­fect that will in­clude SVGS, CSS an­i­ma­tions and a jquery plugin that cre­ates a tilt­ing and glare ef­fect. And to make things easy for us, we will do this us­ing Code­pen.

1. Get­ting set up

Open up Code­pen at – code­pen.io – and cre­ate a new pen. Within the set­tings, make sure the CSS sec­tion is set to Sass (.scss) and choose ‘nor­mal­ize’ as the CSS base. The first bit of HTML we will add will be a sec­tion tag, and within that an an­chor tag, which has two classes: ‘an­i­mate’ and ‘tilt-one’.

<sec­tion class=”con­tent”>

<a href=”#” class=”an­i­mate

</a>

</sec­tion> tilt-one”>

2. Fig­ure tag and im­age

Within the an­chor tag that we just added in the last step, cre­ate a ‘<fig­ure>’ tag and give it two classes: ‘tilt-fig­ure’ and ‘card’. Then choose an im­age that rep­re­sents a restau­rant and place that in be­tween the fig­ure tag. <fig­ure class=”tilt-fig­ure card”>

<img class=”tilt-im­age” src=”https://im­age. ibb.co/ggf8zh/restau­ran­t_s­mall.jpg” alt=”img07” />

</fig­ure>

3. The im­age and caption

In the last step we used the ‘<fig­ure>’ tag. The fig­ure tag spec­i­fies self-con­tained con­tent such as pho­tos and is in­tended to be used in con­junc­tion with the <fig­cap­tion> tag and this is ideal for what we need. So within the fig­ure tag and un­der­neath the im­age link we’ve al­ready added, we can add in a caption.

<div class=”tilt-deco tilt-deco--over­lay”></ div>

<fig­cap­tion class=”tilt-caption”>

<h3 class=”tilt-ti­tle”>our Restau­rant</h3> <p class=”tilt-de­scrip­tion”>book a Table</ p>

</fig­cap­tion>

4. Bor­der lines us­ing SVG

SVG (scal­able vec­tor graph­ics) is now becoming one of the most ef­fec­tive and eas­i­est ways of an­i­mat­ing on the web (see the in de­tail sec­tion to learn more). So within the fig­ure tag, we can use SVG to add in a bor­der. We can tar­get the SVG by given it a class name(s) and then ma­nip­u­late it us­ing CSS in a later step.

<svg class=”tilt-deco tilt-deco--lines” view­box=”0 0 300 415”>

<path d=”m20.5,20.5h260v375h-260v20.5z” </svg>

5. Sec­ond UI el­e­ment

The first UI el­e­ment – which we will now call ‘card’ – will be for book­ing a table. The sec­ond one we will now add is go­ing to be for book­ing a room. The only dif­fer­ence we have is that we’ve added a new class called ‘data-tilt’ which we will use for our jquery. So make sure you also add that to the first card.

<a href=”#” class=”an­i­mate tilt-one”>

<fig­ure class=”tilt-fig­ure card” datatilt>

<img class=”tilt-im­age” src=”https:// im­age.ibb.co/b2ek8c/rooms.jpg” alt=”img07”

/>

<div class=”tilt-deco tilt-deco-over­lay”></div> /> <fig­cap­tion class=”tilt-caption”>

<h3 class=”tilt-ti­tle”>our Rooms</h3> <p class=”tilt-de­scrip­tion”>book now</p> </fig­cap­tion>

<svg class=”tilt-deco tilt-deco--lines” view­box=”0 0 300 415”>

<path d=”m20.5,20.5h260v375h-260v20.5z” /> </svg>

</a>

6. Sass vari­ables

As we’re us­ing Sass we can spec­ify a few de­fault vari­ables that we will use for back­ground colours. Then un­der­neath our vari­ables we will make sure that all el­e­ments have the ‘box-siz­ing’ prop­erty by us­ing the ‘*’ se­lec­tor. $light­bur­gundy: rgba(214, 100, 40, 0.6); $light­pur­ple: rgba(16, 11, 192, 0.5); *, *::af­ter, *::be­fore {

-we­bkit-box-siz­ing: bor­der-box; box-siz­ing: bor­der-box; }

7. Back­ground colours and im­age

By adding a back­ground im­age that fills the whole page, this gives us a nice look and feel. To help with that even fur­ther, we will add a lin­ear gra­di­ent over­lay us­ing the Sass vari­ables we spec­i­fied ear­lier. We do need to make sure though that our im­age has a height set to 100vh (view­port height). This will al­low our im­age to stretch ac­cord­ing to the view­port. body { font-fam­ily: ‘Roboto’, Arial, sans-serif; color: #463f51; back­ground: lin­ear-gra­di­ent(to right, $light­bur­gundy, $light­pur­ple),

url(‘https://im­age.ibb.co/chb5gx/ ar­chi­tec­ture_bar_busi­ness_791810.jpg’) cen­ter no-re­peat; back­ground-size: cover; height: 100vh; }

8. Colour tran­si­tion

All the con­tent within our cards are wrapped within an an­chor tag, and on hover this con­tent will ap­pear from the bot­tom of each card and an­i­mate up. To give this a bet­ter ef­fect we will first set the de­fault text colour to our light bur­gundy vari­able and then use a colour tran­si­tion to change it to white for its fi­nal state. a { out­line: none; color: $light­bur­gundy; text-dec­o­ra­tion: none; tran­si­tion: color 0.2s; } a:hover, a:fo­cus {

color: #fff; }

9. Us­ing Flexbox

To help align and cen­tre our cards, we can use Flexbox on the con­tent sec­tion. This will al­low us to use a num­ber of Flexbox prop­er­ties that will align, cen­tre and space out our cards evenly.

.con­tent { display: flex; flex-wrap: wrap; align-items: cen­ter; jus­tify-con­tent: space-evenly; pad­ding: 0 0 4em; height: 750px; min-height: 100vh; po­si­tion: rel­a­tive; }

10. Card siz­ing

We now need to set the size of the cards. Firstly though, we will clear any mar­gins, and then set the width and height of both the fig­ure tag and the im­age to 100%.

Then lastly we need to make sure these are dis­played as a block level el­e­ment.

.tilt-fig­ure,

.tilt-im­age { mar­gin: 0; width: 100%; height: 100%; display: block; }

11. Drop shadow

Cre­at­ing a drop shadow us­ing CSS is pretty straight­for­ward these days, how­ever we’re go­ing to do this a little dif­fer­ent and cre­ate a hid­den el­e­ment which will go be­hind the main card and then put a shadow on that. Do­ing this will give us a bit more con­trol of how the shadow looks.

.tilt-fig­ure::be­fore { con­tent: ‘’; po­si­tion: ab­so­lute; width: 90%; height: 90%; top: 5%; left: 5%; box-shadow: 0 30px 20px rgba(35,32,39,0.6);

}

12. Card over­lay

The ‘tilt-deco’ class will be used a cou­ple of times and its pur­pose is to cre­ate a shape that we will place over the main card, and then we will cre­ate a lin­ear gra­di­ent over­lay us­ing rgba colours. We will tone down the gra­di­ent colour in a later step. .tilt-deco { po­si­tion: ab­so­lute; top: 0; left: 0; width: 100%; height: 100%; over­flow: hid­den; }

.tilt-deco--over­lay { back­ground-im­age: lin­ear-gra­di­ent(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4),

rgba(16, 11, 192, 0.4)); }

13. The white bor­der

By us­ing the shape we cre­ated in the last step, we can now use our SVG path and cre­ate a white bor­der that will sit in­side our card. Firstly we should make sure the fill is set to ‘none’ and spec­ify that the stroke is set to white with a width of ‘3.5’ pix­els.

.tilt-deco--lines { fill: none; stroke: #fff; stroke-width: 3.5px; }

14. Caption, ti­tle and de­scrip­tion

Our caption, which holds our ti­tle and de­scrip­tion, will be po­si­tioned at the bot­tom of the card. Then we will give the ti­tle and de­scrip­tion some de­fault styles. We’ve given the de­scrip­tion a good amount of let­ter spac­ing so it ap­pears that we’re us­ing two dif­fer­ent fonts. .tilt-caption { po­si­tion: ab­so­lute; bot­tom: 0; width: 100%; pad­ding: 4em; }

.tilt-ti­tle {

mar­gin: 0;

font-weight: nor­mal; font-size: 2.2em; font-fam­ily: ‘Roboto’, serif; line-height: 1;

}

.tilt-de­scrip­tion { mar­gin: 1em 0 0 0; font-size: 0.85em; let­ter-spac­ing: 0.15em; }

15. Ex­tra over­lay colours

As I men­tioned in a pre­vi­ous step, we are go­ing to tone down the first over­lay by adding an­other. We could use the Sass vari­ables again, but we wanted this to have a darker over­lay at the bot­tom so the text blends bet­ter for when we an­i­mate the text up on hover.

.tilt-one .tilt-deco--over­lay { back­ground-im­age: lin­ear-gra­di­ent(20deg, rgb(214, 100, 40), rgba(46, 39, 173, 0.58), rgba(53, 74, 165, 0.6));

}

16. An­i­ma­tions

This is where the fun be­gins. Now we can be­gin to an­i­mate the ti­tle, the de­scrip­tion and the white SVG bor­der. As we said in the last step, you can now see the ti­tle and de­scrip­tion ap­pear from the bot­tom colour and it gives us a nice ef­fect.

.tilt-one .tilt-deco--lines { trans­form: scale3d(0.8,0.8,1); tran­si­tion: trans­form 0.4s;

}

.tilt-one:hover .tilt-deco--lines { trans­form: scale3d(1,1,1);

}

.tilt-one .tilt-ti­tle,

.tilt-one .tilt-de­scrip­tion { trans­form: trans­late3d(0,80px,0); opac­ity: 0; tran­si­tion: trans­form 0.4s, opac­ity 0.4s;

}

.tilt-one:hover .tilt-de­scrip­tion { tran­si­tion-de­lay: 0.1s;

}

.tilt-one:hover .tilt-ti­tle, .tilt-one:hover .tilt-de­scrip­tion { trans­form: trans­late3d(0,0,0); opac­ity: 1; } 17. Op­tional icons This is an op­tional step and will in­volve cre­at­ing a more de­tailed SVG icon(s). There’s plenty of on­line re­sources that al­lows you to down­load icons in SVG for­mat, so try and find a cou­ple that rep­re­sents a restau­rant table and a bed.

.svg-icon { trans­form: trans­late3d(130px, -200px, 0); opac­ity: 1; tran­si­tion: trans­form 0.4s, opac­ity 0.4s;

}

18. An­i­mate the icons

In the pre­vi­ous step we set the opac­ity of our icons to be vis­i­ble. And then we po­si­tioned it in the cen­tre. In this step we will now add in some an­i­ma­tion that will move the icon up and as it does so, it will grad­u­ally fade out. .tilt-one:hover .svg-icon { trans­form: trans­late3d(130px, -250px, 0); opac­ity: 0; tran­si­tion: trans­form 0.4s, opac­ity 0.4s; }

19. Adding the tilt jquery

To cre­ate the tilt­ing ef­fect we are go­ing to use a jquery plugin which you can get from its github repo: https:// github.com/gi­js­roge/tilt.js. Do make sure you in­clude the CDN link into Code­pen (within the JS set­tings) and then in the JS sec­tion add in the jquery shown. (func­tion( $ ) {

“use strict”;

$(“.card”).tilt({ max­tilt: 10, per­spec­tive: 1400, eas­ing: “cu­bic-bezier(.03,.98,.52,.99)”, speed: 1200, scale: 1.05

});

}( jquery ));

20. Adding some glare

There’s quite a bit we can do with this handy little plugin, so go ahead and play around with the val­ues. How­ever, one nice ef­fect we can use is the glare ef­fect. We don’t want too much of a glare so set it to around ‘0.3’ and you’ll see how nice and sub­tle this now looks. (func­tion( $ ) {

“use strict”;

$(“.card”).tilt({ max­tilt: 10, per­spec­tive: 1400, eas­ing: “cu­bic-bezier(.03,.98,.52,.99)”, speed: 1200, glare: true, maxglare: 0.3, scale: 1.05

});

}( jquery ));

21. Fi­nal thoughts

UI an­i­ma­tion and in­ter­ac­tions are cer­tainly a nice skill to have. You can’t de­velop a web­site, web app or mo­bile app with­out us­ing some sort of an­i­ma­tion. But try not to over do it as this could have a neg­a­tive ef­fect on the user ex­pe­ri­ence.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.