My goal is to be able to vertically align animated text in a div element. I have tried looking for an answer on here, but can't seem to find any. Specifically, I've tried display:table-cell, vertical-align:middle, and line-height:__, but they all give the same result.
let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0
function anims() {
let elem = document.getElementById(elemIds[currentAnimId])
let bgimg = document.getElementById('backgroundImg')
currentAnimId += 1
bgimg.style.animation="bgblur 5s";
elem.style.display = 'block'
elem.style.animation="textAnim 5s";
window.setTimeout(() => {
bgimg.style.animation="none";
elem.style.display = 'none'
elem.style.animation="none";
elem.style.webkitAnimation = 'none';
window.setTimeout(function() {
elem.style.webkitAnimation = '';
if (currentAnimId < elemIds.length) {
anims(currentAnimId)
} else {
console.log("You have reached the end of the text cycle.")
}
}, 1000);
}, 5000)
}
anims(currentAnimId)
body {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
#backgroundImg:empty {
display: block;
position: relative;
}
h1 {
position: absolute;
vertical-align: middle;
}
#backgroundImg {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-height: 100vh;
background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
/* animation: blurry 5s; */
-webkit-filter: blur(0px);
background-repeat: no-repeat;
background-size: 100% auto;
top: 0;
left: 0;
}
#backgroundImg, #textDiv {
width: 100%;
height: 100%;
position: absolute;
}
#textDiv {
left: 100px;
height: 80%;
width: 80%;
color: transparent;
-webkit-text-stroke: 1px white;
text-shadow: 10px 10px 20px black;
z-index: 10;
vertical-align: middle;
text-align: left;
}
#a, #b, #c, #d, #e {
font-size: 800%;
display: none;
}
#keyframes bgblur {
0% {
-webkit-filter: blur(0px);
}
25% {
-webkit-filter: blur(5px);
}
75%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="backgroundImg">
</div>
<div id="textDiv">
<h1 id="a">a</h1>
<h1 id="b">b</h1>
<h1 id="c">c</h1>
<h1 id="d">d</h1>
<h1 id="e">e</h1>
</div>
<script src="script.js"></script>
</body>
</html>
If anyone could help that would be great!
PS: I just want it vertically centered, not horizontally.
Thanks!
Add display: flex; align-items: center; to your textDiv. Your textDiv height is 80%, you should make it 100% if you want to center vertically on all screen
let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0
function anims() {
let elem = document.getElementById(elemIds[currentAnimId])
let bgimg = document.getElementById('backgroundImg')
currentAnimId += 1
bgimg.style.animation="bgblur 5s";
elem.style.display = 'block'
elem.style.animation="textAnim 5s";
window.setTimeout(() => {
bgimg.style.animation="none";
elem.style.display = 'none'
elem.style.animation="none";
elem.style.webkitAnimation = 'none';
window.setTimeout(function() {
elem.style.webkitAnimation = '';
if (currentAnimId < elemIds.length) {
anims(currentAnimId)
} else {
console.log("You have reached the end of the text cycle.")
}
}, 1000);
}, 5000)
}
anims(currentAnimId)
body {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
#backgroundImg:empty {
display: block;
position: relative;
}
h1 {
position: absolute;
vertical-align: middle;
}
#backgroundImg {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-height: 100vh;
background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
/* animation: blurry 5s; */
-webkit-filter: blur(0px);
background-repeat: no-repeat;
background-size: 100% auto;
top: 0;
left: 0;
}
#backgroundImg, #textDiv {
width: 100%;
height: 100%;
position: absolute;
}
#textDiv {
left: 100px;
height: 80%;
width: 80%;
color: transparent;
-webkit-text-stroke: 1px white;
text-shadow: 10px 10px 20px black;
z-index: 10;
display: flex;
align-items: center;
text-align: left;
}
#a, #b, #c, #d, #e {
font-size: 800%;
display: none;
}
#keyframes bgblur {
0% {
-webkit-filter: blur(0px);
}
25% {
-webkit-filter: blur(5px);
}
75%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="backgroundImg">
</div>
<div id="textDiv">
<h1 id="a">a</h1>
<h1 id="b">b</h1>
<h1 id="c">c</h1>
<h1 id="d">d</h1>
<h1 id="e">e</h1>
</div>
<script src="script.js"></script>
</body>
</html>
Related
I have two divs that contain poster images. I want to put another poster behind each of those and do the following:
offset it by some x and y values
overlay it with semi-transparent div to make it darker
reduce its size while maintaining aspect ratio
How can this be done within the existing grid and and without changes to the two posters in the front?
films = [
{id: 0, title: 'Welcome Home', year: 2009},
{id: 2, title: 'Aurie', year: 2001},
{id: 3, title: 'Hardship', year: 2005},
{id: 4, title: 'Forth to the past', year: 2004}]
data = {
film0: films[0],
film1: films[1],
film2: films[2],
film3: films[3]
}
function update() {
poster1 = "https://unsplash.it/458/679.jpg";
poster2 = "https://unsplash.it/458/679.jpg";
document.getElementById("name1").innerText = data.film1.title;
document.getElementById("name2").innerText = data.film2.title;
document.getElementById("year1").innerText = data.film1.year;
document.getElementById("year2").innerText = data.film2.year;
document.getElementById("poster1").setAttribute("src", poster1);
document.getElementById("poster2").setAttribute("src", poster2);
}
update();
body {
background-color: rgb(40, 40, 40);
}
div {
border: 1px solid red;
}
.container {
display: grid;
grid-template-columns: 20% 25% 8% 25% 20%;
grid-gap: 0.5%;
padding: 1%;
color: white;
font-family: sans-serif;
text-align: center;
}
.header,
.footer {
grid-column-start: 1;
grid-column-end: 6;
padding: 30px;
font-size: 50%;
}
.poster-container {
position: relative;
}
.poster {
object-fit: cover;
width: 100%;
height: 100%;
}
.title {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding-top: 7%;
padding-bottom: 7%;
line-height: 150%;
font-size: 110%;
}
.year {
font-size: 90%;
}
.poster-container:hover > .title {}
a {
all: unset;
}
a:hover{
cursor: pointer;
}
.shutdown{
background-color: rgba(255, 0, 0, 0.5);
padding: 1%;
}
.shutdown:hover{
cursor: pointer;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="header"></div>
<div></div>
<div class="poster-container">
<img class="poster" id="poster1" />
<div class="title">
<a id="poster1-link" target="_blank">
<div class="name" id="name1"></div>
</a>
<div class="year" id="year1"></div>
</div>
</div>
<div></div>
<div class="poster-container">
<img class="poster" id="poster2" />
<div class="title">
<a id="poster2-link" target="_blank">
<div class="name" id="name2"></div>
</a>
<div class="year" id="year2"></div>
</div>
</div>
<div></div>
</div>
</body>
</html>
I managed to find a solution:
films = [
{id: 0, title: 'Welcome Home', year: 2009},
{id: 2, title: 'Aurie', year: 2001},
{id: 3, title: 'Hardship', year: 2005},
{id: 4, title: 'Forth to the past', year: 2004}]
data = {
film0: films[0],
film1: films[1],
film2: films[2],
film3: films[3]
}
function update() {
poster0 = "https://unsplash.it/458/679.jpg";
poster1 = "https://unsplash.it/458/679.jpg";
poster2 = "https://unsplash.it/458/679.jpg";
document.getElementById("name1").innerText = data.film1.title;
document.getElementById("name2").innerText = data.film2.title;
document.getElementById("year1").innerText = data.film1.year;
document.getElementById("year2").innerText = data.film2.year;
document.getElementById("poster1").setAttribute("src", poster1);
document.getElementById("poster2").setAttribute("src", poster2);
document.getElementById("poster0").setAttribute("src", poster0);
document.getElementById("poster3").setAttribute("src", poster0);
}
update();
body {
background-color: rgb(40, 40, 40);
}
.container {
display: grid;
grid-template-columns: 20% 25% 8% 25% 20%;
grid-gap: 0.5%;
padding: 1%;
color: white;
font-family: sans-serif;
text-align: center;
}
.header,
.footer {
grid-column-start: 1;
grid-column-end: 6;
padding: 30px;
font-size: 50%;
}
.poster-container {
position: relative;
}
.poster {
object-fit: cover;
width: 100%;
height: 100%;
}
.title {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding-top: 7%;
padding-bottom: 7%;
line-height: 150%;
font-size: 110%;
}
.year {
font-size: 90%;
}
.remove {
background-color: rgba(255, 255, 255, 0.2);
padding: 5%;
font-size: 90%;
}
a {
all: unset;
}
a:hover {
cursor: pointer;
}
.shutdown {
background-color: rgba(255, 0, 0, 0.5);
padding: 1%;
}
.shutdown:hover {
cursor: pointer;
}
;
.poster0 {}
.double0 {
position: relative;
}
.double3 {
position: relative;
}
.poster0 {
position: absolute;
left: -50%;
top: -10%;
z-index: -1;
width: 80%;
height: 80%;
}
.poster3 {
position: absolute;
right: -50%;
top: -10%;
z-index: -1;
width: 80%;
height: 80%;
}
.overlay0 {
position: absolute;
left: -50%;
top: -10%;
z-index: 0;
width: 80%;
height: 80%;
background-color: rgba(0, 0, 0, 0.5);
}
.overlay3 {
position: absolute;
right: -50%;
top: -10%;
z-index: 0;
width: 80%;
height: 80%;
background-color: rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="header"></div>
<div></div>
<div class="double0">
<div class="overlay0"></div>
<img class="poster poster0" id="poster0" />
<div class="poster-container">
<img class="poster" id="poster1" />
<div class="title">
<a id="poster1-link" target="_blank">
<div class="name" id="name1"></div>
</a>
<div class="year" id="year1"></div>
</div>
</div>
</div>
<div></div>
<div class="double3">
<div class="overlay3"></div>
<img class="poster poster3" id="poster3" />
<div class="poster-container">
<img class="poster" id="poster2" />
<div class="title">
<a id="poster2-link" target="_blank">
<div class="name" id="name2"></div>
</a>
<div class="year" id="year2"></div>
</div>
</div>
</div>
<div></div>
</div>
</body>
</html>
I am trying to embed a previous and next button onto the image such that both buttons resize and stay on the image when resized. But the problem is the buttons don't stay on the image and resize in a way that isn't consistent with what I want. I also want my image to be on the right side of the screen and text on the left side instead of on the center.
I thought if I had put the button in a div that is the child of the div my photos were in, the buttons would automatically be embedded onto the photo but that didn't work. I also set my parent container to relative and child container to absolute thinking that would work.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.photos {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -200px;
color: aqua;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
color: aqua;
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.btn-responsive {
/* matches 'btn-md' */
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#media (max-width:760px) {
/* matches 'btn-xs' */
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<link rel="stylesheet" href="./styles/test.css">
</head>
<body>
<div class="center">
<div class="photos">
<img class="mySlides fade" src="photos/quote1.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote2.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote3.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote4.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote5.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote6.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/photo8.png" style="width:95.7%" />
<div class="img-overlay btn-responsive">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
Set the <img>s to expand edge to edge of it's container .photos and keep aspect ratio as well by changing img ruleset:
img {
object-fit: contain;
width: 100%;
}
Also, remove margin-top: -200px from .next, .prev
I didn't see any text in OP code and didn't quite understand exactly what you wanted with text.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.querySelectorAll(".slides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.slides {
display: none
}
img {
object-fit: contain;
width: 100%;
}
.photos {
max-width: 1000px;
position: relative;
margin: auto;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
color: aqua;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
user-select: none;
}
.prev {
left: 0;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.btn-responsive {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#media (max-width:760px) {
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
.active,
.dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<link rel="stylesheet" href="./styles/test.css">
</head>
<body>
<div class="center">
<div class="photos">
<img class="slides fade" src="https://www.pcgamesn.com/wp-content/uploads/2022/05/v-rising-castle-heart-decay-900x506.jpg" />
<img class="slides fade" src="https://www.pcgamesn.com/wp-content/uploads/2022/05/jurassic-world-evolution-2-dominion-dlc-900x506.jpg" />
<img class="slides fade" src="https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans//41627993/0bc70a88bed9dad1ba5898beb33c72476c2ccc10.jpg" />
<img class="slides fade" src="https://www.pcgamesn.com/wp-content/uploads/2022/05/lost-ark-character-creation-900x506.jpg" />
<img class="slides fade" src="https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans//9164327/b4569cd9085bd5d186c30877bc1251f03fc6e06a.jpg" />
<div class="img-overlay btn-responsive">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
iceiscold! Welcome to Stack Overflow.
I don't know if you have a specific reason for your widths, but setting the images to 100% width and set object-fit: contain should solve your resizing issues. If you need them smaller, you can control that by setting the photo container size, or creating a custom container for the <img>.
As for the layout question, to have a text and an image side by side, I recommend you to use display: flex. Flex is a nice CSS property for handling layouts. Another option would be to use display: grid, which is another way to handle layouts (see Grid). For your case, I think flex is a bit more straightforward.
Basically what you need:
.parent{
display: flex;
}
.child1, child2{
flex: 1;
}
.parent will create a column layout, and with flex:1 you are telling the flex property that both child1 and child2 should have the same width. You can play with that by setting flex: 0.25, etc. I used this on your code to create a description column and a photo column.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
.center {
display: flex;
border: 1px solid black;
}
.descriptions {
flex: .75;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.mySlides {
display: none
}
img {
object-fit: contain;
vertical-align: middle;
width: 100%;
}
.photos {
flex: 1;
max-width: 1000px;
position: relative;
margin: auto;
border: 1px solid blue;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
color: aqua;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
user-select: none;
}
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.active,
.dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
<div class="center">
<div class="descriptions">
<p>I am a test description</p>
</div>
<div class="photos">
<img class="mySlides fade" src="https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png" />
<img class="mySlides fade" src="https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg" />
<img class="mySlides fade" src="https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png" />
<div>
<a class="prev" onClick="plusSlides(-1)">❮</a>
<a class="next" onClick="plusSlides(1)">❯</a>
</div>
</div>
</div>
Return to post
sorry for the poor question title this is one that is difficult to phrase.
I was wondering how one would go about creating an animation like this:
Something that I did notice about this was there was another container to the right of the navbar that seemed to handle the navigation.
Any help or information would be much appreciated, thanks!
CodePen
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<navbar>
<div class="nav-ico">
<center>
<div class="ico-bar"></div>
<div class="ico-bar"></div>
<div class="ico-bar"></div>
</center>
</div>
<div class="navbar">
<div class="nav-bt">
work
</div>
<div class="nav-bt">
about
</div>
<div class="nav-bt">
pricing
</div>
</div>
</navbar>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
}
.navbar{
background-color: lightgray;
width: 10%;
height: 100vh;
padding: 5px;
font-size: 1.5em;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.nav-ico{
padding: 5px;
background-color: lightgray;
width: 10%; /* i know its not the best way ^^ */
}
.ico-bar{
width: 50px;
height: 5px;
background-color: black;
margin: 5px;
border-radius: 30%;
}
.nav-bt:hover{
transform: rotate(90deg);
}
JS
I think I might get what you want to achieve:
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
.App {
font-family: sans-serif;
text-align: center;
width: 100%;
min-height: 100vh;
}
nav.sidebar {
width: 70px;
height: 100vh;
/* border: solid 1px red;*/
position: absolute;
top: 0;
left: 0;
background: lightgray;
}
nav > a {
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(90deg);
margin: 0 0 10px 0;
transition: 300ms ease transform;
cursor: pointer;
text-decoration: none;
font-weight: 600;
color: black;
z-index: 4;
position: relative;
}
nav > a:hover {
transform: rotate(0deg);
}
nav > a:hover ~ div#piece {
width: 50px;
border-radius: 0% 100% 100% 0% / 0% 50% 50% 100%;
left: 40px;
}
nav.sidebar > div#piece {
width: 30px;
height: 100px;
position: absolute;
left: 50px;
border-radius: 0% 50% 50% 0% / 0% 50% 50% 100%;
pointer-events: none;
transition: 150ms ease width;
transition: 150ms ease border-radius;
transition: 150ms ease left;
background: lightgray;
z-index: 1;
}
import { useState, useRef, useEffect } from "react";
import "./styles.css";
export default function App() {
const navRef = useRef(null);
const [y, setY] = useState();
const [show, setShow] = useState(false);
useEffect(() => {
const handleMouseMove = (e) => setY(e.pageY);
document.addEventListener("mousemove", handleMouseMove);
return () => {
document.removeEventListener("mousemove", handleMouseMove);
};
}, [navRef]);
return (
<div className="App">
<nav
ref={navRef}
className="sidebar"
onMouseOver={() => setShow(true)}
onMouseOut={() => setShow(false)}
>
<br />
<br />
work
<br />
<br />
about
<br />
<br />
pricing
{show && <div id="piece" style={{ top: y - 50 }} />}
</nav>
<pre>y: {y}</pre>
<pre>show: {`${show}`}</pre>
</div>
);
There is also a codepen for this Codepen
Interesting we can open a codepen and progressively go to the solution , it's difficult to answer without some code to go on ...
what about just begin by reproduce the html and css part to begin ?
for the part that i understand :
body{
margin: 0;
padding: 0;
}
.navbar{
background-color: lightgray;
width: 10%;
height: 100vh;
padding: 5px;
font-size: 1.5em;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.nav-ico{
padding: 10px;
background-color: lightgray;
width: 8.8%; /* i know its not the best way ^^ */
}
.ico-bar{
width: 50px;
height: 5px;
background-color: black;
margin: 5px;
border-radius: 30%;
}
.nav-bt:hover{
transform: rotate(90deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<navbar>
<div class="nav-ico">
<div class="ico-bar"></div>
<div class="ico-bar"></div>
<div class="ico-bar"></div>
</div>
<div class="navbar">
<div class="nav-bt">
work
</div>
<div class="nav-bt">
about
</div>
<div class="nav-bt">
pricing
</div>
</div>
</navbar>
</body>
</html>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I am making an animated wave loading page, and I wanted to switch my current loader with a loading bar, but my loading bar seems to stick at the top I cant put it in the middle of the screen, where the current loader is, I have tried using the centered class that the current loader has and when I use that class the loading bar disapears, how could I do it?
<title>Loading...</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,400;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
</head>
<script>
var i = 0;
var txt = '...';
var speed = 250;
function letterbyletter() {
if (i < txt.length) {
document.getElementById("lbl").innerHTML += txt.charAt(i);
i++;
setTimeout(letterbyletter, speed);
}
}
var o = 0;
function move() {
if (o == 0) {
o = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
o = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
</script>
<body onload="letterbyletter(); move()">
<div class="waveWrapper waveAnimation">
<div id="myProgress">
<div id="myBar"></div>
</div>
<div class="centered"><div class="loader"></div></div>
<div class="centered" style="padding-top: 10%"><h4>A carregar as suas mensagens</h4><h4 id="lbl"></h4></div>
<div class="waveWrapperInner bgMiddle">
<div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
</div>
<div class="waveWrapperInner bgBottom">
<div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
</div>
</div>
</body>
body{
background-color: #076585;
font-family: 'Lato', sans-serif !important;
}
.loader {
border: 8px solid #fff;
border-radius: 80%;
border-top: 8px solid #076585;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#myProgress {
width: 100%;
background-color: #fff;
}
#myBar {
width: 1%;
height: 5px;
background-color: #000000;
}
h4{
position: relative;
display: inline-block;
font-weight: 2000;
font-size: 15px;
}
.centered{
position: fixed;
top: 50%;
left: 50%;
z-index: 20;
transform: translate(-50%, -50%);
}
.waveWrapper {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
background: linear-gradient(0deg, hsla(195, 90%, 27%, 1) 0%, hsla(0, 0%, 100%, 1) 100%, hsla(0, 0%, 100%, 1) 100%);
}
.bgMiddle {
z-index: 10;
opacity: 0.75;
}
.bgBottom {
z-index: 5;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.waveMiddle {
background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
}
.waveBottom {
background-size: 50% 100px;
}
.waveAnimation .waveBottom {
animation: move_wave 15s linear infinite;
}
Your class centered works for me. You can add it into your div #myProgress but you have to add margin auto to center your bar inside that div. This works when you need to center a display block element inside another display block element.
<div id="myProgress" class="centered">
<div id="myBar"></div>
</div>
#myBar {
width: 10%;
height: 5px;
background-color: #000000;
margin: 0 auto;
}
When the user clicks a link I want to create a 'popup' dialog box centered in the browser window with a grey overly similar to this:
Note that the user can click anywhere outside the dialog box to dismiss it.
I've tried following this example, but it just creates a black stripe in a white page like this:
Here is my code:
function blah() {
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
}
#OVER {
width:100%;
height:100%;
left:0;/*IE*/
top:0;
text-align:center;
z-index:5;
position:fixed;
background-color:#fff;
}
.overlay {
width:100%;
z-index:6;
left:0;/*IE*/
top:30%;
font-color:#cdcdcd;
font-size:0.8em;
text-align:center;
position:fixed;
background-color:#000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<h1>This is the title</h1>
Here is some text Click me
</body>
</html>
This should work:
// JS, replace this
gab.innerHTML='<div class="overlay"><div class="dialog"><h1>hello</h1></div></div>';
// CSS
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4); // 0.4 is the opacity;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.dialog {
background-color: #fff;
}
the code I edited from yours
function blah() {
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML = '<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
}
#OVER {
width: 100%;
height: 100%;
left: 0;
/*IE*/
top: 0;
text-align: center;
z-index: 5;
position: fixed;
background-color: rgba(0,0,0,0.3);
}
.overlay {
width: 100%;
z-index: 6;
left: 0;
/*IE*/
top: 30%;
/* font-color: #cdcdcd; */
color: #cdcdcd;
font-size: 0.8em;
text-align: center;
position: fixed;
background-color: #fff
}
<h1>This is the title</h1>
Here is some text Click me
But, If I were you, I am trying to make the modal like this
I just added toggle.
It is NOT the best code to make modal.
It is just for reference.
function modalOn() {
let gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.setAttribute('onClick', 'modalOff()');
gab.innerHTML = '<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
}
function modalOff() {
let modal = document.getElementById('OVER');
document.body.removeChild(modal);
}
#OVER {
width: 100%;
height: 100%;
left: 0;
/*IE*/
top: 0;
text-align: center;
z-index: 5;
position: fixed;
background-color: rgba(0,0,0,0.3);
}
.overlay {
width: 100%;
z-index: 6;
left: 0;
/*IE*/
top: 30%;
color: #cdcdcd;
font-size: 0.8em;
text-align: center;
position: fixed;
background-color: #000;
}
<h1>This is the title</h1>
Here is some text Click me
Thanks to fmontes I ended up with this code which seems to work:
// css:
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4); // 0.4 is the opacity;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.dialog {
background-color: #fff;
}
// html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<h1>This is the title</h1>
Here is some text Click me
<div id='overlay' class="overlay" onclick="document.getElementById('overlay').style.visibility = 'hidden';return false;" style="visibility:hidden">
<div class="dialog"><h1>hello</h1></div></div>
</body>
</html>