Kevin Powell - Community•2y ago

Animate a pseudo element

Hi everyone
I want realise a website like this https://contrabureau.com/ my own look like this:

VictorWork

ContraBureau

A multidisciplinary creative studio specializing in campaigns, brands, and spaces.

48 Replies

Pat66OP•2y ago

this is my code html:

<nav>
            <ul>
 
             <li class="first visible"> 
                <div style=" background-image: url('assets/burger.jpg');"></div>
                 <span>01</span> 
                 <a href="#"> <h1>burger</h1></a> 
                </li>
             <li class="two  visible">
                <div style=" background-image: url('assets/sandwich.jpg');"></div>
                <span>02</span> 
                <a href="#"><h1>sandwich</h1></a>
             </li>
             <li class="three  visible">
                <div style=" background-image: url('assets/salade.jpg');"></div>
                <span>03</span>
                 <a href="#"><h1>salade</h1></a>  
                </li>
             <li class="four visible ">
                <div style=" background-image: url('assets/drink.jpg');"></div>
                <span>04</span> 
                <a href="#"><h1>boissons</h1></a> 
            </li>
             <li class="five  visible">
                <div style=" background-image: url('assets/pasta.jpg');"></div>
                <span>05</span>
                 <a href="#"><h1>pates</h1></a>  
                </li>
 
           </ul>
 
</nav>

<nav>
            <ul>
 
             <li class="first visible"> 
                <div style=" background-image: url('assets/burger.jpg');"></div>
                 <span>01</span> 
                 <a href="#"> <h1>burger</h1></a> 
                </li>
             <li class="two  visible">
                <div style=" background-image: url('assets/sandwich.jpg');"></div>
                <span>02</span> 
                <a href="#"><h1>sandwich</h1></a>
             </li>
             <li class="three  visible">
                <div style=" background-image: url('assets/salade.jpg');"></div>
                <span>03</span>
                 <a href="#"><h1>salade</h1></a>  
                </li>
             <li class="four visible ">
                <div style=" background-image: url('assets/drink.jpg');"></div>
                <span>04</span> 
                <a href="#"><h1>boissons</h1></a> 
            </li>
             <li class="five  visible">
                <div style=" background-image: url('assets/pasta.jpg');"></div>
                <span>05</span>
                 <a href="#"><h1>pates</h1></a>  
                </li>
 
           </ul>
 
</nav>

my code css:

li{
    width: 100vw;
    height:15vw;
    display:flex;
    align-items: flex-start;
    padding-left: 95px;
    position: relative;
    overflow: hidden;
}
 
li:before{
 
    content: "";
    position: absolute;
    height: .2vw;
    background-color: #c92d1f;
    left: 0;
    width: 100%;
    bottom: 0;
    transform: scaleX(0);
    transition: transform 1s ease-out;
    transform-origin: left;
}
 
.visible:before{
    transform: scaleX(1);
}

li{
    width: 100vw;
    height:15vw;
    display:flex;
    align-items: flex-start;
    padding-left: 95px;
    position: relative;
    overflow: hidden;
}
 
li:before{
 
    content: "";
    position: absolute;
    height: .2vw;
    background-color: #c92d1f;
    left: 0;
    width: 100%;
    bottom: 0;
    transform: scaleX(0);
    transition: transform 1s ease-out;
    transform-origin: left;
}
 
.visible:before{
    transform: scaleX(1);
}

the problem is my underline on the link suppose to grow from left to right but nothing is happend can I get help thanks by advance.

glutonium•2y ago

well is it supposed to grow on hover??

Zoë•2y ago

Changing .visible:before to li:hover:before makes it work

glutonium•2y ago

either way i don't see any animation or hover shouldn't it be li:hover::before

Zoë•2y ago

Also, this is why websites shouldn't rely on specific viewport heights to work. Even fancy websites drop the ball

Zoë•2y ago

No, can be either way

glutonium•2y ago

aah ok

Pat66OP•2y ago

no when I am on the page

glutonium•2y ago

so when u enter the webpage it'll grow?

Pat66OP•2y ago

he don't suppose to be on the hover but when I'm on the page

glutonium•2y ago

by saying on the page

Pat66OP•2y ago

yes

Zoë•2y ago

You want an animation then

glutonium•2y ago

now the question is , is it supposed to grow and shrik and keep repeating or just grow and stay the website is nice but daamn I don't like the red color

Pat66OP•2y ago

keeping to grow and shrink when I come on the page

glutonium•2y ago

also, i feel like the texts r just too overwhelming well then animation in the :before add

