I am using particles.js to set a full screen particle effect, I specified I wanted this animation full-screen by using height: 100vh; this has worked perfectly and has fulfilled what I wanted to achieve. I then tried to add text on top of my particle animation and then proceed to vertically center it using line-height: 100vh;. Although when doing this my animation stops and turns to a pure grey background and my text is centered? I want my animation to continue running with the text on top of it (being centered), I am unsure what to do to stop my text messing my animation. I have included a video below of what is happening.
Video (Streamable)
HTML
<div id="particles-js">
<div id="main-text">Center Me</div>
</div>
<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/particles.js#2.0.0/particles.js"></script>
<script>
particlesJS.load('particles-js' , 'particles.json', function(){console.log('particles.json loaded...')})
</script>
<!--End Of Scripts-->
CSS
*{
padding: 0;
margin: 0;
}
body{
font-family: sans-serif;
overflow: hidden;
}
#particles-js{
background:#4a4a4a;
height: 100vh;
}
#main-text{
text-align: center;
/* line-height: 100vh; */
}
Please try to change the way you're centering the text to this :
#main-text{
/*text-align: center;*/
/* line-height: 100vh; */
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
I believe this is because the line-height is covering the entire viewport, even if the font is still small ( I can't say for sure this is the case, it's just an assumption )
Related
I am trying to make a Curtain Effect. I want the curtain image to go upward and reveal the text and image below. once it's completely hidden then it scrolls to the next page. This is something that I have made https://jsfiddle.net/poezny2a/3/ but it's not perfect as you can see the curtain from above has less opacity. Any Jquery or javascript code would work. Thanks a lot :)
:root {
--minh: 98vh;
--color1: wheat;
--color2: midnightblue;
}
.bg {
/** create the "split" background **/
background-image: url('https://taschenoper.pocketoperator.de/wordpress/wp-content/uploads/2022/06/curtains.png');
background-repeat:no-repeat;
position:absolute;
width:100%;
height:100%;
background-size:cover;
}
/** add extra space to the bottom (need this for the "sticky" effect) **/
.curtain::after {
content: "";
display: block;
min-height: var(--minh);
}
img{
max-width:100%;
}
h2{
position:absolute;
}
.invert {
/** make the content sticky **/
position: sticky;
top: 20px;
/** blend the content with the contrast effect **/
mix-blend-mode: color-burn;
/** center the content **/
display: flex;
align-items: center;
justify-content: center;
/** set the minimum height of the section **/
min-height: var(--minh);
}
<div class="curtain">
<div class="bg">
</div>
<div class="invert">
<img src="https://taschenoper.pocketoperator.de/wordpress/wp-content/uploads/2022/06/image.jpg">
<h2>
Hello world
</h2>
</div>
</div>
I am looking to create a website in which it has a main div in which both the width and the height is always the size of the screen. No matter what is contained within this div it must contain this width and height.
If you look at this example of what I want.
My aim is for the navigation section to be contained in the large blue part on the left and for the main page content to be displayed within the white box and for this white div to only scroll sideways. I have searched for days on trying to get this to work but something always goes wrong. Examples of things I have tried are:
How to make the main content div fill height of screen with css
how to make a full screen div, and prevent size to be changed by content?
How to make a div to fill a remaining horizontal space?
If somebody can help with this or at least point me in the right direction for guidance it would be awesome. Thanks in advance.
1. Using CSS3 flexbox
/*QuickReset*/ *{margin:0; box-sizing:border-box;} html,body{height:100%;}
/*
OP: -I am looking to create a website in which it has a
main div in which both the width and the height is
always the size of the screen
A: -let this be body!
*/
body{
background: #0ae;
display: flex;
flex-flow: row nowrap;
padding: 40px;
}
/*
OP: -My aim is for the navigation section to be
contained in the large blue part on the left
A: -Thanks to CSS3 flexbox on body all you need is a desired menu width:
*/
aside{
width: 140px; /* or any size you want, px, %, ... */
}
/*
OP: -and for the main page content to be displayed within
the white box and for this white div to only scroll sideways
A: -add overflow:auto; to make it scroll and flex:1 to grow to available size
*/
article{
background: #fff;
overflow: auto; /* make element scrollable */
flex: 1; /* let the browser grow this element */
}
/* just to demonstrate sideways scroll */
article{
display: flex;
flex-flow: row nowrap;
}
section{
min-width:100%;
}
<aside>
Menu
</aside>
<article>
<section>"and I want this CONTENT area to scroll sideways"</section>
<section style="background: #eee;">YEY</section>
</article>
2. The old-school way (compatible down to IE8)
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;}
body{ /* your app */
padding:40px;
background: #0ae;
}
#aside{ /* your menu */
float:left;
width: 100px;
}
#content{ /* white content area */
overflow: auto;
margin-left: 100px; /* menu is 100px remember? */
height:100%;
background: #fff;
}
/* Just to test horizontal scrollability */
#content{
white-space:nowrap;
}
.page{
white-space: normal;
display: inline-block;
vertical-align: top;
width: 100%;
height:100%;
margin-right: -4px;
/* Todo: make scroll vertically each page if needed */
}
<div id="aside">
Menu
</div>
<div id="content">
<div class="page">Content A</div>
<div class="page" style="background:#eee;">Content B</div>
</div>
after setting the main div css overflow properties the way you like them,
you can always javascript it (as in the given example)- and it will be fully backward compatible.
<div id=[mainDivID]>
<script>
[maindDivID].style.width = screen.width +"px";
[maindDivID].style.height = screen.height +"px";
</script>
<!-- main div content -->
</div>
What I'm trying to do it have my picture as a button and I've been using the 'input type"image"' for it and it's been going fine and dandy until I tried changing the height of my picture, width is all cool to change but height.. Nuhu.
Here's the code.
<html>
<head>
<style type="text/css">
.startavisningstop
{
display: block;
margin-top: 0px;
background: url("https://imagizer.imageshack.us/v2/102x24q90/822/kac9.png") no-repeat center center;
width: 102px;
height: 24px;
}
</style>
</head>
<body>
<input type="image" value=" " class="startavisningstop" onclick="location.href='latest_inlog_include.php?action=stoppa'">
</body>
</html>
I'm not using the green picture as a background on my site but I'm on a computer that doesn't allow uploads so hence why I'm using the green picture in the example.
I'm using a picture that's got the dimensions 102px width and 24px height.
As you can see, I can freely change the width but when I add a height line it gives me a transparent broken image picture on top of my own picture.
P.S. If anyone knows any better way to do this I'm all good with some tips, seeing as it doesn't look very appealing right now.
Just use a button instead of your input tag:
<button class="startavisningstop" onclick="location.href='latest_inlog_include.php?action=stoppa'"></button>
.startavisningstop {
display: block;
margin-top: 0px;
background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Auto_Racing_Green.svg/800px-Auto_Racing_Green.svg.png") no-repeat center center;
width: 102px;
height: 24px;
border:0;
}
I have a div , something like this
#footer
{ position:fixed;
left:40px;
top:0px;
}
The position is fixed when I scroll vertically or horizontally. But i want the div to be fixed when user scrolls the scroll bar vertically but should be varying when user scrolls the scroll-bar horizontally.
I have seen some of the forums and posts but mostly I found jquery script.I want to know if there is a way to do it in CSS?
Fixed position in only one direction
I read this post but I did not understand the jquery script. Kindly let me know the way to do it in css or the better way to do it with jquery.Thanks
Seems to be impossible to get this "look fine" with only CSS/HTML.
As mentioned from Ruup or Fixed position in only one direction, layering over JS for it, is a good option.
Fortunately, i found a way to get it work somehow (not that beautiful):
http://jsfiddle.net/MKEbW/5/
HTML (inside the body-tag):
<div id="simulated-html">
<div id="footer">
<span>
<!-- Footer text here -->
</span>
</div>
<div id="simulated-body">
<!-- Your website here -->
</div>
</div>
CSS:
* { margin:0; padding:0; }
html {
font: 12px/1.5em Georgia;
}
p { padding: 5px; }
html, body {
height: 100%;
overflow: hidden; /* hide scrollbars, we create our own */
}
#simulated-html {
background: orange;
overflow-x: scroll; /* force horizontal scrollbars (optional) */
overflow-y: hidden; /* hide. we use the #simulated-body for it. */
position: relative; /* to align #footer on #simulated-html */
height: 100%;
}
#simulated-body {
overflow-y: scroll; /* force vertical scrollbars (optional) */
overflow-x: hidden; /* hide. we use the #simulated-html for it. */
height: 100%;
background: #eee;
/* use as a container */
width: 450px;
margin: 0 auto;
}
#footer {
position: absolute;
bottom: 0px; /* vertical align it to #simulated-html */
width: 100%;
background: red;
z-index: 99; /* always show footer */
color: white;
}
#footer span {
width: 450px;
margin: 0 auto;
background: green;
display: block;
}
Seems to work in IE7+ and modern browsers, tested via browserlab.adobe.com.
Tested with scrollbars, smaller and wider viewports in Chrome 18.
I recommend a fallback for not capable browsers and/or a JS workaround.
The linked post is exactly what you need. You can copy the exact script.
$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});
The div css is like this (probably not footer when it has top 0px :P but ok)
#footer
{ position:fixed;
left:40px;
top:0px;
}
When you scroll the jquery script just adjusts the left(x) coordinate to the same value as the scrollLeft of the window.
There is a small fix on the previous code.
The changed javascript code for moving fixed div horizontally
$(window).scroll(function(){
$('#footer').css('left',-$(window).scrollLeft());
});
how should the horizontal axis vary? the way this code is currently it would stay 40px from the left at all times. in order to make the left margin change position relative to the size of the window you must use percentages and negative margins. for instance, to center a fixed div:
#centered {
height: 350px;
top: 0;
position: fixed;
width: 1024px;
left: 50%;
margin-left: -512px;
z-index: 9999;
}
notice that your negative margin must be HALF the width of your div. if you want it 40px to the left of center then you would add another 40px to margin-left.
Is there any way to allign a button to the center of the DIV.I was able to make it work with different strategies using a padding-top:2px and padding-bottom:2px or with using a margin-top and margin-bottom.But here comes the problem,basically it is a moving DIV i.e it might differ if the user have more inforamtion in it.For example user enters only work number in the input text field it will be showing up only the only work phone number.But if the user enters work,home and additional number,it need to show all the information entered,which will vary the size of the DIV.What happens is the div will increase in size and button still stays at the top of the div.Is there any way to make the button fixed at the center even after the DIV varies in size.Can it be achieved in CSS or we need to used javascript to make it work.
Vertical align is always tricky.
However where is a demo of moving centered button with CSS and moved with jQuery.
As it moves, the button remains at center as the position has not been defined.
#outer {
text-align: center;
width: 200px;
background: #ddd;
height: 200px;
position: static;
display: table;
}
#inner {
line-height: 200px;
display: table-cell;
vetical-align: middle;
}
I think it can be done with pure css, is this what you are looking for?
<html>
<head>
<style type="text/css">
.wrapper {
position: relative;
width: 300px;
height: 200px;
background: #eeeeee;
}
.button {
position: absolute;
top: 41%;
left: 33%;
}
</style>
</head>
<body>
<div class="wrapper">
<input class="button" type="button" value="Button" />
</div>
</body>
</html>