I am trying to fade in a new background of a header when the user scrolls down. I would like it to fade in smoothly on top of the original background.
Instead what is happening, is that it is removing the original background and then fading in the new one. This makes the transition look ugly when the user scrolls down...
HTML
<div id="navbar" class="navbar">
</div>
CSS
#navbar {
transition: background 0.5s ease-in 0s;
}
.navbar {
background: url("images/nav-bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 75px;
margin: 0 auto;
max-width: 1600px;
width: 100%;
position: relative;
z-index: 1;
}
.navbar.fade-blue {
background:#566c75;
}
JS
jQuery(document).ready( function() {
jQuery(window).scroll(function() {
if ( jQuery(window).scrollTop() > 20) {
jQuery(".navbar").addClass("fade-blue");
}
else {
jQuery(".navbar").removeClass("fade-blue");
}
});
});
EDIT: I changed the .fade-blue class as I had two background rules there, I am attempting to fade a background image into a colour.
If you want to fadeIn/fadeOut your background imgae (A) with another one (B), you need to put both in a separate div, and apply to those the opacity transition.
If you need only to fadeOut your backgorund image, you can only put it on separate element inside parent container, and apply to that the opacity transition.
Here an example
How to fade in background image by CSS3 Animation
Related
I created a little aniamtion in JS by using bounding client. Once I scroll down until the text/content appears, I change its opacity to 1 by applying ".active" from CSS. And when I scroll up above the element again, opacity changes back to 0 (because ".active" gets taken away).
The problem is I want to make the same thing happen when I scroll up to the content element from below. Once the user goes below the content element, opacity should go to 0, then when they scroll back up (so the content element is again in view), opacity should go to 1. So it makes the animation work in both directions, something like on scrollrevealjs's front page.
document.addEventListener('scroll',()=>{
let content = document.querySelector('.text');
let contentPositiontop = content.getBoundingClientRect().top;
let screenPosition = window.innerHeight ;
if (contentPositiontop < screenPosition){
content.classList.add('active');
}
else{
content.classList.remove('active');
}
});
.text{
transform: translateX(700px) translateY(1000px);
font-family: Inter;
font-weight: 800;
font-size: 40px;
opacity: 0;
transition: all 2s ease;
position: absolute;
}
.active{
opacity: 1;
}
You just need to check the height of the bottom of the content element as well as the top.
(For the top, we needed to add in the screen height (window.innerHeight) because we were comparing its position to the bottom of the screen. We don't need this for the bottom because we are comparing its position to the top of the screen, which has a vertical position of 0.)
When both the bottom and the top are in range, we show the content element.
(If the content element's height were greater than the height of the screen for some reason, you would have to choose values between 0 and window.innerHeight to use to trigger the transition.)
document.addEventListener('scroll',() => {
const
content = document.querySelector('.text'),
top = content.getBoundingClientRect().top,
bottom = content.getBoundingClientRect().bottom;
if (top < innerHeight && bottom > 0){
content.classList.add('active');
}
else{
content.classList.remove('active');
}
});
.spacer{ height: 104vh; }
.text{ height: 100vh; background: blue; transform: translateX(20px); opacity: 0; transition: all 2s ease; }
.active{ opacity: 1; }
<div class="spacer"> </div>
<div class="text"></div>
<div class="spacer"> </div>
.
I am sitting with a project in need of an overlay which fades out when hovered upon and goes to display: none (not visibility: hidden, it does need to be display: none).
The setup is a big confusing, but I will try to explain it:
The overlay comes up when I hover a menu point under my mega menu. When I move the cursor to the overlay it should naturally dissapear and the menu close.
This works very well with this code:
var element = document.getElementById("overlayed");
function mouseOver() {
element.classList.add("mystyle");
setTimeout(function() {
element.classList.remove("mystyle");
}, 500);
}
push {
position: absolute;
top: 50%;
}
.overlayerstwo {
position: fixed;
width: 100%;
top: 30%;
left: 0;
right: 0;
bottom: 0;
background: #111;
opacity: 0.5;
z-index: 2;
display: block;
visibility: visible;
}
.mystyle {
display: none;
animation-name: fadeOut;
animation-duration: .5s;
}
#keyframes fadeOut {
0% {
opacity: .5
}
100% {
opacity: 0;
}
}
.mystyler {
display: none;
}
<h1>Here is something. Overlay comes back when hovering me!</h1>
<div class="overlayerstwo" id="overlayed" onmouseover="mouseOver()"></div>
<div class="push">
<p>Here is an item being overlayed</p>
</div>
With this setup the overlay dissapears right away. I am trying to merge it with the fadeOut keyframe animation before it goes black. I have tried different tactics, like adding a second timeout event but all it does is loop through and end up showing the overlay permanently after.
So the order I want to achieve is as follows:
Add a class that fires the keyframe animation fadeOut for .5 sec
Remove keyframe animation class
Add display: block class
Remove display: block class (essentially resetting it, so you can get the overlay up again by hovering its triggerpoint)
So my question is, how do I get all of these to fire every time I hover over the overlay?
One of the things I tried was this:
var element = document.getElementById("overlayed");
element.classList.add("mystyle");
setTimeout(function(){
var element = document.getElementById("overlayed");
element.classList.remove("mystyle");
}, 500);
setTimeout(function(){
var element = document.getElementById("overlayed");
element.classList.add("mystyletwo");
}, 500);
setTimeout(function(){
var element = document.getElementById("overlayed");
element.classList.remove("mystyletwo");
}, 510);
With the css
.mystyle{
animation-name: fadeOut;
animation-duration: .5s;
}
.mystyletwo{
display: block;
}
Which did not work. I hope someone can help me figure out how to get it to work!
if the timeline will be like this: visible -> hover -> animation -> opacity to 0 -> display: none
using CSS with JS logic:
element.addEventListener("mouseover", function() {
element.style.opacity = "0";
element.style.transition = "all 0.3s";
// when finish the animation then call display none
setTimeout(function() {
element.style.display = "none";
}, 300); // put the same number (milliseconds) of duration of transition (or more, not less)
});
using this method you don't need to complex your code...
the trick really is because we use element.style
that is only put the CSS, but technically...
if there is a transition Javascript don't know it,
so it will run the setTimeout() directly after adding styles,
so now CSS will do the animation but javascript will quietly continue the code (which in our case, says that after 300 seconds add display: none;)
I have this issue.. I want to be able to use
.custom-forums {
height: auto;
width: 100%;
border-image-source:transparent url("../images/forums.png") center top no-
repeat;
}
with
.custom-forums:hover {
background-image: url('../images/forums-hover.png');
}
The issue is this: When width is set to 100% it simply does not show the image. But when width and height are set to 170px it does work. I would like to have the button resize based on screen resolution and retain the ability to have the hover image change.
Much gratitude,
Mas21
Background images require a predefined height or content of a certain height in its container in order to work.
I had a thought you could do this another way:
Use a background image
Put another image in that div and on hover set it to opacity 0, or your preference and the bg image shows
Run this example:
.container {
background: url('http://placehold.it/199x199') no-repeat center center;
width: 200px;
}
img {
transition: opacity ease-in-out .5s;
}
img:hover {
opacity: .25;
}
<div class="container">
<img src="http://placehold.it/200x200">
</div>
I am trying to add background color to the overall image slider located at http://192.241.239.235 so that it looks like
.
I have tried adding the style attribute
background-color: rgba(0,0,0,0.6);
overflow: auto;
to the
<div id='content'>
but the background color just does not show.
You already have an overlay on your slides that you can change here: .tp-banner ul li:after. And I see that you need to give it a higher ´z-index´ to make it appear above the video in the slideshow.
/* The fullscreen video */
.tp-caption.fullscreenvideo {
z-index: 0;
}
/* The covering black */
.tp-banner ul li:after {
background: rgba(0,0,0,.6);
z-index: 1;
}
/* All slideshow content */
.tp-caption {
z-index: 2;
}
My purpose is to transition a div to width and height 0 thus gradually making it not visible to user.
I have the following absolutely positioned div:
<div id="main" style="width: 200px; height: 100px; left: 648px; top: 253px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div>
When user presses on close div, I attach to the "main" div the following css class:
.collapseRecommendation {
-webkit-transition: all 1.0s ease-in-out;
-moz-transition: all 1.0s ease-in-out;
-o-transition: all 1.0s ease-in-out;
transition: all 1.0s ease-in-out;
}
and in the javascript (extjs) code set the div's width and height to 0:
mainDiv.setStyle('width', '0px');
mainDiv.setStyle('height', '0px');
and I also set the "main" div different left and top position which does work as expected.
However only the "main" div height and width are set to 0, but the internal's div size doesn't change and it stays on the same place and visible to the user, so after the transition i have the following:
<div id="main" style="width: 0px; height: 0px; left: 348px; top: 153px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div>
As you see the internal div still has size 200x150.
What can be the reason it didn't become o size as well?
Thanks
We shouldn't expect the child div's size to change, should we?
When it comes to block elements like divs, their width only depends on their parents' width because most browsers treat block elements as if they have width: 100% set on them. However, when you explicitly set the styling, this treatment is overridden and their dimensions behave entirely independently of one another.
This JSFiddle shows the behavior of nested divs when you do and don't specify their widths. If you click the divs, you'll see them resize. The top divs resize independently; the bottom divs remain the same width. Again, this is because the width wasn't explicitly declared.
The solution is to programmatically change the dimensions of each child div. To do this, you could just loop through the children and set all of their dimensions. The code might look something like:
var children = mainDiv.childNodes;
for( i = 0; i < children.length; i++ ) {
if ( children[i].nodeType == 1 ) {
// Do something with children[i]
}
}