I hope you're all right.
I've searched everywhere but I can't find the answer to my problem.
The issue is that I want a logo to rotate while the page is scrolling (this is already achieved), but when I click on a title in the menu, I want the logo to move (as I do now) but when it reaches the element in question, always stays straight, so that you can always see the logo as it should be.
This is the code I have for the scroll and the logo now:
<script>
$(window).scroll(function () {
var theta = $(window).scrollTop() / 200;
$('#header-logo').css({ transform: 'rotate(-' + theta + 'rad'});
});
I do not have much experience with javascript and much less with jquery.
Thank you!
Related
I have a JavaScript function that when a user does a mouse-over a thumbnail, a larger preview of the image pops up. The JavaScript calculates the top and left offset position to either display the preview on the right or left of the screen, depending on the screen size.
The function works when the object passed is an image.
My goal is to use the same function as a template, and have it work but instead that using a thumbnail for the hover event, just use a link. So the user does a mouse over the link, and the image preview pops up.
My problem is that the offset left position is not being calculated when using IE8 or IE11, Firefox and Chrome work fine.
The image is always being displayed on the right size of the screen. But this only happens on IE. I guess, I am not sure, but perhaps IE treats the and tag differently to calculate offset?
Here is a copy of the jquery function:
function linkOverShow(a, strSKU) {
$("#pUpImg").attr("src", "/images/items/" + strSKU + ".jpg");
var offset = $(a).offset();
if (offset.left - 350 < 0) {
$('#pUp').css('top', (offset.top - 125)).css('left', (offset.left + 100));
} else {
$('#pUp').css('top', (offset.top - 125)).css('left', (offset.left - 350));
}
$("#pUp").show();
}
On IE, the code only goes to the line:
$('#pUp').css('top', (offset.top - 125)).css('left', (offset.left + 100));
I am hoping to fins someone in this forum that can offer some ideas as to why this is happening, and possibly offer some recommendations to try to solve the issue.
I hope also I am asking this question correctly.
Any help is greatly appreciated.
Thank you much.
I wasn't sure what to make of the title for this problem, as it is quite complicated. To demonstrate, I've created a fiddle:
http://jsfiddle.net/2W5Jd/
Basically, I'm making a website containing different sections with different background colors. The designer thought it would be a good idea to change the color of the logo when you scroll down to another section, as if the section is "masking" the logo (see fiddle, it's hard to explain).
The problem however, as you can see in the fiddle, is that when you scroll fast enough, the logo stops resizing. Does anyone have any idea how to work around this?
As posting a link to jsfiddle.net must be accompanied by code, here's the js (I've simplified it a bit from the actual website version):
var $logo = $("#logo");
$(window).scroll(function(){
scrollTop = $(document).scrollTop();
$logo.css("top", scrollTop + "px");
if ( scrollTop + 180 >= 600 ) {
$logo.find(".second").css("height", (scrollTop + 180) - 600 + "px");
}
});
add an else clause to your if
else {
$logo.find(".second").css("height", (scrollTop + 180) - 600 + "px");
}
see update fiddle: http://jsfiddle.net/hbrunar/2W5Jd/1/
if you don't need to do anything else in the if part, then skip it completely:
http://jsfiddle.net/hbrunar/2W5Jd/2/
I have been looking into parallax effects for vertical scrolling on my web page, and after some research, I'm not sure that what I want to do is technically a parallax effect.
From what I've seen, most parallax effects assume you want to be able to scroll indefinitely with many background images rolling by, or with huge images that repeat.
What I want to do is have the background of two DIVs be filled with a background image as the scroll bar reaches the bottom of the page. Note that I do not want the background images to stretch. I'm assuming to get the effect I want that these images would have a vertical height bigger than most people's viewport, and then their vertical position would change. When the user's scrollbar is at the top, a certain amount of the background is visible, and then it moves vertically to fill the background space as the user scrolls down.
Please see the image below for a visual explanation of the effect I hope to acheive:
The height of the veiwport will vary depending on the length of content inside the inner DIV.
My trouble is that if what I am trying to do is not exactly a parallax effect, then I don't know what else to call it, and my attempts to search by describing it keep landing me back at pages offering tutorials on parallax effects. So I've been stumped by a lack of terminology.
If someone could direct me to how I can control the vertical position of the background depending on the scrollbar position, that would be much appreciated. If this can be done with just CSS that would be great, but I'm assuming some Javascript would be required. A jQuery solution would also work for me.
Update:
After searching using the terms provided in comments, I've got the background image in the outer DIV to almost do what I want with the following code:
$(window).scroll(function () {
var yPos = $("#outerDiv").height() - ($("#outerDIV").height() * ($(window).scrollTop() / $(window).height()));
document.getElementById('outerDIV').style.backgroundPosition="0px " + yPos + "px";
});
It moves the background image in the right direction relative to the scrolling, but what it lacks is constraining that motion to within the viewport. Getting the right proportions based on the viewport and DIV sizes is proving to be just a little beyond my mathematical abilities.
For your requirement, you have to use a jquery parallax plugin to guide this activity, my best suggest it to use a Superscollorama and play with the elements as your wish...
As far as your question, Try this example,
controller.addTween(
'#examples-background',
(new TimelineLite())
.append([
TweenMax.fromTo($('#parallax-it-left'), 1,
{css:{backgroundPosition:"(0 -54px)"}, immediateRender:true},
{css:{backgroundPosition:"(0 -54px)"}}),
TweenMax.fromTo($('#parallax-it-right'), 1,
{css:{backgroundPosition:"(0 -54px)"}, immediateRender:true},
{css:{backgroundPosition:"(0 54px)"}})
]),
1000 // scroll duration of tween
);
You serial vice change as far as your wish...
Try practice this plugin, hope that works for you...
http://johnpolacek.github.io/superscrollorama/
Thanks...
Turns out what I want to acheive is possible with no special plugins, just some carefully thought out math. I did use a little jQuery syntax, but I don't think it's strictly necessary.
The code below has copious notes, so hopefully it's largely explanatory. In summary, you just need to find the position of the background image when the scroll would be at the top, and the position it would be if the scroll bar was at the bottom, and then you can use the percentage of the scrollbar's movement to work out where you are between those two points. It's a little tricker than just that, of course, in that you have to account for the difference between the total height of the scroll bar and where your DIV appears on the page and a few other adjustments, but the details of what I did are below.
What I've done here is just for the "outer DIV" that I described in my question. To get a background to move like the "inner DIV" I described, you'd have to modify the code, presumeably by reversing a few parameters. I haven't done that yet, but it seems like a straightforward task.
Hope others find this code useful. If anyone has suggestions on how it can be made more efficient or better, please let me know.
function moveBG(){
// imageHeight is not the total height of the image,
// it's the vertical amount you want to ensure remains visible no matter what.
var imageHeight = 300;
// Get the maximum amount within the DIV that the BG can move vertically.
var maxYPos = $("#outerDIV").height() - imageHeight;
// Get the amount of vertical distance from the top of the document to
// to the top of the DIV.
var headerHeight = document.getElementById("outerDIV").offsetTop;
// Calculate the BG Y position for when the scrollbar is at the very top.
var bgTopPos = $(window).height() - headerHeight - imageHeight;
// I don't want the image to wander outside of the DIV, so ensure it never
// goes below zero.
if (bgTopPos < 0)
{
bgTopPos = 0;
}
// Calculate the BG Y position when the scrollbar is at the very top.
var bgBottomPos = $(document).height() - $(window).height() - headerHeight;
// To prevent the BG image from getting cut off at the top, make sure
// its position never exceeds the maximum distance from the top of the DIV.
if (bgBottomPos > maxYPos)
{
bgBottomPos = maxYPos;
}
// Subtract the top position from the bottom, and you have the spread
// the BG will travel.
var totalYSpan = bgBottomPos - bgTopPos;
// Get the scrollbar position as a "percentage". Note I simply left it as a
// value between 0 and 1 instead of converting to a "true" percentage between
// 0 and 100, 'cause we don't need that in this situation.
var scrollPercent = ($(window).scrollTop() / ( $(document).height() - $(window).height()));
// The percentage of spread is added to the top position, and voila!
// You have your Y position for the BG image.
var bgYPos = bgTopPos + (Math.round(totalYSpan * scrollPercent));
// Apply it to the DIV.
document.getElementById('outerDIV').style.backgroundPosition="0px " + bgYPos + "px";
}
// Place the BG image correctly when opening the page.
$(document).ready(function() {
moveBG();
});
// Make it update when the scrollbar moves.
$(window).scroll(function () {
moveBG();
});
My goal is to make a fixed div appear at the top of a page once someone scrolls a certain amount of pixels down the page. Basically once the header section is out of view, this div will appear.
I've looked at code similar to what I want; however, haven't seen anything that would allow me to easily modify the pixel count from the top of the page (if possible).
Here is a piece of code I saw dealing with making divs appear by scrolling.
// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.fixedDiv').slideDown();
}else{
$('.fixedDiv').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
I just want to know how to make it appear. If someone knows of a piece of code already in tact with a slide up and slide down animation, that would be greatly appreciated as well but not required.
window.addEventListener("scroll",function() {
if(window.scrollY > 500) {
$('.fixedDiv').slideDown();
}
else {
$('.fixedDiv').slideUp();
}
},false);
Brandon Tilley answered my question in a comment...
You would change the first line, with the startY, to be the specific Y
position you need, rather than calculating based on the header's
position and height. Here's an updated fiddle:
jsfiddle.net/BinaryMuse/Ehney/1
window.addEventListener("scroll",function() {
$('.fixedDiv')[(window.scrollY > 500)?"slideDown":"slideUp"]();
},false);
DEMO: http://jsfiddle.net/DerekL/8eG2A/
I have a small problem.
I'm trying to do something like nikebetterworld.com's parallax background.
In my first attemp, I got something that works, but it can work better.
When I scroll, the background position changes. The problem is that it changes a few milliseconds after the scroll, so I can see how the background "jumps" after scrolling.
code:
var $w = $(window);
function move($c) {
var scroll = $w.scrollTop();
var diff = $c.offset().top - scroll;
var pos = '50% ' + (-diff)*0.5 + 'px';
$c.css({'backgroundPosition':pos});
}
$w.bind('scroll', function(e){
move(some_container);
});
Any suggestions?
Thanks.
Edit
Look at this example: http://jsfiddle.net/MZGHq/
(Scroll down until you see the background image)
The key is to use a fixed background if you must have it smooth. See http://jsfiddle.net/MZGHq/7/
References:
This page seems to have a good explanation of how the vertical parallax effect works: http://www.webdesignshock.com/one-page-website/
Also take a look at this one (they don't use fixed background...note how it looks a little jumpy like yours):
http://www.franckmaurin.com/the-parallax-effects-with-jquery/
var pos = '50% ' + (-diff)*0.5 + 'px';
I believe the problem is the 0.5. When you calculate the new position there is enough of a difference between the previous and new location for it to be a perceptible shift.
Changing 0.5 to 0.2 or lower minimizes this a bit, however the parallax effect is less pronounced - which is not what you want.
I would try a different approach - take a peek at GitHubs 404 page as an example:
https://github.com/ddflsdigjh;ad
use 'fixed' background
the displacement of background position should be much bigger than scroll (not 0.5 but 0.01)
it seemed that the problem take place only in FF. This is the slowest browser in rerendering pages and javascript.