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.
Related
Knowing full well that it's deprecated, I fooled around with the MARQUEE tag and got the exact result I was looking for: a single transparent png image of a ship travelling at a steady speed across the viewport on an infinite loop. This was beautiful as it was so simple and gave me the required result with very little code and without any headaches whatsoever! As we all know (or quickly find out!), sadly the MARQUEE tag is not advisable on a working website.
However, what I don't know and now need to know is how to replicate the same thing without using those MARQUEE tags? Can it be done solely with HTML & CSS? I have searched online and find many differing and confusing answers.
Can anyone fulfill this challenge?
You can use an infinite CSS animation.
To move from right to left first position the ship just off the viewport to the right, this can be done by translating it 100vw.
Then to move it over to the left translate it by -100%. 100% in a translateX is 100% of the element's own width so the ship disappears off to the left.
.ship {
width: 30px;
height: 20px;
background: blue;
animation: move 10s linear infinite forwards;
position: fixed;
top: 0;
left: 0;
}
#keyframes move {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
}
}
<div class="ship"></div>
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
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 building an application and on mobile we have a panel that slides in and takes up 100% of the viewport. This is has the position:fixed attribute attached to it. At the top of the panel I have a "back to" link, which is a <p> with an anchor <a>Back to...</a> inside it.
Now what I'm trying to achieve is to affix this to the top of the page so that when the user scrolls down the page the "back to" link is always at the top of the page. The reason for this is that the panels can often contain a lot of information, especially on mobile. I do not want to use Javascript as I'm hoping there is a way around this with CSS.
I've tried giving this <p> a position:fixed attribute but as it's containing block is positioned fixed it doesn't do anything! Is there a way around this issue? Has anyone done something similar before ?
HTML
<div id="panelDiv">
<p>Back to...</p>
......
Panel content goes here
......
</div>
CSS
#myDiv {
bottom: 0;
left: 0;
overflow: scroll;
padding: 0.85714em;
position: fixed;
right: 0;
top: 0;
transform: translateX(-100%);
transition: transform 350ms ease-in 0s, opacity 350ms ease-in 0s;
z-index: 9999;
}
p {
position:fixed;
top:0;
}
Now, what I think is happening is that because the container is already fixed, the browser already keeps the container fixed to the top and therefore when I add the same to the containing element it doesn't do anything. Is there a way around this?