Kevin Powell - Community•14mo 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

Pat66•14mo 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•14mo ago

well is it supposed to grow on hover??

Zoë•14mo ago

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

glutonium•14mo ago

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

Zoë•14mo ago

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

Zoë•14mo ago

No, can be either way

glutonium•14mo ago

aah ok

Pat66•14mo ago

no when I am on the page

glutonium•14mo ago

so when u enter the webpage it'll grow?

Pat66•14mo ago

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

glutonium•14mo ago

by saying on the page

Pat66•14mo ago

yes

Zoë•14mo ago

You want an animation then

glutonium•14mo 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

Pat66•14mo ago

keeping to grow and shrink when I come on the page

glutonium•14mo 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ë•14mo 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•14mo ago

the typography is just, idk very obnoxious

Zoë•14mo ago

A lot of visual noise

glutonium•14mo ago

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

Zoë•14mo ago

❓

Zoë•14mo ago

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

glutonium•14mo ago

lol

Zoë•14mo ago

They learnt about dash array offset and needed to use it

glutonium•14mo ago

lmao

Zoë•14mo ago

I didn't even see this next to it

Zoë•14mo ago

They're the worst

glutonium•14mo 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ë•14mo ago

Website is shaking with fear Also scrolling is delayed and slow

glutonium•14mo 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ë•14mo ago

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

glutonium•14mo ago

yaa

Zoë•14mo 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ë•14mo 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

Pat66•14mo ago

I'm trying to learn with this video

Pat66•14mo 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...

Pat66•14mo ago

but the video is in french

Zoë•14mo ago

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

Zoë•14mo 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ë•14mo ago

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

Pat66•14mo ago

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

Zoë•14mo ago

That's because the visible class is being added

Pat66•14mo ago

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

Zoë•14mo 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

Pat66•14mo ago

I want just realise this effect before I had JS

vince•14mo ago

I like the artsy, marketing agency websites 😢

Zoë•14mo 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•14mo ago

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

Gaming

Programming

Animate a pseudo element