Develop Reference

Repeated 2-layer css parallax background in Firefox with css "transform" and "perspective" (background not cut off at content height)

You are my last hope.
I decided to implement an update to the Page of my brothers store. One of the new features I wanted was a (simple^^) parallax background with two layers to create a kind of 3d-feeling while scrolling.
First I got it to work with a little bit of JS, adjusting the position on scroll events with a multiplicator. Then I noticed that the performance of the background is sticky, laggy, stuttering and doesn't really look well in Firefox. As far I could see this was because of the "Asynchronous Panning"-Feature of the browser.
Link to the JS-Version of the page update
So after a little time with the search engine of my choice I saw no option to disable or work around that feature and decided to start working on a CSS-only implementation on that site.
And guess which browser is not able to display everything as wanted? Firefox!
First I stuffed all my content into divs, so that - so my hope - a mutual parent div would enable me to use "height: 100%;" to scale the div's together. That didn't work as the the background was overflowing over my content. The problem was: Because I wanted the background images to repeat on the y-axis AND to move with a slower speed as the content I had to define a specific height of the background divs which is larger than the content height.
I even tried to set the height of the background divs with jQuery by
$(#background).height($(.main_content_container).height());
but the background always just turned out to be too large or too short.
After my idea with the parent div didn't work I started to work with the body and my content container itself to generate perspective. Could this have worked when i would've set all height to 100%? When I set height: 100%; I always got my viewport's height...
What I got now:
Creating the perspective and applying transform with body causing the overflow-y:
body {
overflow-y: auto;
overflow-x: hidden;
perspective: 1px;
width: 100%;
margin-left: 0px;
margin-top: 0px;
position: fixed;
height: 100vh;
transform-style: preserve-3d;
align-items: center;
align-content: center;
align-self: center;
text-align: left;
width: 100vw;
}
#background {
position: fixed;
bottom: 0;
left: 0;
transform: translateZ(-2px) scale(3);
width: 100vw;
background-size: 100vw;
background-image: url(websiteimage.png);
left: 0;
right: 0;
top: 0;
height: 500vh;
min-width: 100vw;
}
#background2 {
position: fixed;
bottom: 0;
left: 0;
transform: translateZ(-3px) scale(4);
background-image: url(websiteimage2.png);
background-size: 100vw;
left: 0;
right: 0;
top: 0;
height: 500vh;
min-width: 100vw;
opacity: 80%;
}
div.main_content_container {
transform: translateZ(0);
height: 100%;
background-color: transparent;
color: Silver;
max-width: 100vw;
width: 70%;
min-height: 100%;
}
In-vivo page (only startpage and only in dark mode is "working" at the moment)
Why does Chrome cut off the bottom of the background divs just as wanted and Firefox just create visible overflow?
Is there any chance to get one of my solutions to work fluent and formatted in Firefox?
I'm puzzling around for days now and thankful for every kind of idea/suggestion.
PS: This is my first post on StackOverflow. I hope I provided enough info and didn't break any rules as this site often helped me out of the hell of amateur webdesign.
PPS: I know my code is kind of a mess after all that puzzling but I'm playing around for days now

For all having the same problem:
I decided to try out several tweaks on my JS-implementation again and reached an improvement by adding
position: fixed;
background-attachment: fixed;
background-position: top;
to the background layers.
I also added a script by keith clark but I'm not sure if it takes any effect:
/*
Firefox super responsive scroll (c) Keith Clark - MIT Licensed
*/
(function(doc) {
console.log("Document executed")
var root = doc.documentElement,
scrollbarWidth, scrollEvent;
// Not ideal, but better than UA sniffing.
if ("MozAppearance" in root.style) {
// determine the vertical scrollbar width
scrollbarWidth = root.clientWidth;
root.style.overflow = "scroll";
scrollbarWidth -= root.clientWidth;
root.style.overflow = "";
// create a synthetic scroll event
scrollEvent = doc.createEvent("UIEvent")
scrollEvent.initEvent("scroll", true, true);
// event dispatcher
function scrollHandler() {
doc.dispatchEvent(scrollEvent)
}
// detect mouse events in the document scrollbar track
doc.addEventListener("mousedown", function(e) {
if (e.clientX > root.clientWidth - scrollbarWidth) {
doc.addEventListener("mousemove", scrollHandler, false);
doc.addEventListener("mouseup", function() {
doc.removeEventListener("mouseup", arguments.callee, false);
doc.removeEventListener("mousemove", scrollHandler, false);
}, false)
}
}, false)
// override mouse wheel behaviour.
doc.addEventListener("DOMMouseScroll", function(e) {
// Don't disable hot key behaviours
if (!e.ctrlKey && !e.shiftKey) {
root.scrollTop += e.detail * 16;
scrollHandler.call(this, e);
e.preventDefault()
}
}, false)
}
})(document);
Still no improvement on iOS Safari and mobile Firefox afaics.
Edit:
Thats the jQuery-function causing the effect here:
$(function() {
$(window).on('scroll', function() {
$('#background').css('background-position-y', $(window).scrollTop() * -.15);
});
});
$(function() {
$(window).on('scroll', function() {
$('#background2').css('background-position-y', $(window).scrollTop() * -.09);
});
});

