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.
Related
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 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.
Is it possible to on hover animate an html element (a div) along the boundary of a parent element (a div)? Actually I have kind of answered the first part of this question, but I am having trouble getting the animation to occur from a certain point, then animate back to the starting point on mouse off. I may be trying to push CSS a little too far. But is this possible? If you notice in the sample code when you mouseover the little box jumps to the corner and starts animating smoothly, then off mouse off it abruptly snaps to back to the original position. I have tried animating the position attribute as well, still no go. This is the closest I have been able to get.
html, body {
height: 100%;
background-color: #000000;
color: #ffffff; }
.container {
height: 100%;
display: flex;
border: 1px solid green;
align-items: center;
justify-content: center; }
.container > div {
position: relative;
text-align: center; }
.sqwr-orbit {
height: 10px;
width: 10px;
background: #ffffff;
margin: 0 auto; }
.ignite:hover #square {
animation-duration: 12s;
animation-name: squareorbit;
animation-timing-function: linear;
animation-iteration-count: infinite; }
#keyframes squareorbit {
0% {
margin: 0 50% 0 0; }
25% {
margin: 90% 0 0 0; }
50% {
margin: 90% 0 0 90%; }
75% {
margin: 0 0 0 90%; }
100% {
margin: 0;
transform: rotateZ(1800deg); } }
<div class="container">
<div>
<div class="ignite" style="padding: 5px;height: 100px; width: 100px; position: relative;">
<div class="sqwr-orbit" id="square"></div>
<div style="position: absolute; border: 1px solid #fff; top: 8px; left: 10px; width: 80%; height: 84%;">
</div>
</div>
</div>
</div>
example image
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 currently have a flexbox with css properties that look something like this:
#root {
display: flex;
width: 85%;
border: 1px #F2F0F0 solid;
margin: 0 -100%;
position: relative;
top: 15%;
height: 600px;
overflow: hidden;
align-items: center;
transition-property: margin;
transition-duration: 1s;
}
This pushes my flexbox entirely out of the screen, to the left. I now want to slide it in to the right, however, I read that you cannot use transition with computed values, like margin: 0 auto which is the css I would like my flexbox to transition to, in order to center my flexbox responsively to the center of my screen.
How can I make this possible? I'm sure I'm missing something simple. My currently transition is just to a margin that isn't responsive, nor centered.
#root.slide-in {
margin: 0 2%;
}
Edit:
My flexbox is inside of a container like this:
<div class="container">
<!-- I want to center this flexbox -->
<div id="root" class="flexbox"></div>
</div>
Instead of animating margin, you should use the CSS property transform, which is was created to use for this kind of transitions. Then you can leave the CSS layout properties such as margin and position intact. Unlike margin, changing transform will never change the positioning of surrounding elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
.container {
background: #eee;
padding: 10px;
cursor: pointer;
display: flex;
flex-direction: column;
}
#root {
align-self: center;
width: 85%;
height: 60px;
background: #ccc;
transition: 1s transform;
padding: 10px;
}
.hidden {
transform: translateX(-100vw);
}
<div class=container onclick="document.querySelector('#root').classList.toggle('hidden')">
<div id=root> This is #root </div>
<p>click to hide or show #root</p>
</div>
See below. Hope this helps.
#root {
display: flex;
width: 85%;
border: 1px #F2F0F0 solid;
position: relative;
top: 15%;
left: -100%;
height: 600px;
overflow: hidden;
align-items: center;
animation: slideIn 1s forwards;
}
#keyframes slideIn {
100% { left: 0; }
}
<div id="root">
<img src="http://via.placeholder.com/350x250">
</div>
Try justify-content: center, this centers elements horizontally whereas the align-items centers the elements vertically.
In yout case, you can set the correct margin, since your width is 85%.
Note also that the fact that the element is flex doesn't have relevance, it would affect only the children of the element, but not the position of itself
#root {
width: 85%;
border: 1px black solid;
margin: 0 -100%;
height: 600px;
transition-property: margin;
transition-duration: 1s;
}
body:hover #root {
margin: 0 7.5%;
}
<div id="root"></div>