From c360f66a99bb4c833092ad50442304b5c8390037 Mon Sep 17 00:00:00 2001 From: PashaKorsh Date: Tue, 8 Apr 2025 18:09:51 +0500 Subject: [PATCH 1/5] lightbox --- index.html | 9 ++++++++- styles.css | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..2638d74 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,14 @@ - + + +
+
+ +

Содержимое модального окна

+
+
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..f0e4013 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,34 @@ +img { + width: 100px; + height: 100px; +} + +.lightbox { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.lightcontent { + width: 640px; + background: white; + position: relative; + padding: 20px; + border-radius: 8px; +} + +.lightbutton { + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 20px; + cursor: pointer; +} \ No newline at end of file From 678781f7d112c65d1cb7488606979a7e7ab0ffe1 Mon Sep 17 00:00:00 2001 From: PashaKorsh Date: Tue, 8 Apr 2025 18:23:25 +0500 Subject: [PATCH 2/5] wegopmlgnowlrjghwrlknhlkrwemh;lermlkhnerh --- index.html | 4 ++++ styles.css | 16 +++++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2638d74..b7df945 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,10 @@

Содержимое модального окна

+
+
+ Loading... +
diff --git a/styles.css b/styles.css index f0e4013..4bca14f 100644 --- a/styles.css +++ b/styles.css @@ -20,7 +20,6 @@ img { background: white; position: relative; padding: 20px; - border-radius: 8px; } .lightbutton { @@ -31,4 +30,19 @@ img { border: none; font-size: 20px; cursor: pointer; +} + +.progress { + background-color: grey; + width: 640px; + text-align: center; + height: 20px; + vertical-align: middle; +} + +.red { + position: absolute; + background-color: red; + width: 100px; + height: 20px; } \ No newline at end of file From 55cfb4cba70784d3a1b8ae816a8b5ba888bb84c4 Mon Sep 17 00:00:00 2001 From: PashaKorsh Date: Tue, 8 Apr 2025 18:35:06 +0500 Subject: [PATCH 3/5] erhmerl;khml;er --- index.html | 2 +- index.js | 6 +++++- styles.css | 15 +++++++++++---- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index b7df945..becd4f2 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@

Содержимое модального окна

- Loading... +
Loading...
diff --git a/index.js b/index.js index dd50919..541bd36 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,8 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +const element = document.querySelector('.red'); + +// element.style.width = '300px'; \ No newline at end of file diff --git a/styles.css b/styles.css index 4bca14f..d14c018 100644 --- a/styles.css +++ b/styles.css @@ -35,14 +35,21 @@ img { .progress { background-color: grey; width: 640px; - text-align: center; height: 20px; - vertical-align: middle; + position: relative; } .red { position: absolute; background-color: red; - width: 100px; - height: 20px; + width: 50%; + height: 100%; + z-index: 1; +} + +.textt { + position: absolute; + width: 100%; + text-align: center; + z-index: 2; } \ No newline at end of file From 3d1618fa396781c69126fbd689b7f7080957c42d Mon Sep 17 00:00:00 2001 From: PashaKorsh Date: Tue, 8 Apr 2025 19:02:01 +0500 Subject: [PATCH 4/5] 123 --- index.js | 16 +++++++--------- styles.css | 1 + 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/index.js b/index.js index 541bd36..9530eac 100644 --- a/index.js +++ b/index.js @@ -1,11 +1,9 @@ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ - const element = document.querySelector('.red'); -// element.style.width = '300px'; \ No newline at end of file +let a = 0; +let fps = 60; +let b = setInterval(() => { + element.style.width = Math.min(a, 100) + '%'; + a += 100 / fps / 3; +}, 1000 / fps); +setTimeout(() => clearInterval(b), 3000); \ No newline at end of file diff --git a/styles.css b/styles.css index d14c018..b93f249 100644 --- a/styles.css +++ b/styles.css @@ -52,4 +52,5 @@ img { width: 100%; text-align: center; z-index: 2; + mix-blend-mode: initial; } \ No newline at end of file From 66ee1414abe1c574607f26308ef0a800a107aaa4 Mon Sep 17 00:00:00 2001 From: PashaKorsh Date: Tue, 8 Apr 2025 19:25:32 +0500 Subject: [PATCH 5/5] pmrhoierhol --- index.html | 4 ++-- index.js | 6 +++--- styles.css | 19 +++++++++++-------- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index becd4f2..14d5168 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,8 @@

Содержимое модального окна

-
-
Loading...
+
Loading...
+
Loading...
diff --git a/index.js b/index.js index 9530eac..237509d 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,9 @@ const element = document.querySelector('.red'); -let a = 0; +let a = 100; let fps = 60; let b = setInterval(() => { - element.style.width = Math.min(a, 100) + '%'; - a += 100 / fps / 3; + element.style.clipPath = "inset(0 " + Math.min(100, a) + "% 0 0)" + a -= 100 / fps / 3; }, 1000 / fps); setTimeout(() => clearInterval(b), 3000); \ No newline at end of file diff --git a/styles.css b/styles.css index b93f249..a1c37af 100644 --- a/styles.css +++ b/styles.css @@ -39,18 +39,21 @@ img { position: relative; } -.red { +.grey { position: absolute; - background-color: red; - width: 50%; - height: 100%; + width: 100%; + text-align: center; z-index: 1; + color: black; } -.textt { - position: absolute; - width: 100%; +.red { text-align: center; + position: absolute; + background-color: red; + clip-path: inset(0 0% 0 0);; + height: 100%; z-index: 2; - mix-blend-mode: initial; + width: 100%; + color: white; } \ No newline at end of file