I'm currently working on a website where I want the text to be centered on the page without scrolling. Although I have the container div centered, I'm struggling to align the text properly. It's crucial that h1 has a position: fixed because I plan to include animations. You can view what I've done previously here. Please watch the video for a better understanding of my goals.
However, since it wasn't responsive, I decided to make some changes. You can check out the updated code on jsFiddle.
If there are alternative methods to achieve the animations without using h1{position:fixed}, I would appreciate any suggestions.
P.S. I attempted to use <span> and JavaScript/jQuery for the effect but was dissatisfied with the outcome.
Thank you!
If you look at the code, you'll notice two h1 tags. Upon loading the page, I want the content of the first h1 tag to fade in and then fade out after a 2-second delay (using animate.css). Not setting position:fixed on the h1 tags results in them stacking on top of each other, which I want to avoid.
You can refer to the jsFiddle link above, where I've implemented the animations.
body {
overflow: hidden
}
.content {
height: 50vh;
width: 80%;
color: #ff7100;
width: 80%;
margin: 0 auto;
text-align: center;
}
h1 {
position:fixed;
/* Uncomment this line to see how it affects the animation (not desired effect) */
opacity: 0
}
.main .content h1 {
animation: fadeInDown, fadeOutDown;
animation-duration: 1s, 1.5s;
animation-timing-function: linear;
animation-fill-mode: forwards, forwards;
animation-timing-function: ease-in, linear;
}
.main .content h1:nth-child(1) {
-webkit-animation-delay: 2s, 4s;
animation-delay: 2s, 4s;
}
.main .content h1:nth-child(2) {
-webkit-animation-delay: 4.5s, 6s;
animation-delay: 4.5s, 6;
}
.main .content h1:nth-child(3) {
-webkit-animation-delay: 15.5s, 18s;
animation-delay: 15.5s, 18s;
}
.main .content h1:nth-child(4) {
animation: fadeInDown;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
-webkit-animation-delay: 18.5s;
animation-delay: 18.5s;
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
@keyframes fadeOutDown {
from {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}<div class="container-fluid main" style="border:10px solid red;">
<p> I need the 'Websites' and 'Development' in the center of the column. At the moment .text-center doesn't work
<div style="border:10px solid purple;width:80%;margin:15% auto ">
<div class="content row">
<div class="col text-center" style="border:10px solid black;">
<h1>Websites</h1>
<h1>Development</h1>
</div>
</div>
</div>
</div>The primary issue I'm facing is that I can't seem to center the h1 within the column effectively.