The red element is disappearing while scrolling and I don't know what to do.
I am trying to do a custom scroll by element linked to parts of body.I don't know why this is happening. How do I fix it?
html{
margin: 0;
padding: 0;
height: 400%;
}
> This part of the code is working on a moving background stars
#keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-webkit-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-moz-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-ms-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
::-webkit-scrollbar {
display:none;
}
.stars, .twinkling, .clouds {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:400vh;
display:block;
}
.stars {
background:#000 url(stars-bg.png) repeat top center;
z-index:0;
}
.twinkling{
background:transparent url(twinkling-bg.png) repeat top center;
z-index:1;
-moz-animation:move-twink-back 600s linear infinite;
-ms-animation:move-twink-back 900s linear infinite;
-o-animation:move-twink-back 900s linear infinite;
-webkit-animation:move-twink-back 900s linear infinite;
animation:move-twink-back 900s linear infinite;
}
**code of far right element**
.cont{
height: 50%;
width: 96.5%;
float: left;
}
.conm{
height: 50%;
width: 3.5%;
float: left;
background-color: #0a0a0a;
top: 0;
position: sticky;
}
.point-tb{
height: 10px;
width: 10px;
border-radius: 100%;
border: 6.5px solid #f00;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50%;
}
.scroll-1{
height: 100px;
width: 8px;
background-color: #f00;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -5%;
}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/b5945c3b13.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="stars"></div>
<div class="twinkling">
<div class="cont"></div>
<div class="conm">
<div class="point-tb"></div>
<div class="scroll-1"></div>
</div>
</div>
</div>
</body>
</html>
The red element is scrolling because of the following CSS properties.
html{
margin: 0;
padding: 0;
height: 400%; /* This Here */
}
.stars, .twinkling, .clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 400vh; /* and this here */
display: block;
}
Setting the html element to beyond 100% height is considered bad practice. Remove the height attribute from each and this will fix your problem.
html{
margin: 0;
padding: 0;
}
.stars, .twinkling, .clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: block;
}
Why is this happening? Most browsers by default will enable user scrolling whenever the HTML document extends passed 100% of the height or 100% the width. Since you are setting the html element and .stars, .twinkling, and .clouds to have a height value beyond 100%, the user can scroll down. When the user scrolls down the red element is moved up. The red element never moves, the page does.
If you attempting to create a custom slider I would wrap everything in a div, like this:
<div class="container">
<div class="scrollbar">
<!-- Scroll bar style elements. -->
</div>
<div class="content">
<!-- Content to be scrolled. -->
</div>
</div>
Then set the .content class to have a height property of beyond 100%. Then you can use JavaScript to animate your scrollbar element based on content scrolling offset. This method will require JavaScript and use of the position: fixed; or position: absolute; CSS property. This essentially will attach the element to a particular area on the screen and prevent it from moving unless you tell it to. You will also need to use overflow: hidden; to disable the browsers auto scroll functionality for the content element. You can read more about the position property and overflow property here by w3schools: https://www.w3schools.com/cssref/pr_class_position.asp,
https://www.w3schools.com/cssref/pr_pos_overflow.asp
--
Alternatively, if you main goal is just to style a custom scrollbar, look into ::scrollbar pseudo selector. You can read more about this here: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
--
In addition to the element, use /* Comment Here */ to insert CSS comments. Use <!-- Comment Here --> to insert HTML comments. I believe this was added after copying and pasting into stack overflow, but not using comments correctly can cause rendering issues.
Try to use position:fixed in you css.
Related
How can I animate this div element so it starts at the top and ends at the bottom and then disappears something like a shooting star effect?
Currently, this code is going from top to bottom but it returns from bottom to top(I do not want this effect), I will like to start always from top all the way to the bottom, any suggestion?
css
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: relative;
animation: animateDiv 1s infinite;
}
#keyframes animateDiv {
0% {bottom: 0px; top: 50px; }
}
html
<!DOCTYPE html>
<html>
<head>
<body>
<div>
<div class="St"></div>
</div>
</body>
</html>
You should probably use animation-fill-mode:forwards which will end at the last frame. But you also need to better define your keyframes (add 100%), and finally it suits your case better to use position:fixed instead of relative.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: fixed;
animation: animateDiv 1s forwards;
}
#keyframes animateDiv {
0% {top:0;}
100%{top:100%}
}
<div>
<div class="St"></div>
</div>
Creating a fixed marquee block at bottom of screen. However, once object becomes fixed, the background color (#ffffff) dissapears. I've tried adding it to several different places with no luck. What am I missing here?
See the site in action here:
http://www.rauques.com/
This section is for global (allows fixed item to override wordpress theme).
/* This is what makes our section fixed */
.fixed-section {
position: fixed !important;
left: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
mix-blend-mode: multiply;
display: block;
}
/* This makes our fixed elements clickable */
.fixed-section .column-content {
pointer-events: auto !important;
}
The following is the HTML/CSS for fixed marquee:
<html>
<head>
<style>
.marquee {
height: 40px;
width: 100% ;
display: block;
background-color: #ffffff !important;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 50px;
background-color: #ffffff !important;
position: absolute;
overflow: hidden;
animation: marquee 8s linear infinite;
display: block;
}
.marquee span {
float: left;
width: 50%;
color: #000000;
background-color: #ffffff !important;
}
hr.style1 {
display: block;
margin-top: 0em;
margin-bottom: 0em;
}
hr.style2 {
display: block;
margin-top: 10px;
margin-bottom: 0em;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
</style>
</head>
<body>
<hr class="style1">
<div class="marquee">
<div>
<span><H4>Faire un don à l'Accueil Bonneau</H4></span>
<span><H4>Faire un don à l'Accueil Bonneau</H4></span><br>
</div>
</div>
<hr class="style2">
</body>
</html>
The problem is caused by the property mix-blend-mode: multiply; on the .fixed-section class, change it to normal.
Hey Anjela If I got your issue right, this issue is located a bit above your current markup, on the section tag for the fixed element, the property mix-blend-mode is what is causing the issue.
You can read more about the property here so you can understand better how it works and why it easily to make it conflict with other properties if not applied correctly or if you are not careful to take into account the inheritance of the CSS cascade.
Let me know if this help you, good luck!
I'm just started to web programming, cuz many cooooool pages on awwwards.com - definitely caught my mind.
anyway, the first page what i aim for make is the pinterest (www.pinterest.com); slowly moving background with blur effect, floating modal and bottom fixed footer.
with some kinda O'Reilly books, the blur, modal and footer are no more problem. but i couldn't made the background even with them yet.
so, how can i make horizontally infinite flowing background with only CSS??? (without JS)
*conditions
the page is responsive, background-image's height should fit to screen
width follow the height's size, as original image's ratio.
and here's my code.
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
overflow: hidden;
}
#animatedBackground {
position: absolute;
height: 100%;
width: 100%;
background: url("http://placehold.it/1600x800");
background-repeat: repeat;
background-position: 0 0;
background-size: auto 100%;
border: 1px solid red;
animation: animatedBackground 5s linear infinite;
}
#keyframes animatedBackground {
from {
left: -50%;
}
to {
left: 50%;
}
}
</style>
</head>
<body>
<div id="animatedBackground">animatedBackground</div>
</body>
thx.
This should fit your slowly moving+infinite flowing+responsively fit to height background criteria.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#animatedBackground {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg");
background-repeat: repeat;
background-position: 0 0;
background-size: auto 100%;
/*adjust s value for speed*/
animation: animatedBackground 500s linear infinite;
}
#keyframes animatedBackground {
from {
background-position: 0 0;
}
/*use negative width if you want it to flow right to left else and positive for left to right*/
to {
background-position: -10000px 0;
}
}
<div id="animatedBackground">
</div>
You can use background-attachment:scroll and use keyframes to perform the animation. See my approach here:
CSS
html,body
{
background:url("http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg");
background-repeat:repeat;
background-attachment: scroll;
position:absolute;
left:0;
top:0;
animation: slideshow 10s linear infinite;
}
#keyframes slideshow
{
0% {top:0;}
100% {top:-200%;}
}
See here: jsfiddle
Try This.
<html>
<head>
<style type="text/css">
#animatedBackground {
position: absolute;
height: 100%;
width: 100%;
background: url("http://placehold.it/1600x800");
animation:5s scroll infinite linear;
border: 1px solid red;
}
#keyframes scroll{
100%{
background-position:-3000px 0px;
}
}
</style>
</head>
<body>
<div id="animatedBackground" style="text-align:center;">animatedBackground</div>
</body>
</html>
I have 2 divs positioned horizontally next to each other inside a container. I want each div to expand width on hover to the full width of the container.
The problem is that after the transition when the pointer is no longer hovering the left div (which is first in the html flow) is overlapped under the right div.
Here's an example.
To recreate just place the pointer on the left div until the transition is finished, then take the pointer off the div.
The desired effect is that the width will decrease gradually (just like the right div).
* { margin: 0; padding: 0; }
#wrap { position: relative; width: 500px; margin: 0 auto; }
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; }
#one { width: 300px; background: #49d7b0; }
#two { right: 0; width: 200px; background: #d8c800; }
#one:hover, #two:hover { width: 500px; z-index: 1; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="z-index.css">
</head>
<body>
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
animation can do the trick here. Actually z-index cause the issue here. You can solve following way.
* { margin: 0; padding: 0; }
#wrap { position: relative; width: 500px; margin: 0 auto; }
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; }
#one { width: 300px; background: #49d7b0; animation: movedec 1s; }
#two { right: 0; width: 200px; background: #d8c800; }
#one:hover { animation: moveinc 1s forwards; -webkit-animation: moveinc 1s forwards; }
#two:hover { width: 500px; }
#keyframes moveinc {
from {width: 300px; z-index: 1;}
to {width: 500px; z-index: 1;}
}
#keyframes movedec {
from {width: 500px; z-index: 1;}
to {width: 300px; z-index: 1;}
}
#-webkit-keyframes moveinc {
from {width: 300px; z-index: 1;}
to {width: 500px; z-index: 1;}
}
#-webkit-keyframes movedec {
from {width: 500px; z-index: 1;}
to {width: 300px; z-index: 1;}
}
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
Set the z-index with more difference between the un-hovered and the hovered state (for instance, go from 1 to 10).
Add transition on the z-index also ... But only when going back to the default state.
This way, when you change the hover from one element to the other, the newly hovered element will have immediately the high z-index, while the un-hovered is slowly dreasing it. And the newly hovered element will be in front.
Demo: (with the key styles in first place)
#one:hover,
#two:hover {
width: 500px;
z-index: 10;
transition: width 1s ease-out, z-index 0s linear;
}
#one,
#two {
z-index: 1;
transition: width 1s ease-out, z-index 1s linear;
}
* {
margin: 0;
padding: 0;
}
#wrap {
position: relative;
width: 500px;
margin: 0 auto;
}
#one,
#two {
height: 100px;
position: absolute;
}
#one {
width: 300px;
background: #49d7b0;
}
#two {
right: 0;
width: 200px;
background: #d8c800;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="z-index.css">
</head>
<body>
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
This isn't really a problem, just the way overflows have to work. You have 2 options:
1) Use CSS keyframe animations - that way, you can give the hovered div a higher z-index, and have the reverse animation keep the z-index higher (dropping it back to a lower index at the very end of the animation).
2) use javascript/jquery (if you want this to work well on all devices/browsers, I would recommend Jquery anyway, which gives support to older browsers like IE8 that don't support css3)
I have a div that slides across the page. I am just playing around with keyframes in CSS trying to learn what all it can do.
I want this div to act as a curtain, so when it slides, everything behind it will change. NOw, when the div goes beyond the scope of what the user can see, the browser allows the user to scroll to see everything.. How do I stop the user from being able to see the over flow of that ONE element? Here's a fiddle.
DEMO
Code:
<div class="content"></div>
<div class="hide"><div class="curtain"></div></div>
CSS:
body {
}
.hide {overflow: hidden;}
.curtain {
-webkit-animation:curtainMove 5s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
margin-left: -2100px;
margin-top: -300px;
background-color: black;
height: 2000px;
width: 4000px;
transform:rotate(50deg);
-ms-transform:rotate(50deg); /* IE 9 */
-webkit-transform:rotate(140deg); /* Safari and Chrome */
z-index: 13;
float: left;
position:absolute;
}
#-webkit-keyframes curtainMove /* Safari and Chrome */{
from {
margin-left: -2500px;
margin-top: -2500px;
}
to {
margin-left: 600px;
margin-top: 600px;
}
}
.content {
background-color: #9F3;
height: 1200px;
width: 740px;
margin-top: 75px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 75px;
position:absolute;
z-index: 12;
}
Here's a solution: http://jsfiddle.net/Lvtr6/3/
<div class="hide">
<div class="curtain"></div>
<div class="content"></div>
</div>
.hide {
overflow: hidden;
position: relative;
}
And then remove position: absolute; on .content to fill the parent. Given the necessary solution, you might consider renaming your div class .hide to something like .outer.