jQuery Parallax Background Issue - javascript

I have the following jQuery code to animate the background images with a parallax effect.
I have two parallax images on my page and it seems the background position of the second one located further down is already way out of position. I believe it's because the scrollTop function is constantly changing from the top of the site and not to the top of the div that the background image resides.
I got the code from here https://gist.github.com/omgmog/7198844
Any ideas on how I can fix this?
I've added this to a JSFiddle here to help someone figure the issue out -
jsfiddle.net/Ls0ftxvq/
$(function() {
var $el = $('.parallax-background');
$(window).on('scroll', function () {
var scroll = $(document).scrollTop();
$el.css({
'background-position':'center '+(-.4*scroll)+'px'
});
});
$(window).scroll();
});

Why don't use just CSS for do parallax effect?
Remove your javascript and add this code in your css file
.full-heignt {
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
you have an example here based on your code

Related

Can't get fixed div to stop above the footer, what am I missing?

I have a side bar div that is fixed until a certain scroll/page height and then it becomes position:absolute.
My problem is that, when it loads in, it's at the right position and height, until I scroll and then it moves (partly due to the jQuery function). When it moves however, it makes it so it doesn't stop at the footer, but instead continues past it.
I am building this on a COS so I can't exactly recreate the problem in JSFiddle, but I can link you to the page.
CSS
/*fixed/absolute div*/
.widget-type-post_listing{
right:0;
width:50px;
position:absolute;
display;block;
background:yellow;
height:50px;
}
jQuery
$(function(){
var container = $('.widget-type-post_listing');
var minTop = $('.header-container-wrapper').outerHeight();
var maxTop = $('.footer-container-wrapper').offset().top - container.outerHeight();
$(document).scroll(function() {
container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
});
});
Here is the JS Fiddle showing a working example: JSFiddle. You can see that the yellow box (fixed/abso.div) will stick on page until scrolling to footer.
As I said above, to see the exact problem, visit the working page: Working Page
Thanks for the help everyone!
You can add a div in between footer and header surrounding the yellow div 100% width position relative and then fix the max-height of that div and set it's display to inline-flex or inline-block. I think that should so the job.
Cover-div{
width: 100%;
display: inline-flex;
position: relative;
}

how to center a random background in a javascript

I've looked on stackoverflow for a background js. After trying some I found what I thought was exactly what I need:
<script type="text/javascript">
ChangeIt();
</script>
<script type="text/javascript">
var totalCount = 8;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
document.body.style.repeat = "contain";// Background repeat
}
</script>
However, the backgrounds don't center, you just see 'em on the top left corner. So I googled on the net but... well idk anything about js, just a little few things. I'm helping a friend with his website and we're stuck on this. I'm just hoping someone with more knowledge than us can help by giving a look.
EDIT : Here's what i mean by "center" : http://i.imgur.com/G3Z9epT.png
Here's a fiddle that uses css instead of js for this, also I've added a background-size on body so the entire image is visible on all screen sizes, this is optional however - http://jsfiddle.net/dk329q1L/
Here's the css -
body {
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Entire background image always stays in view */
}
you could achive this by doing this also:
background-position: center;
To center the background add:
document.body.style.backgroundPosition = "center";
you have to set margin auto in this case ,but you have to specify width
you have to assign id :
{
width:100px;
} margin: auto;
You should set the background-position for your element, add this line to your code:
document.body.style.backgroundPosition = "center top";
The value center top means that the image will be placed center in horizontal, and will be placed at top in vertical.
jsFiddle Demo.
The below image shows other values you can use for background-position:

Part of the block disappears after applying CSS scale

I would like to zoom in div by clicking on it, but part of this block is hidden after zoom.
Demo: http://jsbin.com/xumuzine/2/edit
CSS property transform-origin: 0 0; is not suitable, because in the future I will need to track the location where I clicked and increase it to this place.
Thanks.
UPD:
Okay, guys.
I may not accurately explained the problem.
http://jsbin.com/fecaduxidele/2/edit
Here i add click event handler that receives the coordinates of the click, and makes zoom to click position.
And if I click to cell with number 9 (for example), I can't scroll my grid to cell with number 1.
You could set the content size directly instead of scaling and use background-size to scale the image with it, e.g.:
#content {
width: 300px;
height: 300px;
background: url(http://placeimg.com/300/300/any);
background-size: 100%;
}
#content.scaled {
width: 450px;
height: 450px;
/* -webkit-transform: scale(1.5); */
-webkit-transition: all .5s ease-in-out;
}
Edit:
The above already fixes the issue of not being able to scroll to part of the image. You can handle the coordinate issue with a JQuery animation (you can't control scroll position from CSS), but it will not be smooth because it does not synchronize with the CSS animation. Your click handler would be something like:
var x = event.clientX,
y = event.clientY,
$this = $(this),
scaling = !$this.hasClass('scaled');
$this.toggleClass('scaled');
if (scaling) {
$this.parent().animate({
scrollLeft: x,
scrollTop: y
}, 500);
}
Here is the result applied to your second bin:
http://jsbin.com/jikididizice/1/edit
The issue was if the parent and the child is of same size its will show a scroller as you can see in this fiddle
JS Bin
as you can see in the above fiddle i have added scroll and the width and height is same as the parent in px so the scroller is coming
the fix is you can give 100% width and height like in the example i have shown below
if you dont want the scroller to come you can remove overflow:auto from the parent
JS Bin
you can also use transform-origin property to from where you want to scale the image like i have used center center in the example below so that it will scale from center
JS Bin
Few solutions:
Remove the overflow auto of the wrapper.
http://jsbin.com/xumuzine/40/
Scale the wrapper instead of the contents.
http://jsbin.com/mojoyapamuyi/1/
You should try with zoom property:
#content.scaled {
zoom:1.2;
}

How can I force the download of unused CSS images?

This is kind of a continuation of a QUESTION I ASKED YESTERDAY and an off-shoot of THIS QUESTION.
Basically, I am using jquery to change css background images on page scroll, however on first visit, when the background changes on scroll it only starts loading then and there making for a poor user experience.
I am using cache headers so that this only happens once, but still it would be nice if it didn't happen at all.
How can I load the second CSS image before the page scrolls to make the transition seamless?
I am only trying to load this one image in the background, not preload all images on the page before display or anything...
Current code I am using...
jquery
jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('html').addClass('scrolled');
}else{
jQuery('html').removeClass('scrolled');
}
});
css
html {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}
html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}
DEMO - Scroll to see in action.
Few options here:
Add a hidden element and add your image as a background; the browser will load it and is smart enough to know that it doesn't need to reload
What I would consider the cleaner way: load your second image behind the first one:
html {
background-image: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg),
url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}
html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}
On the left side add all your images and make all of them positioned absolutely
img{
position :absolute;
z-index:1;
}
So all images will be loaded on windows load. And just change their z-index according to scroll.
One more option is there is to make ur images in a single sprite and display them by changing position..in this way u will save 1 extra http call itself. U can create image sprite with http://spritegen.website-performance.org/

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