The CSS background-attachment: fixed; does not work on mobiles because it takes a performance hit or something like that.
Is there an alternative for this that fully works on mobile?
I tried this:
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('div#home').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
But that was very choppy on my Mac using chrome, so I didn't even bother testing on my iPhone.
I see many plugins for a parallax effect but can't find any that work on mobile. I saw some previous questions on this and other forums but those links were either dead or outdated now.
In our ever advancing world, have apple been bothered to render stuff properly?
Basically...
Is there a fix to background-attachment: fixed that works on all devices including mobile?
Code from dmoo's link:
div#home {
color: #404040;
/*
background: linear-gradient(to bottom, rgba(0,0,0, 0.375) 0%,rgba(0,0,0, 0.375) 100%), url(/images/sp-bg.jpg);
background-size: cover;
*/
overflow: hidden;
position: relative;
}
div#home:before {
content: ' ';
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
background: url('/images/sp-bg.jpg') no-repeat center center;
background-size: cover;
will-change: transform;
}
Related
I am creating a home page for a website and I am attempting to copy part of the background img to use as a nav link so i can manipulate it. When i design the page every thing will look good but when i view on different screens the overlay is thrown out of align.
I have tried to implement screen.width and screen.height, from JavaScript, to capture the sizes and pass them as a var into HTML code. Then i use HTML top % and left/right %
to adjust the overlaying nav to match up with the background img.
<script>
//capture the screen size
var w =screen.width;
var h = screen.height;
</script>
<style>
body {
background:url("screen.jpg")no-repeat left top fixed;
background-size: w h;
}
#b1{
background-size: 180px 70px;
background: no-repeat left top fixed;
padding: 130px 50px;
color: white;
text-align: center;
background-image: url("b1.png");
margin: 0;
position: absolute;
top: 55.3%;
left: 11.5%;
transform: translate(-50%, -50%);
Does anyone have a fix for this? is it a HTML or JavaScript issue?
#JohnLiebig a couple of things. When you are working within CSS you should not be using HTML or JS related variables/methods. If you would like to use CSS variables the formatting can be found here.
The below snippet was found on MDN under 'background-size.'
.foo {
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
I am a bit new to coding. I have a div with a background image. I want to be able to change the image from its blurred version to a clearer version as I scroll down. My HTML code is like this:
<div class="intro">
<div class="blur" style="background-image: url("blurimage.png");"></div>
<div class="clear" style="opacity: 0.00666667; background-image: url("image.png");"></div>
</div>
My CSS code is like this:
.intro{
display: table;
width: 100%;
height: 700px;
position: relative;
}
.blur{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -10;
background-color: #222;
}
.clear{
background-size: cover;}
I have tried using many javascript functions but no avail. Please guide me as to how can I do this by using a Javascript function.
Thanks!
Using JavaScript you could try
document.addEventListener("scroll", function(event) {
// this code is executed each time the user scrolls
var scrollPosition = window.pageYOffset;
// scrollPosition is 0 at the top of the page
// it contains how many pixels have been scrolled down
});
Hope that helps.
Add this to your JS file (I assume you have jQuery included as well):
jQuery(document).ready(function($) {
scrollPosition = $(document).scrollTop();
$('body').scroll(function() {
$('.intro .clear').animate({
height: scrollPosition,
}, 300);
});
});
Also add this to .clear:
.clear {
position: absolute;
top: 0;
left: 0;
height: 0;
background-size: cover;
}
Also keep in mind that this code will work if you have your image on top of the page. Otherwise feel free to change $(document).scrollTop() with the actual selector of the parent element.
I would also recommend renaming the clear class with some other name, since if you decide to use CSS framework or plugin at later point, that class name might be reserved for clearfix styles.
see here jsfiddle
made a simple example with changing the background-color . this is for example purposes only because i can't use your images
also...you need only 1 div inside the intro and toggle classes on that div from .blur to .clear and vice-versa and use CSS to style those classes.
the idea is that you have only one div w to which you change the background depending on the scroll
HTML :
<div class="intro">
<div class="blur"></div>
</div>
CSS :
.intro{
display: table;
width: 100%;
height: 700px;
position: relative;
}
.intro div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -10;
}
.blur{
background-image: url("blurimage.png");
background-color: red;
}
.clearimg {
background-size: cover;
background-color:blue
background-image: url("image.png");
}
JQ :
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
$(".intro div").addClass("clearimg")
$(".intro div").removeClass("blur")
}else{
$(".intro div").addClass("blur")
$(".intro div").removeClass("clearimg")
}
});
Hi guys I was trying to swap the background of two images down the footer section of my website using skrollr.js (https://github.com/Prinzhorn/skrollr). For some reason it won't scroll at all. I am trying to create a parallax site that has fixed position on the part below.
See image: http://prntscr.com/6yrckx
Here's the Markup of that part:
<div id="starynight"
data-bottom-top="opacity: 1; background: !url(images/sunny.jpg); background-size: cover;"
data--40-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--50-top="opacity: 0; background: !url(images/night.jpg); background-size: cover;"
data--60-top="opacity: 0.5; background: !url(images/night.jpg); background-size: cover;"
data--70-top="opacity: 1; background: !url(images/night.jpg); background-size: cover;"
>
</div>
While here's the CSS:
#starynight{
background: url('../images/sunny.jpg') no-repeat center;
width: 100%;
height: 307px;
background-size: cover;
}
#road{
background: url('../images/road.jpg') no-repeat center;
width: 100%;
height: 145px;
background-size:cover;
}
#car{
background: url('../images/car.png') no-repeat center;
width: 325px;
height: 125px;
display: block;
position: absolute;
z-index: 9999;
left: 950px;
top: 2100px;
}
My issue here is that when I scroll this part of my website it should swap the images of the sunny.jpg and night.jpg while the car is moving from right to left and also this background image must be fixed in position. For some reason my codes won't just work. Any idea what went wrong?
See my website here: http://goo.gl/aNOCiJ
Animating backgrounds is not like animating positions or "number" data. You can't just transform one background into another by fading them (actually Firefox somehow can animate the transition, but lets not depend on that).
A solution to your problem is having 2 diferent divs for, 1 for your night scene, and other for your sunny sky just in the same position, one over the other and with the sunny one with a higher z-index.
Then what you need to animate on scroll is the opacity of the sunny sky, what makes the night scene appear.
Also I found that your level of scroll isn't enough to fade the opacity of the sunny sky completly, it ends in 0.603448.
Hope it helps, please tell me if this worked.
As stated already, background images can't be animated, only background colors. So you'll have to lay both images on top of each other and fade the top layer in like this -
*Untested
#starynight-wrap {
position: relative;
width: 100%; height: 307px;
}
#starynight-day {
position: relative;
width: 100%; height: 100%;
background: url('images/sunny.jpg');
background-size: cover;
}
#starynight-night {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: url('images/night.jpg');
background-size: cover;
}
<div id="starynight-wrap">
<div id="starynight-day"></div>
<div id="starynight-night"
data-bottom-top="opacity: 0"
data--50-top="opacity: 0;"
data--60-top="opacity: 0.5;"
data--70-top="opacity: 1;"
>
</div>
</div>
On this site (Chrome is ok) I'm trying to implement Fluidbox ... a beautiful, minimal lightbox (jQuery) with a clever imageloading trick.
CSS:
.fluidbox {
outline: none;
}
#fluidbox-overlay {
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 500;
}
.fluidbox-wrap {
background-position: center center;
background-size: cover;
margin: 0 auto;
position: relative;
z-index: 400;
transition: all .25s ease-in-out;
}
.fluidbox-opened .fluidbox-wrap {
z-index: 600;
}
.fluidbox-ghost {
background-size: cover;
background-position: center center;
position: absolute;
transition: all .25s ease-in-out;
}
One way or another it seems that the z-index(es) doesn't put the lightbox (image) on top of everything. It looks as if the enlargement is 'captured' in it's own HTML ... !?
Some help is highly appreciated.
++++
Partly solved ... the CSS of the menu (ScrollIt.js) was interferring (z-index) with the CSS of Fluidbox. Now Fluidbox is working and is on top of every element except the fixed menu. That's a pity ... and I don't know how to solve that. I will ask the devs.
Fluidbox author here.
According to the docs, you can either (1) alter the stackIndex setting of Fluidbox so it is greater than that of the fixed navigation menu, or (2) reduce the z-index value of the said fixed navigation menu.
v1.4.1 was released yesterday so it probably contains some crucial bug fixed since the version you're using was released.
I am adding a dark shadow (as a before element) to a div on touch/click And removing it after the effect is done.
First click seems to be fine but on subsequent clicks, the effects gets darker and darker (until it gets to complete black).
It is as if there are multiple layers of before's
The only solution I have found so far it to setup the div's display property as "display: block" but this required me to do some layout rework. Any other suggestions ?
Here is the class I am using to set the highlight
.myDivCls:before
{
background-repeat: no-repeat;
background-size: 100% 100%;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
opacity: .3;
background-color: rgb(0,0,0);
}
And her is the one for removing it:
.noEffectCls:before {
content: '';
background-color: transparent;
background-image: none;
position: static;
border-radius: 0;
background-size: auto auto;
background-repeat: repeat;
background-position: 0% 0%;
-webkit-background-size: auto auto;
}
Thanks!
Have you tried using a the background shorthand prooperty on the .noEffectCls:before element and setting it to transparent?