This animation is working good on large screens but it is causing scroll bar to appear when it slides in from the right side. The scroll bar disappears after the animation is completed. Is there any way to prevent the scroll bar from appearing?
.intros {
color: rgb(49, 49, 49);
font-family: Raleway;
animation: heading;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes heading {
0% {right: -700px}
100% {right: 0}
}
Setting overflow: hidden in either the body or the class .intro might be the solution, this is because the overflow CSS property tells the element what to do when the content becomes too big. Depending on where the scrollbar is showing you can use overflow-x or overflow-y. The x and y represent the y-axis(vertical) and x-axis(horizontal).
Also if you doing animations, you should use translate, in your case translate:-700px
Related
I've created a ticker that I want to have along the side of my page, with text alongside a png image scrolling vertically across it. I've been able to set it up for the most part, but am running into a problem with having my correctly sized image be included in the animation.
The animation works when the image is larger than the ticker container, but when I make it smaller (either through adjusting the height with CSS or through resizing the original image) the image is not included in the scrolling animation.
I've included both the image and the text in the .ticker-item class, with the following css:
.ticker-item {
flex-shrink: 0;
margin-right: 32px;
animation: ticker-animation 40s linear infinite;
}
#keyframes ticker-animation {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
Here's a codepen with an example that includes both images: https://codepen.io/uxconor/pen/WNdpwbv
As you can see, the larger tiger head is scrolling down the page alongside the text, but for whatever reason, the smaller tiger head is just staying in the same position.
So I know that marquee animations are like, sooo totally 1999, but I really need scrolling text for my project.
Basically, I have a text that should scroll all the way across the browser window (viewport?) and go all the way across and offscreen before restarting all the way at the beginning. A simple marquee. However, when I load the page, the text scrolls only some of the way off of the page, then resets to the beginning without completing the scroll.
Here's my code (the link text is from an earlier problem I was encountering but have already solved.)
a {
margin: auto;
text-decoration: none;
-webkit-animation: marquee 10s linear infinite;
}
#-webkit-keyframes marquee {
0% { -webkit-transform: translateX(1500px) }
100% { -webkit-transform: translateX(-500px) }
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="www.nytimes.com">It looks like each element is running into the next because they are all separate objects and each one subtracts
a certain amount of space from the total width, causing the others behind it to move faster.</a>
</body>
</html>
I've tried changing the positioning property of the elements and the animation duration but nothing seems to give me the results I so desperately desire?
You can use vw, which is for viewport width. This is a percentage, although you don't add a percent sign. So 100vw is 100% of the viewport width. You can then marquee from 100% to -100% to move the text from right to left. 100vw means the text starts just outside the screen on the right side. -100vw means the text moves until it leaves the left side, assuming the a tag itself is (at most) the width of the screen (at most 100vw).
The end value of the animation should be negative the width of the element. If, for example, your tag would be 200px wide, the start value of the animation should still be 100vw, but the end value should be -200px.
a {
margin: auto;
text-decoration: none;
-webkit-animation: marquee 10s linear infinite;
}
#-webkit-keyframes marquee {
0% {
-webkit-transform: translateX(100vw)
}
100% {
-webkit-transform: translateX(-100vw)
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="www.nytimes.com">It looks like each element is running into the next because they are all separate objects and each one subtracts
a certain amount of space from the total width, causing the others behind it to move faster.</a>
</body>
</html>
PS. Don't forget to add the prefixes for other vendors for the animation before go-live.
I am developing with Vaadin 7 and wanted to create a sidebar, which can be toggled visible via button click. The sidebar-container appears / disappears with a CSS rotation animation and folds to the right.
All the components are placed in CSSLayouts and organized like this (Every container represents one Layout-object):
I want the mainContainer to take the full width of the root-container when the sidebar is toggled invisible. My problem is that the sidebarContainer only shows up if I give it a static width (e.g. 300px). When invisible, a white blank space remains where the sidebar used to be.
Here some pictures showing my idea of the result:
My orientation was the Vaadin Sampler, where the menu Button unfolds a sidebar and the main content gets moved to the left. Which possibilities exist to realize such a smooth container resizing animation?
Thanks in advance!
I figured out how to solve the problem with a combination of styling and Java code.
The button click event resizes the .sidebarContainer cssLayout. When the sidebar is toggled invisible, the layout width is set to 0.
The sidebar container adapts two animation CSS classes for the opening and closing animations, which are also directed by the button click event.
Java
public void buttonClick(ClickEvent event) {
if (sidebar.getStyleName().contains("sidebar-in"))
{
sidebar.removeStyleName("sidebar-in");
sidebar.setStyleName("sidebar-out");
sidebarContainer.setWidth(0,Unit.PIXELS);
return;
}
sidebar.removeStyleName("sidebar-out");
sidebar.setStyleName("sidebar-in");
sidebarContainer.setWidth(300,Unit.PIXELS);
}
To let the .mainContainer shift as smoothly as in the Vaadin sampler application, I gave the .sidebarContainer a transition attribute. Now, when this container is resized by the button click event, the CSS ease-function creates a width-changing movement and the flex-layout of the mainContainer makes it stick to that movement. The sidebar itself is a panel inside the .sidebarContainer.
CSS
.mainContainer {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex: 1;
order: 1;
width: auto;
}
.sidebarContainer {
order: 2;
transition: width 1s ease;
-moz-transition: width 1s ease;
}
.sidebar-in{
animation: sidebarAnimationFramesIn ease 1s;
animation-iteration-count: 1;
transform-origin: 100% 50%;
animation-fill-mode:forwards;
width: 100%;
}
.sidebar-out{
animation: sidebarAnimationFramesOut ease 1s;
animation-iteration-count: 1;
transform-origin: 100% 50%;
animation-fill-mode:forwards;
width: 100%;
}
I realized the toggle-animation of the sidebar by adding Keyframes in CSS
The good and the bad of a CSSPanel is that it is a white table, where everything can be done, but still needs to be write (like css styling and such).
I can suggesto to take a look at HorizontalSplitPanel where you should block and hide the separator. It should listen perfectly when you decide to collapse a side.
I havent tasted it right now on your use case but i have used before and never had an issue. Give it a go!
I'm having some trouble figuring out why the bouncing arrow on my web page is not going behind the rest of the elements on the web page.
I've animated an arrow using CSS3 with the following code
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-fill-mode:both;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
However, if you scroll on down the page, the arrow can still be seen, especially on the Timeline section and "Where do cats sleep" section. I've tried z-index on a few elements and nothing seems to be fixing it.
You can view it here
It's probably something small but can't figure it out, thanks!
This may seem kind of silly, but for the header use:
position: relative;
z-index: -2;
Then, for the .arrow, use:
z-index: -1;
It will be behind all z-index: auto elements which is pretty much the rest of the page. The header has to be position: relative so the negative z-indices work together.
I have an animation that slides in a bar with a few dropdown menus from left to right by just growing the container from 0 to 660px.
I didn't make this myself, but this is the way it looked when I startetd working on it:
#keyframes fadeIn-animation {
from {overflow-x: hidden; max-width: 0}
to {overflow-x: hidden; max-width: 660px}
}
#-webkit-keyframes fadeIn-animation {
from {overflow-x: hidden; max-width: 0}
to {overflow-x: hidden; max-width: 660px}
}
.animated-container {
animation-name: fadeIn-animation;
animation-duration: 1s;
-webkit-animation-name: fadeIn-animation;
-webkit-animation-duration: 1s;
This works fine on chrome but not on safari.
The part of the animation with the container growing from 0 to 660 px works but all the child elements are already visible during the transition because of the overflow being visible. https://jsfiddle.net/6cqapbnu/
I tried setting the bar element to
overflow-x: hidden;
overflow-y: visible;
instead of having those in the animation,
which makes the animation work correctly but now the dropdowns don't overflow correctly, they are scrollable.
I read somewhere that this is because when you set overflow-x or overflow-y to visible and the other one to something different than visible the visible is handled like auto I don't know if that's true or still the case though.
I think the easier solution would be to just have the overflow-x: hidden work correctly within the animation like it does on chrome.
How can I fix this?
You should check browser compatibility of attributes before using them.
You can use
https://caniuse.com/
to check.