CSS Transition Flicker Replacing Background Image and Inverting Text - javascript

I apologize in advance if this is a simple question, but I am a novice and am having an extremely difficult time resolving a glitch that occurs when triggering a CSS transition on mouseover.
I am using JS to trigger an inversion of color and background images based on the position of the mouse on the screen. If a user moves their mouse to the bottom 50% of the screen, the JS adds the class 'white' to the tag.
This changes the color of all text on the page and loads a different background image.
I think that I am facing two issues:
After the initial page load, the transition flickers once. I believe this may be because the image isn't pre-loaded. I am not sure how I can easily do this in my current situation.
When mousing between the bottom and top half of the screen quickly I notice the same type of flickering behavior. However, when I allow the transition to complete, I can move between both states smoothly without flickering. I cannot understand what is causing this inconsistent behavior.
Live page | Fiddle demo
<style>
#home {
background-color: #191919;
background: url(../img/Profile1.jpg) no-repeat center center fixed;
background-size: cover;
transition: all 900ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#home.white{
background-color: white;
background: url(../img/Profile2.jpg) no-repeat center center fixed;
background-size: cover;
}
</style>
<div id="split-container">
<div class="split-top">
<div class="container-s">
<div class="row">
<div class="col-12">
<h1 class="center offwhite">A UI/UX designer dedicated to creating thoughtful digital experiences.</h1>
</div>
</div>
</div>
</div>
<div class="split-bottom invert-trigger">
<div class="container-s">
<div class="row">
<div class="col-12">
<h1 class="center offblack">An avid traveller seeking new perspectives and meaningful connections.</h1>
</div>
</div>
</div>
</div>
</div>
<script>
winWidth=$(window).width();
if (winWidth >=752) {
$('.invert-trigger').hover(function(){
$('body').addClass('white');
}, function(){
$('body').removeClass('white');
});
$('.invert-trigger').hover(function(){
$('.invert').addClass('black');
}, function(){
$('.invert').removeClass('black');
});
}
});
</script>
Thank you for any help you can provide to resolve these challenges!

"Quickly" in this case is when you move the mouse before a transition has completed.
There are many ways to deal with this.
One example is to toggle a parameter indicating whether or not the animation is ready. You can then toggle the parameter to ready = false when you start the animation and use setTimeout() to toggle it back. This way the animation will always be completed before you can trigger it again.

I have changed your script a little bit. I hope it's still readable for you.
$(document).ready(function() {
if($(window).width() >= 752) {
$('.invert-trigger').on('mouseover', function() { // One .mouseover() event
$('body').addClass('white');
$('.invert').addClass('black');
}).on('mouseout', function() { // One .mouseout() event
$('body').removeClass('white');
$('.invert').removeClass('black');
});
}
});
The flickering of the image, comes from the fact the image is not loaded in the DOM yet.
This can be solved by pre-loading the image.
var img = new Image();
img.src = 'your_image_url.jpg';
I hope this helps you on your way.

I'd be inclined to use a :before pseudo-element on your body tag with the alternative color and background image already applied to it and with an opacity of zero, and toggle opacity in your hover handlers. It'll lay behind your other content. Then the image would (hopefully, depending on size and network speed) load before the initial transition.

Related

Prevent browser viewport from sticking to bottom when page height increases in runtime?

