So I am trying to get an image to have a parallax scrolling effect, buts its not working. Got any idea on why it isnt working?
$(function() {
// Cache the Window object
var $window = $(window);
// Parallax Backgrounds
// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // end window scroll
});
});
https://jsfiddle.net/0382k30q/
You need to change this:
$('section[data-type="background"]').each(function(){...
to this:
$('div[data-type="background"]').each(function(){...
The backgrounds aren't applied to the section element. They are applied to a div element.
Also, don't forget to include JQuery/JQuery UI in your fiddles.
Updated Fiddle: https://jsfiddle.net/0382k30q/7/
Related
Hey I have this really annoying issue thats probably got a simple solution but for the life of me i cant find away to fix it.
Basically i have two images both 50% with of it's container now the goal is the both images to slide in (left/right) on the basis of the scroll position and once it get to the top of the container both images will sit is place.
Now i got that working to that point the only issue is when i resize the page the position of both images are wrong. I obviously did a resize() function with the same logic as the scroll() function but still i got nowhere. Here's my code
var page_width = $(document).outerWidth(),
page_height = $(document).outerHeight(),
left_image = $('.split-screen.youth'),
right_image = $('.split-screen.elite'),
offset = (page_width) / page_height;
left_image.css({'left':'0px'});
right_image.css({'right':'0px'});
$(window).on('scroll', null, function(){
var scrollTop = $(window).scrollTop(),
calc = -(scrollTop*offset);
left_image.css({
'margin-left': 'calc(100% + '+calc+'px)'
});
right_image.css({
'margin-right': 'calc(100% + '+calc+'px)'
});
});
$(window).resize(function(){
// something ???
});
Here is a jsFiddle of the issue although it doesn't look entirely accurate but you get the picture. When you resize the scroll position changes and i need the margin-left/margin-right values to be correct.
I think your problem is that you're still using the old offset value. Just update your global values first, than it works for me (see: https://jsfiddle.net/a7tfmp37/2/):
$(window).resize(function(){
page_width = $(document).outerWidth(),
page_height = $(document).outerHeight(),
offset = (page_width) / page_height;
var scrollTop = $(window).scrollTop(),
calc = -(scrollTop*offset);
left_image.css({
'margin-left': 'calc(100% + '+calc+'px)'
});
right_image.css({
'margin-right': 'calc(100% + '+calc+'px)'
});
});
I wanted to achieve an effect like this http://www.offset.com/
as you can see when it scrolls it slowly covering the carousel rather than scrolling with it.
I've tried using background fixed but the problem is the elements inside it will not stay in its position
Maybe there is a good technique in achieving this, Thanks
this is called parallax scrolling here is an example of how to do this using Jquery :
Live Demo
// Y axis scroll speed
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.container').each(function() {
var $element = $(this);
// subtract some from the height b/c of the padding
var height = $element.height()-18;
$(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
});
};
$(window).bind('scroll', update);
an other example it might help DEMO
I have some jQuery code that adds a picture to my page whenever a user clicks on a button. I want this picture to display on top of whatever the user is looking at. The problem is that I have this image set as position:absolute and it's displaying at the very top of the page. Think about it like this:
My page is 1000px high. If the users viewport is 300px down then thats where I want the image to display, not at the very top of the page. Position:static doesn't work for me in this case because I want the user to be able to scroll past the image and not have it follow him.
Any ideas? I was thinking something along the lines of a jQuery function that returns how far down the webpage the viewport is and set that as the top position of the image(since I have it set as absolute).
Thanks in advance!
var viewportX = window.pageXOffset; var viewportY = window.pageYOffset;
Then position it relative to viewportX and viewportY.
I use this small jQuery extension to set something to center on the screen:
(function($)
{
$.fn.centerMe = function(centerIn)
{
var containerWidth = $(centerIn).width();
var containerHeight = $(centerIn).height();
var elWidth = $(this).width();
var elHeight = $(this).height();
$(this).css('left', containerWidth / 2 - elWidth / 2);
var adjTop = containerHeight / 2 - elHeight / 2;
$(this).css('top', $(parent.window.document).scrollTop() + adjTop);
};
})(jQuery);
Usage is basically: $('#elemToCenter').centerMe(window);
I am developing a website which have a scrolling newsticker in a strip using jquery.li-scroller.1.0.js.
page address is: http://www.designforce.us/demo/ticker/index.html
When we hover the mouse on the newsticker, strip is stop. At this stage i want to show a popup box right under the current li with its text. something i've done and when we hover the mouse pointer over the strip, newsticker stops and box is showing with its text.
PROBLEM:
jquery.li-scroller newsticker have a wrapper with {overflow:hidden} so if i add the popup box withing li then its not showing. Thats why i've coded the popup (.tickPop) withing a seperate space and white some script of jquery document ready. my script is:
$('ul#ticker01 li').each(function(e){
var iClass;
$(this).hover(function(){
iClass = $(this).attr('class');
$(this).css('height',$('tickPop').height()+30)
var offset = $(this).offset();
var left = offset.left;
var top = offset.top+20;
var iWidth = $(this).width();
var sText = $(this).children().html();
$(this).css('background','#f6f4f4');
$('.tickPop').css('left',left);
$('.tickPop').css('top',top);
$('.tickPop').css('width',iWidth);
$('.tickPop').css('display','block');
$('.tickPop').text(sText);
}, function(){
$('.tickPop').mouseleave(function(){
bHovering = false;
$(this).css('display','none');
});
$(this).css('background','transparent');
//$('.tickPop').css('display','none');
if(iClass == 'Yellow')
$(this).css('background','url(images/icon-yellow.jpg) left center no-repeat');
else
$(this).css('background','url(images/icon-white.jpg) left center no-repeat');
});
});
popup box called $('.tickPop') is hidden by default and when user hover on newsticker then jquery function set the attribute $('.tickPop').css('display','block') and it is visible.
Now problem is that as we move the mouse pointer over the popup box then newsticker is again start scrolling while i want when we mouseleave from the popup box then newsticker should start.
Dear Experts, Please advise..............?
Looking forward for a kind response.
Regards
You should modify jquery li-scroller sources.
watch this code (from li-scroller sources):
function scrollnews(spazio, tempo){
$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
}
scrollnews(totalTravel, defTiming);
// $strip = $(this) so it triggers when you're hover a news
$strip.hover(function(){
jQuery(this).stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
You should add something like:
var popup = jQuery('.tickPop');
popup.hover(function(){
$strip.stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
I didn't test that code but should work....
P.S. Sorry for the indentation
I have picture of an arrow in a div. This div is fixed in the bottom right corner of very wide page.
How can I use jQuery to scroll the window right 600px each time the div is clicked? (And is it possible to detect when the page can no longer scroll right, and hide the arrow?)
Cheers.
Try something like this:
var distance = 600;
$("div").click(function() {
$("html:not(:animated), body:not(:animated)").animate(
{scrollLeft: "+="+distance}, 400
);
});
jsfiddle here: http://jsfiddle.net/juXLu/2/
[edit]
And here's detecting if you're at the end of the document http://jsfiddle.net/lukemartin/juXLu/5/
var distance = 600,
docWidth = $(document).width(),
scrollPos;
// click handler
$("div").click(function() {
// animate
$("html:not(:animated), body:not(:animated)").animate(
// amount to scroll
{scrollLeft: "+=" + distance},
// scroll speed (ms)
400,
// callback function
function(){
// check our scroll position
scrollPos = $(window).width() + $(window).scrollLeft();
// if it equals the doc width, we're at the end
if(docWidth === scrollPos) {
$("div").text("End of the line");
}
}
);
});
Use the jquery method scrollLeft
$(document).ready(function(){
$(window).scrollLeft((Number($(window).scrollLeft())+600)+'px');
});
Something like that :)
You could user the Scrollto plugin,
http://plugins.jquery.com/project/ScrollTo
It is really easy to use, just use the documentation. Then you could create a placeholder to determine whether or not its to the end of the page. Just stick the placeholder at the very end, and calculate the distance.