redflu
Hectopat
- Katılım
- 1 Aralık 2019
- Mesajlar
- 14
Daha fazla
- Cinsiyet
- Erkek
Merhaba, portfolyo sayfamı oluşturmaya devam ediyorum fakat bu sefer javascript kısmında takıldım. Yazdığım kod tam olarak çalışmıyor. Benim istediğim aşağıdaki gifte eklediğim gibi daha pürüzsüz bir geçiş. Bunu koda eklememe rağmen bunu dikkate almadan olduğu gibi herhangi bir efekt olmadan direkt bir geçiş söz konusu. Dünden beri bir çok yöntemle denemiş olmama rağmen bir çözüm alamadım. @oynozan hocam dün yardımcı olmuştu tekrar bakabilirseniz memnun olurum.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>utkubahceci</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
body {
font-family: 'Poppins', sans-serif;
font-size: 36px;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div>
<p>portfolio</p>
</div>
<div>
<p>about me</p>
</div>
</div>
<script>
const portfolio = document.querySelector('.container > div:first-child');
const body = document.body;
portfolio.addEventListener('mouseenter', () => {
body.style.background = 'conic-gradient(from 180deg, #000, #fff)';
body.style.transition = 'background 400ms ease-out';
});
portfolio.addEventListener('mouseleave', () => {
body.style.background = 'conic-gradient(from 180deg, #fff, #000)';
body.style.transition = 'background 400ms ease-out';
});
</script>
</body>
</html>
CSS:
body {
height: 100vh;
width: 100vw;
margin: 0;
background: conic-gradient(from 180deg, #fff, #000);
background-repeat: no-repeat;
background-size: auto;
overflow: hidden;
}
.container {
height:100vh;
width:100vw;
display:flex;
}
.container > div {
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
.container > div:last-child p {
color: rgb(255, 255, 255);
}
.container > div:first-child:hover p {
color: #fff;
transition: background 800ms ease-in-out;
}
Son düzenleyen: Moderatör:
