Pat66 Posts - Answer Overflow

Pat66

Posts Comments

KPCKevin Powell - Community

•Created by Pat66 on 3/13/2025 in #front-end

Begin on Lenis scroll

Hi everyone can I have some help I want begin on Lenis scroll but is difficult for me
I want recreate these effect

11 replies

KPCKevin Powell - Community

•Created by Pat66 on 3/5/2025 in #front-end

Begin on media Queries

Hi everyone I realise this https://codepen.io/alpha_66/pen/JojNMGJ?editors=1100 for media queries I realize this

@media screen(max-width:1024px){

.content{
    display:grid;
    grid-template-areas:"first two"
                        "three four";
    grid-template-columns:repeat(2 ,1fr);
    grid-template-rows:repeat(2 ,1fr);
}

.first{
    grid-area: first;
}

.two{
    grid-area:two;
}

.three{
    grid-area:three;
}

.four{
    grid-area:four;
}

.middle{
    visibility: hidden;
}

.right{
    visibility: hidden; 
}
}

@media screen(max-width:1024px){

.content{
    display:grid;
    grid-template-areas:"first two"
                        "three four";
    grid-template-columns:repeat(2 ,1fr);
    grid-template-rows:repeat(2 ,1fr);
}

.first{
    grid-area: first;
}

.two{
    grid-area:two;
}

.three{
    grid-area:three;
}

.four{
    grid-area:four;
}

.middle{
    visibility: hidden;
}

.right{
    visibility: hidden; 
}
}

something is going wrong can I have some help please

16 replies

KPCKevin Powell - Community

•Created by Pat66 on 2/13/2025 in #front-end

Visualize a cubic-bezier online

Hi everyone Please is it possible to have a soft online who can allow me to see the curve on cubic bezier example if I put this

cubic-bezier(0,.83,0,1.49)

cubic-bezier(0,.83,0,1.49)

I will see the shape on this thanks by advance

2 replies

KPCKevin Powell - Community

•Created by Pat66 on 2/11/2025 in #front-end

Center with position sticky

28 replies

KPCKevin Powell - Community

•Created by Pat66 on 2/11/2025 in #front-end

[SOLVED] Set an image in div

8 replies

KPCKevin Powell - Community

•Created by Pat66 on 4/30/2024 in #front-end

Add a mask image

9 replies

KPCKevin Powell - Community

•Created by Pat66 on 4/30/2024 in #front-end

Set some picture in one div

8 replies

KPCKevin Powell - Community

•Created by Pat66 on 4/30/2024 in #front-end

Overflow on a page

HI everyone somebody know how to use this CSS:

box-shadow:0 0 0 inset red;

box-shadow:0 0 0 inset red;

on a page to see which div make an overflow .something is missing ?

2 replies

KPCKevin Powell - Community

•Created by Pat66 on 4/30/2024 in #front-end

Grid template areas

31 replies

KPCKevin Powell - Community

•Created by Pat66 on 4/27/2024 in #front-end

Error I dont understand

18 replies

KPCKevin Powell - Community

•Created by Pat66 on 4/23/2024 in #front-end

Show picture on mouseenter

HI everybody I want achieve this
this is my work
https://codepen.io/alpha_66/pen/NWmoGBb the problem is the pictures is not appear can I have some idea to fix this ? thanks

6 replies

KPCKevin Powell - Community

•Created by Pat66 on 4/23/2024 in #front-end

Mouse follow

hi EVERYONE I realise this effect
https://codepen.io/alpha_66/pen/xxemvGN I don't know why on codepen the

mix-blend-mode:difference;

mix-blend-mode:difference;

is not working but on my computer is working very well the problem is mouse and the circle there are not moving at the same time. can I have some idea to perfom this ? thanks

6 replies

KPCKevin Powell - Community

•Created by Pat66 on 4/11/2024 in #front-end

Trying to set a scale on title

Hi everyone I realise simple effect on a page who have a title the purpose is when the mouse is on the title the mouse should grow

 <main class="central">
        <h1 >Trying to learn JS </h1>
    </main>
<div class="mouse"></div>

 <main class="central">
        <h1 >Trying to learn JS </h1>
    </main>
<div class="mouse"></div>

const central=document.querySelector('.central');
console.log(central);


const title=document.querySelector('h1');
title.addEventListener("mouseenter",()=>{
    souris.classList.toggle('survol');
})

title.addEventListener("mouseout",()=>{
    souris.classList.toggle('survol');
})



const souris=document.querySelector('.mouse');
console.log(souris);
window.addEventListener("mousemove",(e)=>{
    console.log(e);
   souris.style.left=e.pageX+ "px" ;
   souris.style.top=e.pageY + "px";
})

const central=document.querySelector('.central');
console.log(central);


const title=document.querySelector('h1');
title.addEventListener("mouseenter",()=>{
    souris.classList.toggle('survol');
})

title.addEventListener("mouseout",()=>{
    souris.classList.toggle('survol');
})



const souris=document.querySelector('.mouse');
console.log(souris);
window.addEventListener("mousemove",(e)=>{
    console.log(e);
   souris.style.left=e.pageX+ "px" ;
   souris.style.top=e.pageY + "px";
})

my css:

.mouse{
width: 19px;
height: 19px;
border-radius: 100%;
background-color: rgb(180, 180, 180);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
mix-blend-mode: difference;
transition: .2s ease;
}

.survol{
    transform: scale(2);
}

.mouse{
width: 19px;
height: 19px;
border-radius: 100%;
background-color: rgb(180, 180, 180);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
mix-blend-mode: difference;
transition: .2s ease;
}

.survol{
    transform: scale(2);
}

the problem I have the scale work near on the title not on the title can I have some idea ti fix this ? thanks

2 replies

KPCKevin Powell - Community

•Created by Pat66 on 3/31/2024 in #front-end

Lenis animation

Hello everyone, does anyone know how I can find a tutorial on how to make this 'immersive section' animation? thanks

3 replies

KPCKevin Powell - Community

•Created by Pat66 on 3/8/2024 in #front-end

Realize a vertical scroll

Hi everyone I realize this this is my work: https://codepen.io/alpha_66/pen/RwOrYNx?editors=0100 the problem is inside my .inner div I have a content under the title but I can 't scroll to see the rest on content can I get some idea to solve this problem ? take by advance .

14 replies

KPCKevin Powell - Community

•Created by Pat66 on 2/29/2024 in #front-end

Realise a single page

H ieveryone I want realise a single page

22 replies

KPCKevin Powell - Community

•Created by Pat66 on 2/27/2024 in #front-end

Translation of item in hover

Hi everyone I want realise this animation
but I don t know to begin can I have some idea .NOT CODE just some idea I want realise it myself thanks by advance

7 replies

KPCKevin Powell - Community

•Created by Pat66 on 2/23/2024 in #front-end

Put a blur

13 replies

KPCKevin Powell - Community

•Created by Pat66 on 2/15/2024 in #front-end

Push a file with Git

5 replies

KPCKevin Powell - Community

•Created by Pat66 on 2/8/2024 in #front-end

Put an image in div

15 replies

Gaming

Programming