Modern browsers seem to have a feature where the viewport sticks to bottom when page height increases. What actually happens is that browser scrolls the viewport at the same rate as height being increased when initial position is at (or very close to) the bottom of the page. This results in appearance as if page is expanding upwards instead of downwards.
How can this feature be disabled for a certain page using CSS or JS, so that the page would always visually expand downwards?
This of course, also happens when added element's height is expanded animated. For this reason, if possible, I would want to avoid resetting scroll position afterwards to prevent visible jump. The demo of this "feature" (that seems to happen only within rare conditions) interacting with the viewport and drop animation can be observed in the gif below.
I know there must be a way, otherwise every site with infinite scroll would suffer from an infinite loop. Counter argument: Chrome appears not to do this for containers that surpass certain height limit. So maybe infinite-scroll sites don't even bother addressing this in their sites.
Check this fiddle. You can observe that in Chrome, the first container snaps to the bottom, while the other divs has a scroll relative to the top. In Firefox or IE 11, you cannot observe this behavior.
This happens when the top bound of the last element on a scroll container is above the top bound of the container. The browser decides that the last element is what the user is interested in and decides to stay in that position.
The last div doesn't snap to the bottom because the scroll happens relative to the top bound of the last element and the last element is growing.
If you want a different behavior, I would not suggest handling it with Javascript, but I would suggest changing your layout considering these rules. For example the last div should be the growing one, instead of the previous siblings of it.
Obligatory code:
var div = document.querySelectorAll('.growing');
var height = 500;
setInterval(function(){
height += 100;
div[0].style.height = height + 'px';
div[1].style.height = height + 'px';
div[2].style.height = height + 'px';
},1000);
.start, .end{
height: 110px;
}
.start{
background: red;
}
.end{
background: green;
}
.growing{
background: yellow;
}
.cnt1,.cnt2,.cnt3{
overflow: auto;
border: 5px solid black;
margin: 5px 0;
scroll-snap-type: mandatory;
}
.cnt1{
height: 100px;
}
.cnt2{
height: 120px;
}
.cnt3{
height: 100px;
}
<div class="cnt1">
<div class="start"></div>
<div class="growing"></div>
<div class="end"></div>
</div>
<div class="cnt2">
<div class="start"></div>
<div class="growing"></div>
<div class="end"></div>
</div>
<div class="cnt3">
<div class="start"></div>
<div class="end"></div>
<div class="growing">
Content
</div>
</div>
Edit:
If the bounds of the growing div is in the visible area, the scroll is relative to the top of the growing div. So you can hack CSS to show the growing div, but actually not show it.
In this fiddle I have used two different CSS hacks. First one is adding a negative margin bottom and a positive padding bottom at same amount. The second hack is adding an :after element to the growing div but hide its visibility.
for click events, use blur, avoid scrollTo
It seems like this issue is focus-related. I came across a similar bug and when the element that triggered a height change was switched to an unfocusable element, like a div, the screen jumping disappeared. This clearly isn't a great solution because we should be able to use buttons! It also implicates focus in this strange behavior. Further experimentation led to blurring the trigger element before the height change, which solves the problem without moving the viewport. I've only tried this with click events so I'm not sure if it works for drag n drop.
codepen that showcases viewport jumping with accordions and a blur fix
function handleClick(e) {
e.currentTarget.blur();
// code to change height
}
Do you mean that when you scroll to the bottom, and a piece of content gets added, you stay at the bottom? Because the solution for that is real simple:
Option 1
Store the current scrolloffset to the top (eg how many px you've scrolled down)
Add new content
Set scrolloffset to the top to the stored value
Those last two steps can be done so fast that the user wont notice.
Option 2
Not 100% sure this works, but i'm guessing it does:
When the visitor scroll to the bottom, always scroll them back 3px. This way, they're not at the bottom at the point where new content gets added, so the browser stays where it is.
As per my understanding regarding your requirement, I have given a working jsfiddle sample.
Hope it would help to you.
If you expect something more, feel free to add comment.
Cool!
$(function(){
var height = 200;
var pos = 0;
setInterval(function(){
if($(document).height() >= $(window).height()){
var height = $('.container1').height();
$('.container1').height(height + 20);
pos = pos + 20;
$(window).scrollTop(pos);
}
}, 1000);
});
.container1 {
border: 1px solid #ccc;
min-height: 200px;
background: #ccc;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<p>11</p>
<p>12</p>
<p>13</p>
</div>
All of your draggable elements are in a container with no auto overflow, when you drag and drop your elements the whole page scrolls due to dragging.
Instead of that do as:
<div class="container">
<!-- Place all your draggable elements here -->
</div>
set a max-height and overflow of the container class as:
.container {
max-height: 400px;
overflow: auto;
}
Now when you drag and drop your elements, instead of the whole page, the only container will scroll.
After implementing this solution, it will look like this.
Before dragging.
While dragging.
Hope this helps you.

Full background image initially fixed, then scrolls when DIV content ends

I'm trying to figure out how to have a full background image (background-size: cover) be fixed initially (the text over the image scrolls while the image stays put), but, at the moment when the user scrolls down to the end of the content (like a tall block of text), the background then scrolls up revealing a new section/div below.
For example:
<section id="top-section-with-fixed-bg">
<div class="tall-content-1500px">
<p>Text that's really tall</p>
</div>
</section>
<section id="next-section">
...
</section>
But, again, the background image is fixed until the user has scrolled down 1500px and the content for that section/div is done. At that point, the user continues to scroll and the background image scrolls up.
Not, as with parallax solutions, with the background image being covered by the next section. But the background image going up with the scroll.
I'm thinking this takes some javascript, jQuery fixing, but I'm still a bit novice with it. I'm a designer just wanting a site to look and act this certain way. I'm guessing I have to recognize the height of the content, where that ends, and then either tell the CSS to switch from fixed to scroll (without effecting the position of the image), or having the js move the image up with the scroll action.
Update: Here's a quickly tossed together jsfiddle
UPDATED UPDATE:
I think I've found the solution!
With the pointers provided in responses here, then some digging around, I have it kind of working.
I started with trying to figure out how to detect the window height. I plug that into the text/content DIV, using that value for the DIVs height. This is important, to set the container for the text to the height of the user's window, not to a specific height. Then, I set that DIV to overflow: auto (and hide the scrollbar, for aesthetics). That allowed me to set a trigger so when the end of the content in that DIV is reached, the background-attachment is changed from fixed to scroll.
And, voila! It's not perfect, and I'm sure some real javascript/jQuery experts will right my wrongs on it, but I like how far I've gotten with this so far.
I realize that the swtich from fixed to scroll is probably unnecessary. At the moment, when the switch happens, the image jumps a little to adjust to the window size and its own position, now being set to scroll. If I set the CSS originally to fixed, and make sure the content of the DIV (using padding wisely) to cover the window, as the user scrolls with the mouse the correct action will occur: text scrolls until there is no more text, then the image scrolls up.
Check it out and look forward to help and comments.
jsfiddle
have you set background-attachment:fixed;? This makes background images 'move' with the browser scroll. Be careful when it comes to devices though as this method can cause 'laggy looking sites' because there's too much render for the device (depending on image).
I personally target 'large' and 'modern' browsers with this:
#media query and (max-width:600px){
.top-section-with-fixed-bg{background-attachment:fixed;}
}
EDIT:
sorry I didn't fully understand the question. Here's some CSS to get you going
window.addEventListener('scroll',function(){
//document.body.scrollTop would be the windows scroll position.
if(document.body.scrollTop==1500px)
document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='static';
}else document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='fixed';
});
I'm very sorry but this is very basic. I'm about to finish work. The function could use a bit of sprucing up a bit like making it dynamic. This is also only native JS. So it's not all that fancy but you get the idea. When the document.body.scrollTop is at the bottom of your element. Which I'm guessing is 1500px tall? IF not use offsetHeight(). That'll give you the complete height of the element including padding and margins and I think borders as well?
I'd set your background images to background-position: fixed; then put the next background image at the bottom of the text so it overlays on top of the first div. Problem is you can't have the nice <section> structure you had going before.
<style type="text/css">
.section-with-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
#bg-1 {
background-image: url("./background-1.jpg");
}
#bg-2 {
background-image: url("./background-2.jpg");
}
#bg-2 {
background-image: url("./background-3.jpg");
}
</style>
...
<body>
<div id="bg-1" class="section-with-fixed-bg">
<p>Text that's really tall</p>
<div id="bg-2" class="section-with-fixed-bg">
<p>Next section of text that's really tall.</p>
<div id="bg-3" class="section-with-fixed-bg">
<p>Next section of text that's really tall.</p>
</div>
</div>
</div>
I haven't tested this but it should cause the new image to overlap the old one, at least in theory.

