Move DOM elements off screen without increasing body width - css

I am using bootstrap 3 for my web application, and I am running into and issue.
My navbar is wrapped in a container div,
my main content is wrapped in a container div adjacent to the navbar like so:
<body>
<div class="container">
//Navbar stuff
</div>
<div class="container">
//Navbar stuff
</div>
</body>
I have an animation on the body content that slides all of the content off of the screen while transitioning to a new screen. to do so I animate the left attribute to be off screen.
From what I can gather, this is causing the body width to expand beyond it's normal size, and this is causing my navbar to be affected by the position of content during the animation.
Is there a way to implement a sliding animation without increasing the width of the body, so that my navbar does not get moved during the animation?
EDIT:
To clarify how I am doing the animations, I am using CSS3 animation keyframes, and applying the class to the element I am sliding of screen. Here is the LESS that is doing this
#animation-duration: 300ms;
#animation-timing-function: ease-in-out;
#animation-fill-mode:forwards;
#animation-iteration-count: 1;
.slide-in-right{
animation-name: slideInRight;
animation-duration:#animation-duration;
animation-timing-function: #animation-timing-function;
animation-fill-mode: #animation-fill-mode;
animation-iteration-count: #animation-iteration-count;
}
.slide-out-right{
animation-name: slideInRight;
animation-duration:#animation-duration;
animation-direction: reverse;
animation-timing-function: #animation-timing-function;
animation-fill-mode: #animation-fill-mode;
animation-iteration-count: #animation-iteration-count;
}
.slide-in-left{
animation-name: slideInLeft;
animation-duration: 300ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.slide-out-left{
animation-name: slideInLeft;
animation-direction: reverse;
animation-duration:#animation-duration;
animation-timing-function: #animation-timing-function;
animation-fill-mode: #animation-fill-mode;
animation-iteration-count: #animation-iteration-count;
}
#keyframes slideInRight{
0%{
position:relative;
left: 150%;
}
100%{
position:relative;
left:0%;
}
}
#keyframes slideInLeft{
0%{
position:relative;
left: -150%;
}
100%{
position:relative;
left:0%;
}
}


If you use transform: translateX(-100%); (where -100% is whatever you have to do to move it off screen), it shouldn't affect body width.
Also, using position: absolute; left: -100%; (again, -100% is whatever you have to do to move the element off screen), the body width shouldn't be affected, either.

Related

CSS: getting text to disappear permanently from a scene?

#alert-user-message {
text-align: center;
position: absolute;
top: 200;
right: 100;
animation-name: textAnim;
animation-duration: 5s;
animation-delay: 2s;
}
#keyframes textAnim {
0% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}
You can see in the example vid. I attempt to fade the text with the code above but it just comes right back to 1 opacity and stays in the scene. I do NOT want this. I need the text to transition out "permanently" one way or another.
How is this done properly in CSS? There are built-in enter/exit animations in streamlabs but all their code is tucked away and unviewable.

Use animation-fill-mode: forwards; to retain its state at the end of the animation.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

css3 animation addition assignment for to{}

I am looking for way to make addition assignment in #keyframe.
for example I want background position change infinity and just go on.
.waterwave{
background-image: url("../img/waterwave.png");
height: 215px;
margin-top: -78px;
width: 100%;
animation-name: example;
animation-duration: 100s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: normal;
}
#keyframes example {
to {background-position: 100px;}
}
But I don't want to make absolute value like 100px .
I want something like backgroundPosition: "+=100" in js animation.
Is there any possibility to doing sth like that in css ?

If you have a repeating background, the position starts over at the width of the background graphic. For example, if the graphic is 300px wide, then background-position:50px looks exactly the same as background-position:350px.
So that's what you can use: move the background animation precisely the same width as the graphic, and then it will seamlessly start over. At least if you use the linear function rather than ease-in-out.
.waterwave {
background-image: url("http://lorempixel.com/300/215"); /* a 300px wide image */
height: 215px;
margin-top: -78px;
width: 100%;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear; /* changed from ease-in-out */
animation-iteration-count: infinite;
animation-direction: normal;
}
#keyframes example {
to {
background-position: 300px; /* this should be the same as the image */
}
}
<div class="waterwave"></div>
(in the example I used 5 seconds for the duration, to make the effect visible, but you get the idea.)

