Can anyone point me in the right direction? I have a DIV with a background image that is fixed, but I'd like it to scroll at a slower rate when scrolling down the page. I'm not great with jQuery or CSS3 so asking for some help.
Thanks in advance.
This may help: http://stephband.info/jparallax/
It turns nodes into absolutely positioned layers that move in response to the mouse.
http://potentpages.com/parallax-scroll-tutorial/
Here is a tutorial that my company and I created describing how to make a webpage like you are talking about. It doesn't require any jQuery or advanced CSS.
There are numerous libraries and tutorials on how to create parallax websites. We listed some here:
http://potentpages.com/parallax-tutorials/
The relevant javascript is:
var topDiv = document.getElementById("topDiv");
var speed = 1.5;
window.onscroll = function()
{
var yOffset = window.pageYOffset;
topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";
}
Where "topDiv" is the element that you want to move slower than the "regular scrolling speed." To make the element move slower, increase the speed variable. To make it move slower, decrease it.
There are multiple tutorials around the web regarding parallax effect. Here area two just form a simple google search for "parallax effect tutorial":
http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
http://richardshepherd.com/smashing/parallax/
http://stephband.info/jparallax/
window.onscroll = function(e)
{
var val = document.body.scrollTop / your_scroll_factor;
document.getElementById('your_background_image').style.posTop = -val;
}
Related
Does anyone know how to hide an object depending on how much the user has scrolled down the page?
I have some floating social buttons on my website and I want them to hide when the scroll reaches the footer (the very bottom) and then appear once they scroll back up.
Can't be done with CSS alone, you have to use javascript to keep track of how much the user has scrolled.
If you can use jQuery, you have to do something like this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$("#social").hide();
} else {
$("#social").show();
}
});
See jsfiddle. However, this is just a guess of what you need as you didn't provide the proper code. If you need a javascript only solution (without jQuery) let me know.
Hope there's someone here that have done what I'm currently trying to accomplish. I'm learning some new JS frameworks and I've got an idea to make full screen calendar with topbar fixed as my homepage. This calendar should take full width and full height available on normal monitors.
I've managed to make it full width using Foundation SCSS by changing this in _settings.scss:
$row-width: 100%;
$total-columns: 7;
My main question is - what's the optimal way for creating 5 rows (it's always 5 rows for single month) that will always take full remaining height of the screen? (remaining because of that topbar navigation that is fixed).
I'm ok with SCSS so all suggestions are welcome.
Thanks!
Ok, solution that works is:
// Get client height (screen height)
var maxHeight = window.innerHeight;
var topbarHeight = $('div.fixed').height();
var columnHeight = (maxHeight - topbarHeight - 10) / 5;
$('.calendar-row .column').height(columnHeight);
I personally think there must be more "elegant" solution but maybe I'm wrong. If someone find better solution please reply.
Thanks.
I'm currently restyling my Wordpress theme and would like to implement a fixed navbar. I managed to implement that by adding position:fixed to the header area.
Since the menu is quite big in the first place, I would like to make it smaller when scrolling down, i.e. when the user visits the website, the menu has a height of 75px and when scrolling down it decreases to around 40-50px.
Quick sketch: http://i.imgur.com/iICQkfF.png
Any suggestions on how I may implement this?
Cheers,
Philipp
Since you're asking about WordPress I guess you're OK with using jQuery.
You just need to listen for the $(window).scroll() event and resize the menu based on how much the user has scrolled (which you can get via $(window).scrollTop()). A quick demo:
http://jsfiddle.net/FMypW/1/
(it's not an actual menu, but just showing the functionality work)
var moved = false;
$(window).scroll(function(){
if( $(this).scrollTop() < 2000 ){
$('.header').height(200 - (200 * $(this).scrollTop() / $('body').height()));
if (!moved && $('.header').height() < 170)
{
$('.header').animate({top:"-40px"}); moved = true;
} else if (moved && $('.header').height() > 170)
{
$('.header').animate({top:"0px"}); moved = false;
}
}
});
And here's the DEMO
Additionally, you might want to check out these tutorials instead of inventing the wheel yourself:
How to create a resizing menu bar
Animated Resizing Header On Scroll
I am looking for a solution to a unique problem. I have a wp_menu underneath the "Network Menu" on a theme I developing for a multisite build. There is a little ring in the center of the menu that holds the logo, and I am curious if there is a way to get a transparent list item to hold that place, and allow all other "legitimate" list items to wrap around that, so either to the left or right.
I already have a filter that inserts a list item that I can customize by adding css, I just don't know how to make one list item in particular hold the place where the circle exists.
The website is:
http://www.mountainjackscreative.com/sandbox/edts/sample-page/
Any help, or even just ideas would be great!
Thanks everyone.
Since you're using jQuery you could do some math on the menu.
EDIT: Put this before ending of your head tag
LAST_EDIT: Here's the JS fiddle http://jsfiddle.net/BsnFW/14/. Last try :)
$(document).ready(function() {
menuBreakPoint = 200; //width in px after which you want to insert the space (experiment with this)
menuWidth = 0;
rightMenuStart = 600; //width in px from left of menu container div to the right
$('.sub_site_menu li').each( function() {
menuWidth += $(this).width();
if (menuWidth >= menuBreakPoint) {
$(this).css('margin-left', (rightMenuStart - menuWidth));
return false; //break out of each loop
}
});
});
Use this.
Can you not breakup the list into two? float one left and the other right. Provide the appropriate ul margins so nothing shows up on the logo?
I am going to go with the jquery solution as it will most likely render the best results across all browsers. But I did stumble across this other resource regarding a soon to be implemented feature in CSS3
Included is a script that forces compatability with the new CSS3 "column" functionality.
http://www.csscripting.com/css-multi-column/
Is there anyway to change the position style of an element dynamically from 'absolute' to 'fixed' dynamically in IE 9 and before?
In other words we want an element to move vertically on the page till a point when it would reach at the top of the window and then at that point make it fixed so it wont just go up anymore? Makes sense?
It just works in my copy of IE 9.
document.getElementById('foo').style.position = 'fixed';
What you're looking for is a way to change this value based on another in-page condition.
I'd suggest what you need is something akin to this (using jQuery):
var targetElement = $('#your-fixed-absolute-element');
var togglePixelY = 100; // change to suit your needs
$(window).bind('scroll resize',function(){
if($(this).css('scrollTop') <= togglePixelY && !targetElement.hasClass('absolute')) {
targetElement.addClass('absolute').removeClass('fixed');
} else if($(this).css('scrollTop') > togglePixelY && !targetElement.hasClass('fixed')) {
targetElement.addClass('fixed').removeClass('absolute');
}
});
Here is another useful question you can read up on:
Get current scroll position and pass it as a variable with a link?
or Position of a div relative to the window?
and there are plugins for this (look for 'sticky sidebar' for example) and a nice tutorial for it here: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/
Using jQuery?
http://api.jquery.com/css/