I have a container div with overflow: auto (this can't be removed) and within it there's another div that toggles between showing and hiding using an animation when a button is clicked. The problem is that when this div moves down it causes an overflow. Keep in mind that this div must be within the container.
Example of the problem
https://jsfiddle.net/wg3jzkd6/1/
The expected result:
Div moves down without causing overflow
#manuel can you move the absolute div inside the content div? if yes, try adding the overflow: hidden; on content div
document.getElementById('button').addEventListener('click', () => {
const absolute = document.getElementById('absolute-div')
const absoluteClass = absolute.getAttribute('class')
if(absoluteClass.includes('hidden'))
absolute.setAttribute('class', 'absolute-div shown')
else
absolute.setAttribute('class', 'absolute-div hidden')
})
#keyframes hide {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
#keyframes show {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.container {
position: relative;
overflow: auto;
border: 1px solid black;
height: 80vh;
width: 40vw;
margin: 0 auto;
padding: 1rem;
}
.content {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-height: 100%;
background-color: green;
overflow:hidden;
}
.absolute-div {
background-color: blue;
min-height: 20%;
width: 100%;
position: absolute;
left: 0;
bottom:0;
display:inline;
}
.hidden {
animation: hide ease forwards 300ms;
}
.shown {
animation: show ease forwards 300ms;
}
<html>
<body>
<div id='container' class='container'>
<div class='content'>
<button id='button'>
SHOW/HIDE
</button>
<div id='absolute-div' class='absolute-div'>
Hello world
</div>
</div>
</div>
</body>
</html>
Hope this will solve the issue you are facing..
As far as I can understand your question, is that you have a container that has an extra overflow. Try using the overflow: hidden; property in your container div
Just change your overflow to hidden
document.getElementById('button').addEventListener('click', () => {
const absolute = document.getElementById('absolute-div')
const absoluteClass = absolute.getAttribute('class')
if(absoluteClass.includes('hidden'))
absolute.setAttribute('class', 'absolute-div shown')
else
absolute.setAttribute('class', 'absolute-div hidden')
})
#keyframes hide {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
#keyframes show {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.container {
position: relative;
overflow: hidden;
border: 1px solid black;
height: 80vh;
width: 40vw;
margin: 0 auto;
padding: 1rem;
}
.content {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-height: 100%;
background-color: green;
}
.absolute-div {
background-color: blue;
min-height: 20%;
width: 100%;
position: absolute;
left: 0;
bottom:0;
}
.hidden {
animation: hide ease forwards 300ms;
}
.shown {
animation: show ease forwards 300ms;
}
<html>
<body>
<div id='container' class='container'>
<div class='content'>
<button id='button'>
SHOW/HIDE
</button>
</div>
<div id='absolute-div' class='absolute-div'>
Hello world
</div>
</div>
</body>
</html>
I do not quite understand, why overflow: auto cannot be changed. It works perfectly with the overflow attribute set to hidden.
If changing from auto invokes some kind of affect that is not explained here, I would kindly advise you to add this affect. But should there be such, it can probably be solved by putting this whole construct into another div container and isolating it, preventing any unwanted side effects.
Related
I need some help with a css issue. I'm actually trying to make an animated checked-button with a double animation effet. You can see what I'm aiming at here:
https://youtu.be/rMDGeAUQ0Wc
I'm working on the appearing of the button from the right side. I decided to use flexbox associated with a hover feature so I can make appear the button on hover, but it doesn't seem to work and I don't know why.
Here's the code:
.flexbox-container {
display: flex;
overflow: hidden;
justify-content: space-between;
}
.flexbox-3 {
display: none;
}
.flexbox-container: hover+flexbox-3 {
display: block;
}
<div class="flexbox-container">
<div class="flexbox-1">
<p>text</p>
</div>
<div class="flexbox-2">
<p>text</p>
</div>
<div class="flexbox-3">
<p>text</p>
</div>
</div>
Does anyone can help?
Cheers
try this
.flexbox-container:hover > .flexbox-3 {
display: block;
}
but I think that animation will not work due to display:none block. I would prefer you to write the code this way.
.flexbox-3 {
position: relative;
right: -30%;
transition: 0.5s;
}
.flexbox-container:hover > .flexbox-3 {
right: 0;
}
if you want to move .flexbox-2 try this CSS. I add tranform: translate
.flexbox-container {
display: flex;
overflow: hidden;
justify-content: space-between;
width: 300px;
border: 1px solid black;
}
.flexbox-3 {
position: relative;
opacity: 0;
right: -30%;
transition: 0.5s;
visibility: hidden;
}
.flexbox-2 {
transform: translateX(0);
transition: 0.5s;
}
.flexbox-container:hover .flexbox-3 {
right: 0;
opacity: 1;
visibility: visible;
}
.flexbox-container:hover .flexbox-2 {
transform: translateX(-30px);
}
There are some errors in your CSS
Try this
.flexbox-container:hover .flexbox-3 {
display: block
}
however the animation will not work here because animate does not work with the display property
I'm trying to have an infinite keyframe animation for text (span) moving horizontally by using the translateX property.
I manage to have the beginning of the infinite animation, however when I reach the end of the animation it "jumps" back to the beginning without it being smooth.
Also when reaching the last span of the animation, I would like that we start to see the beginning of the first span, so that it looks like it's indefinitely scrolling and not have blank space at the end of the animation.
I also tried to create different keyframes for each span, but this method made it very difficult to time the speed.
html, body {
margin: 0;
}
.scroll {
display: flex;
position: relative;
width: 100%;
height: 15%;
min-height: 150px;
margin: auto;
background-color: #252525;
overflow: hidden;
z-index: 1;
}
.m-scroll {
display: flex;
position: absolute;
top: 0;
left: 0;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
white-space: nowrap;
transform: scale(2);
transition: all 1s ease;
}
.m-scroll > div {
display: flex;
animation: scrollText 10s infinite linear;
}
.m-scroll h1 {
margin: 0;
margin-right: 150px;
font-size: 25px;
color: #ffffff;
transition: all 2s ease;
}
#keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
<div class="scroll">
<div class="m-scroll">
<div>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
</div>
</div>
</div>
So how could I make it become smooth ?
This behavior happens in full screen, on small device, the problem doesn't seem to appear. If you run the code snippet, please expand it
I have stripped things down to give a basic continuous scroll - with the overall width of the 'sentence' (span) being a minimum 100vw in this snippet.
html,
body {
margin: 0;
}
.scroll {
position: relative;
width: 100vw;
height: 15%;
min-height: 150px;
background-color: #252525;
overflow: hidden;
z-index: 1;
margin: 0;
padding: 0;
}
.m-scroll {
overflow_ hidden;
height: 100%;
white-space: nowrap;
animation: scrollText 10s infinite linear;
margin: 0;
font-size: 0;
display: inline-block;
}
span {
font-size: 50px;
display: inline-block;
min-width: 100vw;
margin: 0;
padding: 0;
color: white;
}
#keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
<div class="scroll">
<div class="m-scroll"><span style="rbackground: cyan;">TEXT INFINITE SCROLL </span><span style="rbackground: magenta;">TEXT INFINITE SCROLL </span><span style="rbackground: yellow;">TEXT INFINITE SCROLL </span><span style="rbackground: gray;">TEXT INFINITE SCROLL </span></div>
</div>
Note: I removed the flexes as I have never been able to make them play nicely with scrolling text. Maybe someone can put me right on that.
I'm trying to place the header in the animated div, but I can't figure out how.
.introbox-one {
width: 80%;
height: 16px;
border: 1px solid #9A00FF;
padding: 10px;
background-color: #9A00FF;
animation: introbox-one 1s ease-in;
}
#keyframes introbox-one {
0% {
transform: translateX(-100%);
}
}
h1 {
display: flex;
justify-content: flex-end;
margin: 0;
}
<div class="introbox-one">
<h1>THIS IS A HEADER</h1>
</div>
Your header is taller than the height you have set. Set it to either min-height or remove the height from the container.
See the code in this jsfiddle: https://jsfiddle.net/frpL3yr1/
The idea is that I want a bar of images at the top of the screen. The img-wrapper div will later be animated via javascipt to move to the left when you mouse over. For an example of what I am ultimately attempting to accomplish, see this page. The difference is that in mine, the animation will only run when moused-over.
The issue is that in my jsfiddle and the linked example, the width of the div containing the images is hard-coded. In my case, the css hard-codes the width of img-wrapper to 200%. I need my page to support an arbitrary number of images, so I need its width to be equal to that of the contents. The way my jsfiddle is implemented, if there are more images that can fit in img-wrapper, they will wrap to a new line.
What is the best way to go about fixing this?
Approach using flexbox and animation:
html, body {
margin:0;
padding:0;
overflow: hidden;
}
.demo-ribbon {
width: 100%;
height: 70vmin;
margin-top: 2rem;
overflow: hidden;
}
.img-wrapper {
height: 70vmin;
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: stretch;
}
img {
flex: 1;
object-fit: content;
margin: 0 .2rem;
width: 100vmin;
height: 100%;
}
.lead {
animation: bannermove 12s linear 320ms infinite paused alternate;
}
.img-wrapper:hover .lead {
animation-play-state: running;
}
#keyframes "bannermove" {
0% {
margin-left: 0%;
}
100% {
margin-left: -230%;
}
}
You will need to add prefixes in order to work in all browsers especially animation
Further reading: https://devdocs.io/css/animation
working pen: https://codepen.io/manAbl/pen/KROvjx ;
Aspect Ratio: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp & https://css-tricks.com/aspect-ratio-boxes/
Hope helps! :)
Use flexbox and animation with translate :)
.demo-ribbon {
width: 100%;
overflow: hidden;
}
.demo-ribbon .img-wrapper {
display: flex;
justify-content: stretch;
margin-right: 0;
position: relative;
width: 100%;
}
.demo-ribbon .img-wrapper img {
transition: all 0.5s ease;
margin: 2px;
}
.demo-ribbon .img-wrapper img:first-child {
animation: lefttoRight 25s linear 320ms infinite paused alternate;
}
.demo-ribbon .img-wrapper img:hover {
transform: scale(1.1);
cursor: pointer;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}
.demo-ribbon .img-wrapper:hover img {
animation-play-state: running;
}
#keyframes lefttoRight {
0% {
margin-left: 0;
}
50% {
margin-left: -200%;
}
100% {
margin-left: 0%;
}
}
<html>
<body>
<div class="demo-ribbon">
<div class="img-wrapper">
<img class="lead" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
<img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
<img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
<img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
<img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
<img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
<img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
<img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
<img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
<img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
</div>
</div>
</body>
</html>
I have an idea for an Ajax-loader.
This is what I have accomplished so far:
body {
background-color: lightGrey;
counter-reset: h1-counter;
}
.wrap {
max-width: 200px;
height: 50px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.wrap div {
background: linear-gradient(#0032f0, white, #0032f0);
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
opacity: .8;
}
.wrap div.dark-bar {
position: absolute;
width: 10%;
height: 100%;
animation: moveDarkBar 3s linear infinite;
z-index: 1;
}
#keyframes moveDarkBar {
from {
left: -20%;
}
to {
left: 120%;
}
}
<div class="wrap">
<div></div>
<div class="dark-bar"></div>
</div>
I want the moving indicator (.dark-bar) to be "melted" with foreground-div. Currently there is a hard line which is visually distinguishable.
Is there a way to get the moving indicator (.dark-bar) to be blurred on the left-, right edge?
You could make use of CSS filter to add blur to top layer which is animated as below,
filter - The filter property provides graphical effects like blurring,
sharpening, or color shifting an element. Filters are commonly used to
adjust the rendering of images, backgrounds, and borders.
Do include vendor prefixes for other browsers such as -webkit-,-o-,-moz-,-ms- to filter.
body {
background-color: lightGrey;
counter-reset: h1-counter;
}
.wrap {
max-width: 200px;
height: 50px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.wrap div {
background: linear-gradient(#0032f0, white, #0032f0);
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
opacity: .8;
}
.wrap div.dark-bar {
position: absolute;
width: 10%;
height: 100%;
animation: moveDarkBar 3s linear infinite;
z-index: 1;
-webkit-filter:blur(2px); /*Add this*/
}
#keyframes moveDarkBar {
from {
left: -20%;
}
to {
left: 120%;
}
}
<div class="wrap">
<div></div>
<div class="dark-bar"></div>
</div>
Try using the box-shadow property and set the vertical and horizontal axis values to 0. Something like this:
div {
box-shadow: 0 0 10px black;
}
This might be a similar effect for the one you want.