I'm experiencing a weird issue here. I have a Javascript code which scrolls my page diagonally. It takes the scrollTop() value and divides it to scroll diagonally. But when i try to scroll it with two "layers", the foreground scrolling more than the background layer, i experience a sluggish animation when i finish scrolling to bottom and try to scroll to top again.
I have tried somethings as i saw here, like caching vars, declaring in e.g. $(window) as $window with no luck. I dont know if this issue its happening by the Math or Animate.
Here's my jsfiddle: http://jsfiddle.net/sPB3a/
You can experience it in fullscreen here: http://jsfiddle.net/sPB3a/show/
Thanks for any tip!
I think that the root cause of the problem is the size of the background images. I removed all background images from your page and i get a perfectly smooth scrolling.
They are really heavy. You should try with very low quality jpg images (less that 20k). If this works, you have then to work on the images to find the good compromise.
Note: png format is a looseless image format. It's good for small images and screenshots (where large areas have exactly the same color). It's not good when there are a lot of very similar colors, blurs and gradients. e.g. photos. In your case, you should use jpg format and ajust the quality level.
You are querying dom in your $(window).scroll function. I dont think its a good practise.
Cache your variables, accessing dom via javascript is very slow.
I've a lot of things in your code, do check if it helps you.
Fiddle
$(function(){
var $window = $(window);
var windowHeight = $window.height();
var windowWidth = $window.width();
var content = $("#content");
var section = content.children("section");
var sectionsNumbers = section.length-1;
var illusion = $(".illusion1");
var mask = $('#mask');
// Scroll sets
var windowScrollX = ((sectionsNumbers+1)*windowWidth)-windowWidth;
var windowScrollY = ((sectionsNumbers+1)*windowHeight)-windowHeight;
content.css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight});
illusion .css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight});
// Set mask w and h
mask.css({"width":windowWidth,"height":windowHeight});
$(".scrollRule").css("height", (sectionsNumbers+1)*windowHeight);
section.each(function(sectionCount,val) {
// Defines its width and height
var $this = $(this);
$this.css({"width":windowWidth,"height":windowHeight,"left":sectionCount*windowWidth,"top":sectionCount*windowHeight});
});
// When window scrolls
var angleVar = windowScrollX/windowScrollY;
var curScrollTop;
$(window).scroll(function(){
var $this = $(this);
curScrollTop = $this.scrollTop();
content.stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 1250, easing: 'easeOutQuart'});
illusion.stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 1250, easing: 'easeOutQuart'});
});
});
Related
Sorry in advance if this is a minor question, but I'm new to javascript. I'm writing code for a webpage with full-width color backgrounds. Essentially, what I'm trying to do is detect the height of the window, and then make sure that the color block is the size of the window. The function works well on page load.
The problem is when I shrink the window, the div height doesn't change with the window size. I get all sorts of errors, like graphics poking out from behind the div.
I think what I'm missing is a way to detect the height of the content within each div and resize the height accordingly.
You can see how it works at http://pressshoppr.com
Here's the code:
$(function(){
var windowH = $(window).height();
if(windowH > wrapperH) {
$('.fullWidthSectionBG').css({'height':($(window).height())+'px'});
$('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var wrapperH = $('.fullWidthSectionBG').height();
var newH = wrapperH + differenceH;
var truecontentH = $('.fullWidthSection').height();
if(windowH > truecontentH) {
$('.fullWidthSectionBG').css('height', (newH)+'px');
$('.fullWidthSectionBGFirst').css('height', (newH)-120+'px');
}
});
});
I am not sure I totally understand the effect you are going for here, but I would imagine that if your initial bit of code achieves it, all you have to do is reuse exactly that. Treat each resize as if the page had just loaded, and get the results you want, eg:
$(function(){
// encapsulate the code that we know WORKS
function init() {
var windowH = $(window).height();
if(windowH > wrapperH) {
$('.fullWidthSectionBG').css({'height':($(window).height())+'px'});
$('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'});
}
}
// call on page ready
init()
// ...and call again whenever the page is resized
$(window).resize(init)
});
I would like to use Lazy load to my site, but there is a little problem: I scroll the content with JS (animate the content with X px ), so I don't use the scrollbars. Sadly, lazy load doesn't trigger in this case. Got any ideas how to make this?
My site scrolling horizontally, all content div-s float near each other and only the current one is visible, all other are on display: none;
Here is a not so pro pic of my site: I marked with black the visible area and with red, the moving parts.
my site in pic
All I can think of is hook into when the content slides, then add the images in or the whole content with AJAX if thats your aim. Plugins will usually focus on the majority of use cases, so Lazy load might not be good for you.
I would just write my own simple lazy load script:
$(function(){
$('img').each(function(){
var $this = $(this)
$this.data('origImg',$this.attr('src'))
$this.removeAttr('src') // or set a placeholder img
})
var $window = $(window), $container = $('#sliding_content')
window.lazyLoad = function () {
$container.find('img:not([src])').each(function(){
var $this = $(this), left = $this.offset().left
if (!(left < 0) && !(left > $window.width()))
$this.attr('src',$this.data('origImg'))
})
}
})
And then when the divs are animated, call lazyLoad().
Let me know if this works for you. :)
Ok, after some hours I've decided to use JAIL for this. Not the best solution, but better than nothing since I'm dumb with AJAX JAIL aka jQuery Asynchronous Image Loader
I have currently got an element to scroll on page scroll and I am looking to get it to stop after around 750px as it currently overlaps the footer on smaller monitors.
I have found a couple of other examples which would require some restructuring of my code which I am trying to avoid, as the various other examples have to have certain divs relevant to eachother in order to stop the scrolling div at a certain point on the page.
My current script is as below and wrks great, only I am unsure as to edit this to stop the div at a certain point:
<script type="text/javascript">
$(function(){
var btn = $('.overview-wrap');
var btnPosTop = btn.offset().top;
var win = $(window);
win.scroll(function(e){
var scrollTop = win.scrollTop();
if(scrollTop >= btnPosTop){
btn.css({position:'fixed',top:0,marginTop:0});
}else if(btn.css('position') === 'fixed'){
btn.css({position:'',top:'',marginTop:'20px'});
}
});
});
</script>
Any pointers would be appreciated.
Personally, I hate dealing directly with the DOM for things like position, because it's so variable. Check out the jquery-position library for a nice abstraction on top of the dom.
I have this javascript code that scrolls a div depending on the mouse position.
Ive got the code working, the problem is its a bit jittery. I was wondering if anybody could give me advice on how to optimise it so it runs smoothly!
To view the code please visit my jsfiddle:
http://jsfiddle.net/ENhwT/3/
I realised i was going WELL too far with this, and the solution was easy.
You calculate the new scroll position based on the EXACT mouse Position... Code Follows:
$(window).load(function(){
var container = $("#PortfolioReel");
var elem = $("#PortfolioReel div");
var max_pos = container.width();
var max_scroll = elem.width() - max_pos;
var differential = max_scroll / max_pos;
$("#PortfolioReel").mousemove(function(e){
var pos = (e.pageX - this.offsetLeft) + 1;
var scr = Math.round(pos * differential);
container.scrollLeft(scr);
});
});
You set the position in fixed large steps, so it's 'jumping'. You have to iterate in smaller steps until you reach the target position.
You shouldn't use six fixed position values, but calculate new values in timesteps.
You could use something like this to make a smoother transition:
http://api.jquery.com/animate/
Sample
Something like this should be working:
elem.animate({
scrollLeft: current + 25
}, 500, function() {
// Animation complete.
});
I'm trying to counteract an adjustment to the height of an element which is above the scroll offset by calculating the difference in height and then updating the current scroll position to account for it.
The problem is that there's no way that I can prevent a very quick flickering artefact. Whether I adjust the element's height and then the scroll position, or vice versa, I can't seem to prevent a quick visual jump.
Does anyone know how this could be overcome? I want these to operations to happen at the same time with no rendering in-between but I'm not sure if it's possible.
// Setup
...
var myElement = ...
var oldHeight = ...
var scrollOffset = window.scrollY;
var newHeight = 100;
var diff = newHeight - oldHeight;
// Determine if we need to counteract new size
var adjustScroll = (absoluteOffset(myElement) < scrollOffset);
// Adjust size
myElement.style.height = newHeight+'px';
// Adjust scroll to counteract the new height
if (adjustScroll) window.scrollTo(0, scrollOffset+diff);
I'm working with WebKit, specifically on iOS.
for webkit you can use CSS transitions/animations to smooth this but it's still sound like you are going the wrong way to begin with. I am sure that whatever is it you are trying to do can be solved purely with CSS (maybe with some very minimal Javaqscript). Post an example of you HTML + CSS + JS.
You could use scrollIntoView with timers to simulate multiple threads.
Or you could do it inside a document fragment beforehand.
Sorry to be reviving an old post here, but i came across this looking for a solution to a similar problem to do with browser resizing.
Stackoverflow user James Kyle created this little jsfiddle using jQuery that attempts to maintain scroll position as best as possible when a page is resized
var html = $('html'),
H = html.outerHeight(true),
S = $(window).scrollTop(),
P = S/H;
$(window).scroll(function() {
S = $(window).scrollTop();
P = S/H;
});
$(window).resize(function() {
H = html.outerHeight(true);
$(window).scrollTop(P*H);
});
http://jsfiddle.net/JamesKyle/RmNap/
you could try using this same code and trigger a 'resize' event on the html when the image has loaded by using a jQuery library like imagesLoaded