animation : grow-shrink 1s linear infinite alternate;

animation : grow-shrink 1s linear infinite alternate;

and then in css add

@keyframes grow-shrink{
  to{
     transform : scaleX(1);
   }
}

@keyframes grow-shrink{
  to{
     transform : scaleX(1);
   }
}

should work i guess

Zoë•2y ago

The more I look at contrabureau's website the more I hate it Things are based on viewport width so if you have a widescreen monitor you're going to have a bad time as everything is huge Their footer isn't stickied, it's being constantly translated so it bumps up and down by a pixel as you scroll Websites with loading pages are annoying, they don't even have anything that explains it The animation on their logo on hover jerks and comes to a sudden stop I hate the circle thing under the cursor, it does shrink while focussed but it's still opaque The scrollbar is nonfunctional For a website that is meant to be polished all of the things that have animations and transitions don't play nicely with hovering and unhovering quickly I hate artsy fartsy websites so much

glutonium•2y ago

the typography is just, idk very obnoxious

Zoë•2y ago

A lot of visual noise

glutonium•2y ago

yaa exactly it's like u enter and it u have no idea what is going on what to read

Zoë•2y ago

❓

Zoë•2y ago

When you hover over it a bit jumps up from the left

glutonium•2y ago

lol

Zoë•2y ago

They learnt about dash array offset and needed to use it

glutonium•2y ago

lmao

Zoë•2y ago

I didn't even see this next to it

Zoë•2y ago

They're the worst

glutonium•2y ago

😂😂 i mean the amount of big words and letters it's obvious not to notice that 😂 excessive amount of styling i assume it's some fashion websites??

Zoë•2y ago

Website is shaking with fear Also scrolling is delayed and slow

glutonium•2y ago

😂😂 having a stroke i like minimalist webpages more it just hurts to think the amount of effort went into this only for the website to not even be user friendly

Zoë•2y ago

I like websites that don't try too hard and are nice to use and predictable

glutonium•2y ago

yaa

Zoë•2y ago

I mean I have made some terrible footers https://codepen.io/z-/pen/zYxdRQy but I wouldn't actually use it in a website

Zed Dash

CodePen

CSS Goey footer

I'm a little late to the blob party, but I'm having fun Do not use this for real projects with this amount of blobs, use 24 of them or less 😛 _ ...

Zoë•2y ago

If you have a funny idea it belongs on CodePen, not on a website, they need to get it out of their system and make something good

Pat66OP•2y ago

I'm trying to learn with this video

Pat66OP•2y ago

https://www.youtube.com/watch?v=wNGFdZM8dqg&t=626s

Benjamin Code

YouTube

Challenge: 1h pour créer un menu interactif avec CSS et JavaScript

Procurez-vous la version complète de cette vidéo sur mon shop et profitez de -30% avec le code BUREAUCODE30 pour les 30 premiers acheteurs ! https://shop.benjamincode.tv Si vous faites le challenge de votre côté, les polices sont : Crimson Text pour les titres et Space Grotesk pour les texts. Le site que j'utilise pour réaliser mon splitter e...

Pat66OP•2y ago

but the video is in french

Zoë•2y ago

Ah they're using IntersectionObserver to add the class to do the animation

Zoë•2y ago

https://codepen.io/z-/pen/yLRzvxK/7e70596d218432d4273650c514aec8c9?editors=0010 this is a minimal example More in-depth example https://codepen.io/z-/pen/qBJPxQz/1164e4cd2852e2fc781fd7f4a22dbfe8?editors=0010

Zed Dash

CodePen

For BOIITHUGGER IntersectionObserver

...

Zed Dash

CodePen

For BOIITHUGGER IntersectionObserver 2

...

Zoë•2y ago

Just having the class won't do anything because the initial state is visible, not turning visible

Pat66OP•2y ago

if you look before he had intersectionObserver the animation of underline is working

Zoë•2y ago

That's because the visible class is being added

Pat66OP•2y ago

at 5:44min to my side he don't work

Zoë•2y ago

He's using vite which updates the website but only what changes meaning that the class is given the style to animate but the page didn't reload, if he were to refresh at 5:44 it would just show the line there without animation

Pat66OP•2y ago

I want just realise this effect before I had JS

vince•2y ago

I like the artsy, marketing agency websites 😢

Zoë•2y ago

Some of them are amusing and they do impressive things but they all fail at being functional websites that only exist to get Awwwards. This one is by far the least polished and has the most glaring issues

vince•2y ago

Yea I agree, a lot of them are super sluggish haha

Gaming

Programming

Animate a pseudo element