From 44e3325dff5c1a5c768fac579dddc39b90e07b33 Mon Sep 17 00:00:00 2001 From: Prajjwal Date: Mon, 12 Feb 2024 01:21:44 +0530 Subject: [PATCH] Level2 added a trailer --- index.html | 6 ++++-- main.js | 8 ++++++++ style.css | 18 ++++++++++++++++++ 3 files changed, 30 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 0aeecf1..b084007 100644 --- a/index.html +++ b/index.html @@ -2,14 +2,16 @@ - Bloby site - + + + +

Nice curves

diff --git a/main.js b/main.js index cab743a..b420aa2 100644 --- a/main.js +++ b/main.js @@ -1 +1,9 @@ import './style.css' + +const trailer = document.getElementById("trailer"); + +window.onmousemove = e => { + const x = e.clientX - trailer.offsetWidth/2, + y = e.clientY - trailer.offsetHeight/2; + trailer.style.transform = `translate(${x}px, ${y}px)`; +} diff --git a/style.css b/style.css index cbab0f7..c143053 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,18 @@ +#trailer { + height:20px; + width:20px; + background-color: aqua; + border-radius:20px; + + position:fixed; + left:0px; + top:0px; + z-index:10; + pointer-events:none; + + opacity:0; + transition:opacity 500ms ease; +} h1 { font-size: 4rem; } @@ -30,3 +45,6 @@ section { z-index: 0; transform: translateY(-45%); } +body:hover > #trailer { + opacity:1; +}