I have simple css animation and I use max-width to make horizontal scroll bar to not scroll.
Element need be visible only this what is in 1200px not more not less.
I tried following max-width but not working.
section {
max-width: 1200px;
}
.box {
width: 100%;
max-width: 540px;
position: relative;
z-index: -1;
top: 0px;
transform: rotate(80deg);
left: 1500px;
}
.wave {
position: absolute;
opacity: .4;
width: 1500px;
height: 1300px;
margin-left: -150px;
margin-top: -250px;
border-radius: 43%;
}
#keyframes rotate {
from { transform: rotate(0deg); }
from { transform: rotate(360deg); }
}
.wave.-one {
animation: rotate 9000ms infinite linear;
opacity: .1;
background: #6FC4FF;
}
.wave.-two {
animation: rotate 5000ms infinite linear;
opacity: .1;
background: #319DE8;
}
.wave.-three {
animation: rotate 9500ms infinite linear;
background-color: #0087E5;
}
<section>
<div class='box'>
<div class='wave -one'></div>
<div class='wave -two'></div>
<div class='wave -three'></div>
</div>
</section>
I use max-width to make horizontal scroll bar to not scroll.
You need to use overflow-x property to hide the horizontal scroll
section {
overflow-x: hidden;
width:1200px;
}
A simple way to solve this, if it causes no side effects to you, is to add overflow: hidden to body:
body {
overflow: hidden;
}
Related
I am trying to move the image from right to left and loop it (by sliding it). Currently, the image isn't showing up in the browser. This is the code I was testing:
Html:
<div class="slideshow">
<div class="imgslide"></div>
</div>
CSS:
.slideshow {
position: relative;
overflow: hidden;
}
.imgslide {
background: url(images/image.png);
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
animation: slideshow 10s linear infinite;
}
#keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
You don't see the picture because your containers have no width and height definitions. Here is your code with size definitions.
.slideshow {
position: relative;
overflow: hidden;
/* Here is where you set a size so it will be visible. */
width: 200px;
height: 300px;
}
.imgslide {
background: url(https://picsum.photos/200/300);
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
animation: slideshow 10s linear infinite;
}
#keyframes slideshow {
0% {
left: 0;
}
100% {
left: -200%;
}
}
<div class="slideshow">
<div class="imgslide"></div>
</div>
However, I want to suggest a change. Since you have a background image, why not simply set the animation to the background itself and not the container?
.imgslide {
background: url(https://picsum.photos/200/300);
width: 200px;
height: 300px;
animation: slideshow 10s linear infinite;
}
#keyframes slideshow {
0% {
background-position-x: 0;
}
100% {
background-position-x: -200px;
}
}
<div class="slideshow">
<div class="imgslide"></div>
</div>
Instead of giving the width and height for the .imgslide as a percentage, give it in px or em. You could also delete the overflow:hidden; from the .slideshow.
This will show if your image is not appearing or if it is appearing and being hidden.
I am working a project on my favorite science stories animated using HTML. While I was working on it By just changing the position to fixed or nothing position of all my objects was changing. If you remove the position property from #Guy, you will notice that the image of Galileo will shift drastically. I just want to know why this happens.
:root {
--initX: 280px;
--initY: 70px;
--finalY: 600px;
}
body {
background-color: aqua;
padding: 0px;
margin: 0px;
}
#Guy {
z-index: 4;
height: 200px;
position: fixed;
width: auto;
transform: translate(800px, 450px);
}
#Galilo {
height: 50px;
width: auto;
z-index: -1;
transform: translate(290px, 5px) rotateZ(4deg);
}
#tower {
height: 650px;
width: 150px;
z-index: 0;
transform: translate(250px, 50px) rotateZ(4deg);
position: absolute;
background-color: grey;
}
#Lball {
height: 40px;
width: 40px;
z-index: 2;
border-radius: 50%;
transform: translate(var( --initX), var(--initY));
background-color: blue;
position: absolute;
animation: lite 2s linear 1s infinite forwards;
}
#Hball {
height: 50px;
width: 50px;
z-index: 3;
transform: translate(calc(var( --initX) + 75px), var(--initY));
border-radius: 50%;
background-color: red;
position: absolute;
animation: heavy 2s linear 1s infinite forwards;
}
#floor {
height: 25%;
width: 100%;
background-color: green;
position: absolute;
z-index: -1;
transform: translate(0px, 565px);
}
#hide {
height: 12%;
width: 100%;
background-color: green;
position: absolute;
z-index: 1;
transform: translate(0px, 650px);
}
#keyframes lite {
0% {
transform: translate(var( --initX), var(--initY))
}
90% {
transform: translate(var(--initX), calc(var(--finalY) + 12.5px))
}
100% {
transform: translate(var(--initX), calc(var(--finalY) + 12.5px))
}
}
#keyframes heavy {
0% {
transform: translate(calc(var( --initX) + 75px), var(--initY))
}
90% {
transform: translate(calc(var( --initX) + 75px), var(--finalY))
}
100% {
transform: translate(calc(var( --initX) + 75px), var(--finalY))
}
}
<div id="tower"></div>
<div id="Hball"></div>
<div id="Lball"></div>
<div id="floor"></div>
<div id="hide"></div>
<img src="stick fidure.png" alt="Dude thinking" id="Guy">
<img src="galileo-galilei.png" alt="gallilo" id="Galilo">
P.S.
The link for the image of Galileo is https://cdn.images.express.co.uk/img/dynamic/109/590x/galileo-galilei-819977.jpg and the stick figure was made in Paint 3D
position: fixed takes the element out of the document flow and places it in relation to the viewport/window. Usually that also causes this element to overlap other elements. The other elements however will be rearranged in a way like the fixed element wouldn't be there (it's not in the document flow). So adding/removing position: fixed to/from an element will have all these effects on the overall document.
I am trying to experiment with CSS Animation and made a simple page transition effect using only Css animation. The problem is when the animation completes, a slight flicker is created. Can you guys suggest some thing to fix this?
Codepen link- https://codepen.io/jake2917/pen/qyzxva?editors=1100
Here is the code.
The problem start when i try to center the h1 tag.
body {
margin: 0;
padding: 0;
}
#line {
border: 0.5px solid #130f40;
opacity: 0;
width: 0;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
display: block;
top: 50%;
animation-name: run;
animation-duration: 1s;
transition: 0.1s ease-in;
}
#container1 {
width: 100%;
opacity: 0;
background-color: #ff7979;
position: absolute;
top: -110%;
transition: 0.2s ease-in;
animation-name: cover1;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#container2 {
width: 100%;
opacity: 0;
background-color: #ff7979;
position: absolute;
bottom: -110%;
transition: 0.2s ease-in;
animation-name: cover2;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes run {
from {
width: 0;
opacity: 0;
}
to {
width: 99%;
opacity: 1;
}
}
#keyframes cover1 {
0% {
top: -10%;
opacity: 0;
height: 0;
}
100% {
top: 0%;
opacity: 1;
height: 50vh;
}
}
#keyframes cover2 {
0% {
bottom: -110%;
opacity: 0;
height: 0;
}
100% {
bottom: 0%;
opacity: 1;
height: 50vh;
}
}
// ADDING THIS LINE MAKE IT FLICKER
#container1 h1 {
text-align: center;
}
<div id="line"></div>
<div id="container1">
<h1>hello there</h1>
</div>
<div id="container2">
<h1>hello there</h1>
</div>
It is flickering left right because you have a content that is more than 100% of the body, html.
In many browsers they are adding a scroll bar and it pushed the content to the left.
What you need to do is to add a simple css code overflow: hidden. This way the content will be hidden, the body remains 100% height and the browser won't add scrollbar;
body {
overflow:hidden;
}
I want to create an infinitely scrolling (to the left) image animation, where the container is full width and the background image is repeated horizontally. So it will always be like a ticker style - the same image just infinitely moves to the left with no gaps.
Ideally I'd like it to be pure html and css if possible.
This is my attempt - https://jsfiddle.net/7Ljz82n9/
At the moment it moves to the left but there's a gap at the end and it jumps, where am I going wrong?
Html
<div class="tech-slideshow">
<div class="mover-1"></div>
</div>
CSS
.tech-slideshow {
height: 102px;
width:100%;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
width: 1440px;
background: url(http://placehold.it/1440x102);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
background-repeat:repeat-x;
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 12s linear infinite;
}
#keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}
If you are willing to use two divs inside the "slideshow" you could do something like this:
.tech-slideshow {
height: 102px;
width: 100%;
max-width: 1440px; /* Can be at most the width of the image */
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.wrapper {
height: 102px;
width: 2880px;
}
.wrapper div {
position: absolute;
width: 1440px;
height: 102px;
background: url('http://placehold.it/1440x102') top right no-repeat;
margin: 0;
padding: 0;
animation: movediv 12s linear infinite;
}
.wrapper div.second {
padding-left: 1440px;
animation: movediv 12s linear infinite;
}
#keyframes movediv {
0% { margin-left: 0px; }
100% { margin-left: -1440px; }
}
<div class="tech-slideshow">
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
</div>
This will move the divs to the left until a full rotation is made and the second picture is "in the same spot" the first slide and can now be shown again. The padding on the second div is to make it align after the first div. You can alter this to use something else etc.
Here's also a fiddle to play around with: https://jsfiddle.net/thepio/7Ljz82n9/4/
EDIT:
I thought to myself why would this not be possible with using pseudo-elements. And it is! Here's an example of using the pseudo-element ::after with only one div. I think you can figure out the widths, margins and paddings etc (1 x image width or 2 x image width).
.tech-slideshow {
height: 102px;
width: 100%;
max-width: 1440px; /* Can be at most the width of the image */
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.wrapper {
height: 102px;
width: 2880px;
}
.wrapper div {
position: absolute;
width: 1440px;
height: 102px;
background: url('http://placehold.it/1440x102') top right no-repeat;
margin: 0;
padding: 0;
animation: movediv 12s linear infinite;
}
.wrapper div::after {
display: block;
content: '';
width: 1440px;
height: 102px;
padding-left: 1440px;
background: url('http://placehold.it/1440x102') top right no-repeat;
}
#keyframes movediv {
0% { margin-left: 0px; }
100% { margin-left: -1440px; }
}
<div class="tech-slideshow">
<div class="wrapper">
<div class="first"></div>
</div>
</div>
And also a fiddle about it: https://jsfiddle.net/thepio/05w6ceue/1/
I am attempting to rotate/spin-in-place some stacked divs, but the 'transform-origin' property seems to be ignored when using absolute divs.
Attached is an example, the divs are stacked using stack class. Would using SVG be a better solution?
.circle {
height: 250px;
width: 250px;
border-radius: 50%;
border: 50px solid white;
margin: auto;
}
body {
background: black;
overflow: hidden;
}
.circle_one {
animation: rotateY 3s infinite linear;
}
.circle_two {
animation: rotateX 2s infinite linear;
}
.spinMe {
animation: spinMe 2s infinite linear;
transform-origin: 50% 50%;
}
.stack {
position: absolute;
top: 0;
left: 0;
}
#-webkit-keyframes rotateY {
to {
transform: rotateY(360deg);
}
}
#-webkit-keyframes rotateX {
to {
transform: rotateX(360deg);
}
}
#-webkit-keyframes spinMe {
to {
transform: rotate(360deg);
}
}
<div class="spinMe">
<div class="circle circle_one stack"></div>
<div class="circle circle_two stack"></div>
</div>
The problem is that the spinMe element has 100% width and zero height due to the absolutely positioned children. If you give spinMe a defined width and height equal to .circle it works correctly.
.circle {
height: 250px;
width: 250px;
border-radius: 50%;
border: 50px solid white;
margin: auto;
}
body {
background: black;
overflow: hidden;
}
.circle_one {
animation: rotateY 3s infinite linear;
}
.circle_two {
animation: rotateX 2s infinite linear;
}
.spinMe {
animation: spinMe 2s infinite linear;
transform-origin: 50% 50%;
width: 350px;
height: 350px;
}
.stack {
position: absolute;
top: 0;
left: 0;
}
#-webkit-keyframes rotateY {
to {
transform: rotateY(360deg);
}
}
#-webkit-keyframes rotateX {
to {
transform: rotateX(360deg);
}
}
#-webkit-keyframes spinMe {
to {
transform: rotate(360deg);
}
}
<div class="spinMe">
<div class="circle circle_one stack"></div>
<div class="circle circle_two stack"></div>
</div>