Textpattern CMS

#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)

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

colak

Admin

From: Cyprus

Registered: 2004-11-20

Posts: 9,093

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.

#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)

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

colak

Admin

From: Cyprus

Registered: 2004-11-20

Posts: 9,093

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.

#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.

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

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,742

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

#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.