Adding Flag to javascript (hasClass)

So I have images where when you click they expand (via css). However, I also want it so that when you click, the image will be pushed to the top of the page. From what I've heard is that if I use the toggleClass function then I need to have a flag before I initiate the animation, however, I can't seem to get it to function right.
$("img").on("click", function (){
$(this).toggleClass("selected");
if ($("img").hasClass("selected")) {
found = true;
}
var timeout = setTimeout(function () {
$('html,body').animate({
scrollTop: $('.selected').offset().top - 60
}, 100);
}, 5);
});

You should consider using CSS3 transition rather than monitoring using timers. You set transition to transition the top property. Then have the selected class alter the top by toggling it. The change will cause the animation to kick in. See this example:
HTML:
<div class="bar">weee!</div>
CSS:
.bar{
width: 100px;
height: 100px;
background: red;
position: relative;
transition: top 1s ease 0;
top: 100px;
}
.bar.selected{
top : 0px;
}
JS:
$('.bar').on('click',function(){
$(this).toggleClass('selected');
});

run keyframes-animation on click more than once

i have a div that it have image content .i wanna implement animation when i click in image but it do only with first click and next click in image is Ineffective.what is problem and how can i solve it?
$(function () {
$('div.c').bind('mousedown', function () {
var $elem = $(this);
$elem.stop(true)
.css({ "-webkit-animation-name": "xi",
"-webkit-animation-duration": "3s",
"-webkit-animation-timing-function": "ease",
"-webkit-animation-delay": "1s",
})
})})
and
#-webkit-keyframes xi{ 0% {
left: 100px;
}
40% {
left: 150px;
}
60% {
left: 75px;
}
100% {
left: 100px;
}}

You could reset your animation with a second keyframe block as suggested here:
Css and jQuery: How do I trigger the repositioning of a CSS3-animated element back to where it was before the animation?
Here's also a possible solution on how to reset your animation when it's completed:
Is there a callback on completion of a CSS3 animation?

How to Stop jQuery from Buffering Hover Effects?

I have two images stacked on top of each other and trying to use it for navigation. On hover I am using jQuery to fadeTo 0 and back to 1 when cursor leaves. This is working but here is my problem. If you run the mouse cursor over the list item back and forth a few times, it is buffer the effects. How do I stop it from buffer? Thanks!
Script
$(document).ready(function () {
$("li").hover(function(){
$(this).fadeTo(250, 0);
},function(){
$(this).fadeTo(350, 1);
});
});
HTML
<div id="link1img"></div>
<ul>
<li id="link1">Home</li>
</ul>
CSS
#link1 {
background-image: url(../images/home_normal.png);
background-repeat: no-repeat;
text-indent: -9999px;
position: absolute;
height: 17px;
width: 67px;
left: 0px;
top: 10px;
}
#link1img {
background-image: url(../images/home_mo.png);
background-repeat: no-repeat;
position: absolute;
height: 17px;
width: 67px;
left: 0px;
top: 11px;
}

Stop the old effects using .stop() before continuing:
$(document).ready(function() {
$("li").hover(function() {
$(this).stop().fadeTo(250, 0);
}, function() {
$(this).stop().fadeTo(350, 1);
});
});

Use .stop(true) to cancel any animations currently in progress on that object and remove them from the animation queue so your next animation can start immediately and not have to wait until the current one finishes:
$(document).ready(function () {
$("li").hover(function(){
$(this).stop(true).fadeTo(250, 0);
},function(){
$(this).stop(true).fadeTo(350, 1);
});
});
See the jQuery reference on .stop() for more info.

css background image move

I have image in website's header as background. Now, when page is loaded, I'd like to move it slowly from left to right (about 100 pixels) and then stop. Is there any not too complex way to do that?

jQuery will allow you to do that easily.
$("#theImage").animate({
left: "+=100px",
}, "slow");

You should check to make sure it only animates on the first page load, not from internal site links. I like to use jquery for this sort of thing.
// animate on first load only
if ( document.referrer == null || document.referrer.indexOf(window.location.hostname) < 0 ) {
$("#logo").animate({
marginLeft: "100px",
easing: 'swing'
}, 3000 ); // adjust your duration here (milliseconds)
} else {
// internal site link set the proper position
$("#logo").css({ marginLeft: "100px"});
}

Thanks, Rap and ghoppe! That was a helpful hint. I actually wanted to move the background image, not its container so I first set its position in css:
.top-back-image { background-position: -100px 0px; }
and then with jQuery:
$(".top-back-image").animate({
backgroundPosition: "0px 0px",
easing: 'swing'
}, 3000 );

The guys over at LaunchList have a moving background. Looking through their CSS, this is what I found. Maybe it will be of some help.
#clouds {
width: 100%;
height: 650px;
top: 200px;
display: block;
position: fixed;
background: url(../art/cloud.png) 500px 0 repeat-x;
-webkit-animation-name: move;
-webkit-animation-duration: 400s;
-webkit-animation-iteration-count: infinite;
z-index: 2;
}
Note that this will only show for webkit browsers.