How can I delay the start of a CSS animation?

I'm trying to delay the trigger of a CSS animation (not slow down the animation itself, but delay it a few seconds before starting). And the image should not display before the animation runs. I looked through the other questions, and they don't seem to address this.
MY FIDDLE: http://jsfiddle.net/omarel/guh5f8bs/
CSS
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
100% {
-webkit-transform: translateX(0%);
}
}
HTML
<div class="slideRight">
HI
</div>
Side note: Also is there a way to get it to work with an <a> tag? Animations don't seem to play nice with this:
<a class="slideRight">
HI
</a>

Delaying the start of the animation is very simple. Simply add the animation-delay property to your code:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
}
It's important to note that animation-delay only delays the start of the animation from the beginning. If you have a repeating animation, it won't add the delay to the same spot of each loop; only to the very beginning. There's currently no CSS property capable of that kind of looped delay.
All major browsers currently support animation-delay without the need for vendor prefixes.
As for your second question regarding the <a> element: Yes, it can work. The reason it's not working for you now is because <a> elements are inline elements. In order to make it work like you're expecting, add display: inline-block; to the .slideRight{} selector. Ultimately this is what your code will look like:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
display: inline-block;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
<a class="slideRight">HI</a>
JSFiddle Example

Add a settimeout function
Hi there, you could add an event listen that get when you mouseover the certain element and then calls the function after 1 second.
$('slideRight').on('mouseover',function(){
window.setTimeout(function(){
$this.addClass('onesecond');
}, 1000); //<-- Delay in milliseconds
});

div {
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
}
Source:
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

How to hide one html tag behind another at a certain coordinate

I have two div elements, within the one background div I have another div which uses CSS animation to display a box going up and down.
I want to make those parts of this div with the box 'disappear' as soon as any part of that box crosses over that background div.
I have an example here JSFidle, where as soon the red box exceeds the black box it should then go 'under' the black div rather than remaining at the top as it's presently.
This is the CSS code:
body{
z-index:100;
}
div{
background: black;
height:300px;
}
#scroll{
width: 200px;
height: 200px;
background: red;
position: relative;
-webkit-animation-name: test;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
animation-name: test;
animation-duration: 30s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes test {
0% {left:0px; top:0px;}
50% {left:0px; top:270px;}
100% {left:0px; top:0px;}
}
#keyframes test {
0% {left:0px; top:0px;}
50% {left:0px; top:270px;}
100% {left:0px; top:0px;}
}
body {
overflow-x: auto;
overflow-y: hidden;
}
What is the best way to create this effect.

You just need to add overflow: hidden to the parent div.
I sped up your animation for testing purposes.
Like so
#scrollParent{
overflow: hidden;
}

Assign a z-index to the outer-most background(the white part in the fiddle) and make it higher than the z-index of the red box. Guess that should work.

CSS Animation and Display None

I have a CSS Animation for a div that slides in after a set amount of time. What I would like is for a few divs to fill the space of the animated div that slides in, which it will then push those elements down the page.
When I attempt this at first div that slides in still takes up space even when it is not visible. If I change the div to display:none the div doesn't slide in at all.
How do I have a div not take up space until it is timed to come in (using CSS for the timing.)
I am using Animate.css for the animations.
Here is what the code looks like:
<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>
<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>
As the code shows I would like the main div to be hidden and the other divs show at first. Then I have the following delay set:
#main-div{
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
}
It is at that point that I would like the main div to push the other divs down as it comes in.
How do I do this?
Note: I have considered using jQuery to do this, however I prefer using strictly CSS as it is smoother and the timing is a bit better controlled.
EDIT
I have attempted what Duopixel suggested but either I mis-understood and am not doing this correctly or it doesn't work. Here is the code:
HTML
<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>
CSS
#main-image{
height: 0;
overflow: hidden;
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#main-image.fadeInDownBig{
height: 375px;
}

CSS (or jQuery, for that matter) can't animate between display: none; and display: block;. Worse yet: it can't animate between height: 0 and height: auto. So you need to hard code the height (if you can't hard code the values then you need to use javascript, but this is an entirely different question);
#main-image{
height: 0;
overflow: hidden;
background: red;
-prefix-animation: slide 1s ease 3.5s forwards;
}
#-prefix-keyframes slide {
from {height: 0;}
to {height: 300px;}
}
You mention that you're using Animate.css, which I'm not familiar with, so this is a vanilla CSS.
You can see a demo here: http://jsfiddle.net/duopixel/qD5XX/