Make div non-transparent to cover original div

I have a div "whitebox" which is basically a div that should cover my original "stimuli" div. It goes smooth and appears nicely, yet it does not cover the original div but seems to be transparent so that I can still see my original div though it. But I want it to be covered completely.
Apparently 'opacity' does not fix it.
<div id="stimuli"> Just press B and get started... </div>
$("#whitebox").fadeIn("fast").delay(500).fadeOut("fast");
CSS:
#whitebox{
background: #fc3a54;
opacity: 1;
position:absolute;
height: 80%;
width: 70%;
}
Is there a simple trick to fix the transparency issue with my code above, or any other hints?
try using an image with #fc3a54 colour instead of using the background function, you can then use z-index to insure your whitebox is in front
Are you positive #whitebox is covering #stimuli? Also, jQuery fadeIn and fadeOut will toggle the display property so if you start with an element that has display:none and run fadeIn on it it will show it. You can use fadeToggle (https://api.jquery.com/fadeToggle/) as well.

Changing the background-Image using Jquery causing a flickering kind of effect

Following is the portion of the script which I am using to create a slider by changing the background image for every imageobject I have for a cycle of time.
#Sliderimg - height is 500px,
$("#Sliderimg").css({
"background-image": "url(../Images/" +SliderImageObj.image + ")",
"display": "block",
"z-index": "50px"
});
What could have gone wrong with this as I'm getting the flickering effect every time I change the image, My problem is not with the new image about to load, its flickering(flashing on to the bottom of the screen) for the old image which is about to be replaced.
You see a flicker because every time you change the background image, your browser has to download it before it can show the background. If the images aren't too big (more than say, 5kb) you can try caching them in the browser by applying them to elements where they won't show up.
Also, 50px isn't a valid z-index, that property requires integers only.
Maybe delete "px" from your z-index atribute? It take decimal values.
the browser is forced to redraw the entire background.
how this is done is by setting background to white and then redrawing the new background.
use jquery.animate() to battle this.
I had the same issue the other day. Oddly enough, it seemed to be OK in FF, but would flicker in IE, Chrome, and sometimes Safari. The solution is to use a css sprite sheet. You create an image that has both backgrounds next to each other. You only show a portion of the background sheet. you toggle it by adjusting the margin on the background. You can handle the margin adjustments using addClass and removeClass. Below is code, see here for a fiddle: http://jsfiddle.net/fMhMY/
CSS
.navButton span{
width:32px;
height:32px;
display:block;
}
a.leftButton span, a#leftButton span{
background-image:url(Prev.png);
background-position:-64px 0px;
}
/*nav button sprites */
/*sprite order is pushed, hover, natural */
a.leftButton.navOver span, a.rightButton.navOver span{
background-position:-32px 0px;
}
a.leftButton.navPressed span, a.rightButton.navPressed span{
background-position:0px 0px;
}
HTML
<div style='display:inline-block'>
<a href="javascript:void(0);" class="leftButton navButton" id='lefty'>
<span></span>
</a>
</div>
jQuery
$('.leftButton').mousedown(function() {
$('.leftButton').addClass('navPressed');
console.log('mousedown');
});
$('.leftButton').mouseup(function() {
$('.leftButton').removeClass('navPressed');
console.log('mouseup');
});
$('.leftButton').hover(function() {
$('.leftButton').addClass('navOver');
console.log('hover');
});
$('.leftButton').mouseout(function() {
$('.leftButton').removeClass('navPressed').removeClass('navOver');
console.log('mouseout');
});

