Nudista-Online/area-51
1
1
Fork 0
Code Issues 6 Pull requests Projects 1 Releases Packages Wiki Activity

Úprava souboru index.html

Browse source
This commit is contained in:
janrippl 2025-02-13 09:34:35 +01:00
parent b6d18d642a
commit 0707e8621a
3 changed files with 110 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
alien3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.1 MiB

3
index.html
View file

@ -12,7 +12,7 @@
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content">
<div class="content light-rays">
<div class="marquee">
<div class="marquee_blur" aria-hidden="true">
@ -24,6 +24,7 @@
</div>
<p class="text">
<img align="left" width="50%" src="alien3.png" style="padding-top: 0.4rem; padding-right: 2rem;">
I wanted to make a Gooey Marquee type effect, tried a couple of things, and ended up using two layers of text, one with the effect, and a clean one on top so that the text remains readable.
</p>
</div>

176
style.css
View file

@ -1,12 +1,10 @@
/*-----------------------------------------------------------------------------------*/
/* GENERAL STYLING
/*-----------------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
*,
*::before,
*::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
@ -19,7 +17,7 @@ body {
.content {
width: 95%;
max-width: 40ch;
padding: 3em 1em;
padding: 0em 0em;
}
.marquee {
@ -30,74 +28,116 @@ body {
display: grid;
place-items: center;
overflow: hidden;
&_text {
position: absolute;
min-width: 100%;
white-space: nowrap;
animation: marquee 16s infinite linear;
@keyframes marquee {
from { translate: 70%; }
to { translate: -70%; }
}
}
.marquee_text {
position: absolute;
min-width: 100%;
white-space: nowrap;
-webkit-animation: marquee 16s infinite linear;
animation: marquee 16s infinite linear;
}
@-webkit-keyframes marquee {
from {
translate: 70%;
}
&_blur {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background-color: black;
background-image:
linear-gradient(to right, white, 1rem, transparent 50%),
linear-gradient(to left, white, 1rem, transparent 50%);
filter: contrast(15);
p {
filter: blur(0.07em);
}
to {
translate: -70%;
}
&_clear {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
@keyframes marquee {
from {
translate: 70%;
}
to {
translate: -70%;
}
}
.marquee_blur {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background-color: black;
background-image: linear-gradient(to right, white, 1rem, transparent 50%), linear-gradient(to left, white, 1rem, transparent 50%);
filter: contrast(15);
}
.marquee_blur p {
filter: blur(0.07em);
}
.marquee_clear {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.text {
margin-block: 2em;
}
/* -- paprsky -- */
@keyframes rotate {
to {
transform: rotate(1turn);
}
}
.light-rays {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(#fff, black);
overflow: hidden;
--a: rgba(3, 10, 0, 0.1);
--b: rgba(3, 10, 0, 1);
--c: rgba(3, 10, 0, 0.5);
--d: rgba(3, 10, 0, 0.68);
}
.light-rays:before,
.light-rays:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -100vmax;
width: 200vmax;
height: 200vmax;
opacity: 0.5;
}
div:before {
background: conic-gradient(
var(--a),
var(--b),
var(--c),
var(--d),
var(--a),
var(--d),
var(--a),
var(--d),
var(--b),
var(--c),
var(--d),
var(--a),
var(--b)
);
animation: rotate 4s infinite;
}
div:after {
background: conic-gradient(
var(--c),
transparent,
var(--c),
var(--a),
transparent,
var(--b),
var(--c),
transparent,
var(--c),
var(--a)
);
animation: rotate 2s 4s infinite reverse;
}