area-51/index.html

<!DOCTYPE html>
<html lang="cs">
<head>
	
	<meta charset="utf-8">
	<title>White | responsive bootstrap3 html5 one page template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
    
	<!-- CSS -->
	<style>
	@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
  font-family: Raleway, sans-serif;
  background-color: #000;
  color: #fff;
  font-size: 24px;
}

.content {
  width: 95%;
  max-width: 40ch;
  padding: 3em 1em;
}

.marquee {
  position: relative;
  width: 100%;
  height: 2em;
  font-size: 5em;
  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%; }
    }
  }

  &_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);
    }
  }
  
  &_clear {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
  }
}

.text {
  margin-block: 2em;
}
	</style>
</head>
<body>
<div class="content">
  
  <div class="marquee">
    <div class="marquee_blur" aria-hidden="true">
      <p class="marquee_text">Lorem ipsum dolor sit amet!</p>
    </div>
    <div class="marquee_clear">
      <p class="marquee_text">Lorem ipsum dolor sit amet!</p>
    </div>
  </div>

  <p class="text">
    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>
</body>
</html>
Úprava souboru index.html 2025-01-30 04:21:55 +01:00			`<!DOCTYPE html>`
Úprava souboru index.html 2025-01-30 05:34:50 +01:00			`<html lang="cs">`
Úprava souboru index.html 2025-01-30 04:21:55 +01:00			`<head>`

			`<meta charset="utf-8">`
			`<title>White \| responsive bootstrap3 html5 one page template</title>`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
			`<meta name="description" content="">`
			`<meta name="author" content="">`

			`<!-- CSS -->`
Úprava souboru index.html 2025-02-12 15:38:31 +01:00			`<style>`
Úprava souboru index.html 2025-02-13 08:27:51 +01:00			`@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");`

			`, ::before, *::after {`
			`padding: 0;`
			`margin: 0 auto;`
			`box-sizing: border-box;`
Úprava souboru index.html 2025-02-12 15:38:31 +01:00			`}`

Úprava souboru index.html 2025-02-13 08:27:51 +01:00			`body {`
			`font-family: Raleway, sans-serif;`
			`background-color: #000;`
Úprava souboru index.html 2025-02-12 15:38:31 +01:00			`color: #fff;`
Úprava souboru index.html 2025-02-13 08:27:51 +01:00			`font-size: 24px;`
Úprava souboru index.html 2025-02-12 15:38:31 +01:00			`}`

Úprava souboru index.html 2025-02-13 08:27:51 +01:00			`.content {`
			`width: 95%;`
			`max-width: 40ch;`
			`padding: 3em 1em;`
Úprava souboru index.html 2025-02-12 15:38:31 +01:00			`}`
Úprava souboru index.html 2025-02-13 08:27:51 +01:00
			`.marquee {`
			`position: relative;`
			`width: 100%;`
			`height: 2em;`
			`font-size: 5em;`
			`display: grid;`
			`place-items: center;`
			`overflow: hidden;`

			`&_text {`
			`position: absolute;`
			`min-width: 100%;`
			`white-space: nowrap;`
			`animation: marquee 16s infinite linear;`
Úprava souboru index.html 2025-01-30 04:21:55 +01:00
Úprava souboru index.html 2025-02-13 08:27:51 +01:00			`@keyframes marquee {`
			`from { translate: 70%; }`
			`to { translate: -70%; }`
			`}`
			`}`
Úprava souboru index.html 2025-01-30 04:21:55 +01:00
Úprava souboru index.html 2025-02-13 08:27:51 +01:00			`&_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);`
			`}`
			`}`

			`&_clear {`
			`position: absolute;`
			`inset: 0;`
			`display: grid;`
			`place-items: center;`
			`}`
			`}`
Úprava souboru index.html 2025-01-30 04:21:55 +01:00
Úprava souboru index.html 2025-02-13 08:27:51 +01:00			`.text {`
			`margin-block: 2em;`
			`}`
			`</style>`
			`</head>`
			`<body>`
			`<div class="content">`

			`<div class="marquee">`
			`<div class="marquee_blur" aria-hidden="true">`
			`<p class="marquee_text">Lorem ipsum dolor sit amet!</p>`
			`</div>`
			`<div class="marquee_clear">`
			`<p class="marquee_text">Lorem ipsum dolor sit amet!</p>`
			`</div>`
			`</div>`
Úprava souboru index.html 2025-01-30 04:21:55 +01:00
Úprava souboru index.html 2025-02-13 08:27:51 +01:00			`<p class="text">`
			`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>`
Úprava souboru index.html 2025-01-30 04:21:55 +01:00			`</div>`
			`</body>`
			`</html>`