Can I animate the opacity of a CSS background-image?

CSS/Javascript is not my strong point so I would like to ask if is possible to change the background-image opacity to, let's say, 0.5.
I have a div with
background-image: url(images/nacho312.png);
background-position: -50px 0px;
background-repeat: no-repeat no-repeat;
but when I load a certain view it does not look very good, so I want to have a "half-disolve" effect when that view is shown. Is it possible?
Thanks
Here is a start.
var element = document.getElementById('hello'),
targetOpacity = 0.5,
currentOpacity,
interval = false,
interval = setInterval(function() {
currentOpacity = element.getComputedStyle('opacity');
if (currentOpacity > targetOpacity) {
currentOpacity -= 0.1;
element.style.opacity = currentOpacity;
} else {
clearInterval(interval);
}
}, 100);
See it on jsFiddle.
Run this on window.onload = function() { } or research cross browser on DOM ready events.
Of course, it is much easier with a library like jQuery.
$(function() {
$('hello').fadeTo('slow', 0.5);
});
This relies on your container's children inheriting the opacity. To do it without affecting them is a bit of a pain, as you can't reset children's opacity via opacity: 1.
If you want to animate smoothly and without doing too much extra work - this is a good task for jQuery (or another, similar library).
With jQuery you could do:
$('#id_of_div').fadeTo('fast', 0.5);
To get a fast animated fade effect on the relevant DIV.
Update: if you want to actually fade the background image, but not any foreground contents of the DIV, this is a lot harder. I'd recommend using one container DIV with position:relative and two inner DIVs with position:absolute; . The first of the inner DIVs can have the background image and a lower z-index than the second of the DIVs, and the second DIV would contain any text, etc. to show in foreground. When needed you can call $('#id_of_first_div').fadeTo('fast', 0.5); to fade just the DIV containing the background image.
By the way, the literal answer to your question is "No, you cannot animate the opacity of a CSS background image" - you can only (currently) animate the opacity of a DOM element, not its attributes, thus the need for the above hack.
Other Update: if you want to avoid using any third-party library, you can handle the fade of the background DIV using approach in Alex's answer.
background-image: url(images/nacho312.png);
background-position: -50px 0px;
background-repeat: no-repeat no-repeat;
opacity:0.5; //for firefox and chrome
filter:alpha(opacity=50); //for IE

Categories

Resources