There are a few answers already, but here is my solution:
I use opacity: 0 and visibility: hidden. To make sure that visibility is set before the animation, we have to set the right delays.
I use http://lesshat.com to simplify the demo, for use without this just add the browser prefixes.
(e.g. -webkit-transition-duration: 0, 200ms;)
.fadeInOut {
.transition-duration(0, 200ms);
.transition-property(visibility, opacity);
.transition-delay(0);
&.hidden {
visibility: hidden;
.opacity(0);
.transition-duration(200ms, 0);
.transition-property(opacity, visibility);
.transition-delay(0, 200ms);
}
}
So as soon as you add the class hidden to your element, it will fade out.

I had the same problem, because as soon as display: x; is in animation, it won't animate.
I ended up in creating custom keyframes, first changing the display value then the other values. May give a better solution.
Or, instead of using display: none; use position: absolute; visibility: hidden; It should work.

You can manage to have a pure CSS implementation with max-height
#main-image{
max-height: 0;
overflow: hidden;
background: red;
-prefix-animation: slide 1s ease 3.5s forwards;
}
#keyframes slide {
from {max-height: 0;}
to {max-height: 500px;}
}
You might have to also set padding, margin and border to 0, or simply padding-top, padding-bottom, margin-top and margin-bottom.
I updated the demo of Duopixel here : http://jsfiddle.net/qD5XX/231/

The following will get you to animate an element when
Giving it a Display - None
Giving it a Display - Block
CSS
.MyClass {
opacity: 0;
display:none;
transition: opacity 0.5s linear;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
}
JavaScript
function GetThisHidden(){
$(".MyClass").css("opacity", "0").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', HideTheElementAfterAnimation);
}
function GetThisDisplayed(){
$(".MyClass").css("display", "block").css("opacity", "1").unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend");
}
function HideTheElementAfterAnimation(){
$(".MyClass").css("display", "none");
}

When animating height (from 0 to auto), using transform: scaleY(0); is another useful approach to hide the element, instead of display: none;:
.section {
overflow: hidden;
transition: transform 0.3s ease-out;
height: auto;
transform: scaleY(1);
transform-origin: top;
&.hidden {
transform: scaleY(0);
}
}

How do I have a div not take up space until it is timed to come in (using CSS for the timing.)
Here is my solution to the same problem.
Moreover I have an onclick on the last frame loading another slideshow, and it must not be clickable until the last frame is visible.
Basically my solution is to keep the div 1 pixel high using a scale(0.001), zooming it when I need it. If you don't like the zoom effect you can restore the opacity to 1 after zooming the slide.
#Slide_TheEnd {
-webkit-animation-delay: 240s;
animation-delay: 240s;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-duration: 20s;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-moz-animation-name: Slide_TheEnd;
-webkit-animation-name: Slide_TheEnd;
animation-name: Slide_TheEnd;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-moz-animation-direction: normal;
-webkit-animation-direction: normal;
animation-direction: normal;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
transform: scale(0.001);
background: #cf0;
text-align: center;
font-size: 10vh;
opacity: 0;
}
#-moz-keyframes Slide_TheEnd {
0% { opacity: 0; transform: scale(0.001); }
10% { opacity: 1; transform: scale(1); }
95% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.001); }
}
Other keyframes are removed for the sake of bytes. Please disregard the odd coding, it is made by a php script picking values from an array and str_replacing a template: I'm too lazy to retype everything for every proprietary prefix on a 100+ divs slideshow.

I have the same problem and solved putting everything bellow a div with position:relative and added position: absolute, top:0, left:0 to every child div.
In your case it will be like:
<div id="upper" style="position: relative">
<div id="main-div" class="animated fadeInDownBig" style="position: absolute; left:0; top:0;"><!-- Content --></div>
<div id="div1" style="position: absolute; left:0; top:0;""><!-- Content --></div>
<div id="div2" style="position: absolute; left:0; top:0;""><!-- Content --></div>
<div id="div3" style="position: absolute; left:0; top:0;""><!-- Content --></div>
</div>

Resources