So I am writing a custom parallaxing thing for a website I am working on.
It's very simple:
$('.bl-content').scroll(function(){
$('.prlx-image img').each(function(){
if($(this).parents('div.prlx-image').offset().top < $('.page-type--sfs .bl-content').height()){
$(this).css('bottom', $('.page-type--sfs .bl-content').scrollTop() * -.3);
}
});
});
It basically checks to see if the image is on the page and only then starts pulling the image up slightly faster slower than the page scrolls. The problem here is that the value the image is being pulled by is the same for each image. So it works fine for any images already on the page when it loads but anything further down has already "parallaxed" out of its container by the time it gets into view.
The images are just absolutely positioned within a container div.
I need to start scrollTop from zero when the image gets scrolled into view...
UPDATE:
I have been playing around with this and think I am on to something:
var offset = []
$('.prlx-image').each(function(i){
offset[i] = $(this).offset().top;
});
$('.bl-content').scroll(function(){
$('.prlx-image img').each(function(i){
if($(this).parents('div.prlx-image').offset().top < $('.page-type--sfs .bl-content').outerHeight()){
$(this).css('bottom', ($('.page-type--sfs .bl-content').scrollTop() * -.3) - offset[i]);
}
});
});
So now if I subtract the value of i from the value of scrollTop() theoretically that should work....but for some reason it is not working :(
If it helps the html each image is contained in looks like this:
<div class="prlx-image">
<img src="/assets/uploads/menncars.jpg" class="img-responsive">
</div>
And the CSS:
prlx-image{
height: 350px;
margin: 30px 0;
overflow: hidden;
position: relative;
}
.prlx-image img{
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
Related
I'm calling images from a folder at random and putting them in HTML img tags using PHPs glob function.
I'm then using JS to read the URLs and flip the CSS background image of div#wrapper, 300ms for each image. The images should be preloaded as they have HTML img tags. They are being hidden from the user using the following CSS (which should not stop preloading as "display: none" does):
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
Nonetheless I'm experiencing the images flashing inconsistently / at different rates. It seems that larger file size images cause this to happen, but the images should be preloaded so I'm not sure why this is occurring.
My JS looks like this:
var slides = [];
$('.slide').each(function(index){
slides.push($(this).attr('id'));
});
var slide = 0;
function changeImage(){
if (slide < 10){
var currentSlide = $("#" + slides[slide]);
$('#wrapper').css('background-image', '');
$('#wrapper').css('background-image', 'url("' + currentSlide.attr('src') + '")');
slide++
} else {
$('#headline').removeClass('visuallyhidden');
$('#wrapper').css('background-image', '');
$('#wrapper').css('background-color', '#ef3308');
}
}
setInterval(changeImage, 300);
The site is http://robertirish.com.
Is there a better way to do this / can anyone explain why it's happening?
I'm going to guess it's a loading issue: either that CSS is interfering with preload or else it's being treated differently because you're loading it into the background of another element rather than using the img that you preloaded. Instead, I would load all the images inside the div, absolute-positioned on top of each other, and then just remove them one by one:
CSS:
#wrapper{
position: relative;
}
#wrapper img{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
HTML:
<div id="wrapper">
<img src="image1.png">
<img src="image2.png">
<!--etc-->
</div>
JS:
$(document).on('ready', function(){
var images = [];
$("img", "#wrapper").each(function(){
images.push(this);
});
var timer = setInterval(function(){
if (images.length)
$(images.pop()).remove();
else
clearInterval(timer);
}, 300);
});
I have made div "button" which has fixed style so it would always stay at one place even when scrolling page. Here is the code
var backButton = document.getElementsByClassName("go-back");
for(i = 0; i < backButton.length; i++) {
backButton[i].style.cursor = "pointer";
backButton[i].onclick = function() {
hideIstorija();
hideVerta();
hideSarasas();
showStarting();
}
}
.go-back {
position: fixed;
background-color: rgba(0,0,0,0.5);
bottom: 0%;
margin: 50px;
padding: 25px;
border-radius: 100px;
}
<div class="go-back">
<
</div>
When the page is fully scrolled up, it works as intended, but after scrolling a bit down button stops working. Any ideas how to deal with this?
here might be multiple cases depending on other content. It's possible the button is actually obscured by some transparent element on top of it, especially if the cursor doesn't change while hovering over it. Adding z-index: 100 (or some other arbitrarily big number) can help.
I have two navigation in my website. Both the navigation bars are fixed. Basically when I scroll up, I would like to use the animate() and show both the navigation bar in the page. How do I get the scroll up event and use that to animate the divs, like the Google search widget. I would really appreciate your help. Thank you.
html:
<div id="navbar_header">
some link
</div>
<div id="main_content">
<p>Some content...</p>
</div>
<div id="navbar_footer">
some link
</div>
css:
#navbar_header {
background: #22313F;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 40px;
}
#navbar_footer {
background: #22313F;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
}
Normally using the window for the scroll event should be sufficient, as it's big enough and the one element, that's being scrolled. If jQuery is loaded correctly, you could try something like this:
$(document).ready(function(){
var lastTopPosition = 0;
$(window).scroll(function(){
var topPosition = $(window).scrollTop();
if (topPosition > lastTopPosition ){
$("#navbar_header").stop(true).animate({'top':'-40px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'-40px'}, 200);
} else {
$("#navbar_header").stop(true).animate({'top':'0px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'0px'}, 200);
}
lastTopPosition = topPosition;
}
});
This piece of code gets the current position from the top everytime you scroll. If the distance gets bigger (scroll down) the two bars fadeout. If it's getting smaller (scroll up) it fades in. You can replace the FadeOut/In methods here with you animate() call too. A check, if the elements are displayed would be good here too, but I guess you can figure that one out ;-)
If I understood this right, something along the lines of:
$("#main_content").scroll(function(){
$('#navbar_header').show(300);
$('#navbar_footer').show(300);
});
Where show(300) will basically do a 300ms showing animation of your divs.
I'm trying to create a banner that blurs when you scroll, but when I try it, my image fills the entire page (it's behind all of the elements, but it still fills the page.) I want it in a divider located at the top as a banner.
HTML/CSS
<div id="banner-container" object="banner" style="height: 250px; width: 100%">
<div class="banner" style="position: fixed; background-position: center; -webkit-background-size: cover; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background-image:url('http://s6.postimg.org/d7gcsqvdt/image.jpg')"></div>
<div class="banner-blurred" style="opacity: 0; background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/0*I7mXgSon9oco-rim.jpeg')"></div>
JavaScript
$(window).scroll(function() {
var s = $(window).scrollTop(),
opacityVal = (s / 150.0);
$('.banner-blurred').css('opacity', opacityVal);
});
you can try something like
$(window).scroll(function() {
var s = $(window).scrollTop(),
if (s >= 100){
$('.banner').css({'bottom':'auto', 'height' : '250px'});
}else{
$('.banner').css({'bottom':'0', 'height' : 'auto'});
}
opacityVal = (s / 150.0);
$('.banner-blurred').css('opacity', opacityVal);
});
as I understand from ( my image fills the entire page (it's behind all of the elements, but it still fills the page.) I want it in a divider located at the top as a banner.) you need .banner class div to be fixed in the same position as id="banner-container" .. and you make .banner position fixed and bottom : 0 ... so you need to change it to auto and add height : 250px as your id="banner-container" .. I made that code after scroll is bigger than 100px it will change .banner css
I need to change the background of one of my main container divs with Javascript. The end goal is to apply a gradient but I'm having issues just changing background color. Here's the code:
var main = document.getElementById("main");
main.parentNode.style.maxWidth = 0;
main.parentNode.style.maxHeight = 0;
main.parentNode.style.margin = "0px";
main.style.backgroundColor = "black";
This is what the tag looks like in the browser once the page loads and the JS executes.
<div id="main" style="z-index: 10; position: relative; top: 0px; left: 0px; background-color: black;">
I am not getting any JS errors. The JS is executing bc other code runs and the background color is changed in the code but not rendered. The browser I am most concerned about is Safari but I am getting the same effect in Chrome. Any help would be much appreciated.
EDIT: Here's a fiddle: http://jsfiddle.net/hz7AR/
you are setting the parent container to maxWidth 0 and maxHeight 0. i think there is the problem
You need to set the width and height of your div. Currently the div has no width or height change your html to:
<div id="main" style="z-index: 10; position: relative; top: 0px; left: 0px; background-color: black; height: 100px; width: 100px">
That code makes the div 100 x 100 pixels you can set it to whatever you like