Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2022-07-04 10:55:05

Amin
Member
Registered: 2020-08-03
Posts: 17

Header

Hi,

Hope you are doing well. Could you please suggest me any code (HTML+CSS+JS) to have a header like this website. I just need the right side effect.

Thanks

Last edited by Amin (2022-07-04 10:59:46)

Offline

#2 2022-07-04 13:50:57

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Header

Hi Amin, Are you referring to the menu? If yes, you are 90% there if you used position:fixed or static, depending on the html context.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#3 2022-07-04 15:13:47

Amin
Member
Registered: 2020-08-03
Posts: 17

Re: Header

colak wrote #333668:

Hi Amin, Are you referring to the menu? If yes, you are 90% there if you used position:fixed or static, depending on the html context.

Dear Yiannis,

Thank you so much for your response. Please kindly see the following screenshot. I mean the right side of the header. Thanks

Last edited by Amin (2022-07-04 15:20:47)

Offline

#4 2022-07-04 15:20:39

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Header

Hi,

You could try using css animations


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#5 2022-07-04 15:23:49

Amin
Member
Registered: 2020-08-03
Posts: 17

Re: Header

colak wrote #333672:

Hi,

You could try using css animations

Thanks. I got the idea.

Offline

#6 2022-07-04 15:29:29

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: Header

That looks like a custom-built graphic. If you look at the source code of the element, you’ll see that it is a custom made svg container in which each letter is placed individually as an svg-outline in a matrix and then their visibility/opacity is animated. I’m guessing someone spent some time making that.

You may want to search codepen for examples of effects that get you nearer to something you like.


TXP Builders – finely-crafted code, design and txp

Offline

#7 2022-07-04 15:37:01

Amin
Member
Registered: 2020-08-03
Posts: 17

Re: Header

jakob wrote #333674:

That looks like a custom-built graphic. If you look at the source code of the element, you’ll see that it is a custom made svg container in which each letter is placed individually as an svg-outline in a matrix and then their visibility/opacity is animated. I’m guessing someone spent some time making that.

You may want to search codepen for examples of effects that get you nearer to something you like.

Dear jakob,

Thank you so much for your great help. I will search for that. Thank you.

Offline

Board footer

Powered by FluxBB