Pat66 Posts - Answer Overflow

Pat66

Posts Comments

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

KPCKevin Powell - Community

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

Set a title

7 replies

KPCKevin Powell - Community

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

Set a grid

Hi everyone I want realise a grid but I don t understand what is going wrong
https://codepen.io/alpha_66/pen/wvOXdGw can I have some idea ?

5 replies

KPCKevin Powell - Community

•Created by Pat66 on 1/22/2024 in #front-end

querySelectorAll not working

21 replies

KPCKevin Powell - Community

•Created by Pat66 on 1/20/2024 in #front-end

discount calculator

I realise a discount calculator who should show on the bottom : first: the name of the product second: the price and the discount this is my work : https://codepen.io/alpha_66/pen/oNVwgOG?editors=1010 but somthing is going wrong can I get some idea about what is going wrong ? thanks by advance

45 replies

KPCKevin Powell - Community

•Created by Pat66 on 1/18/2024 in #front-end

Time is not running

I realise this https://codepen.io/alpha_66/pen/JjzNdqx?editors=0010 the problem I have now is the time is not going (sorry for my english I m french guy) can I get a idea about what is going wrong ? thanks

6 replies

Gaming

Programming