I'm trying to obtain this effect (you need to scroll down a bit to see the divs sliding in)
I'm not that good with JS but I managed to make the divs fade in from 0 opacity to full opacity using this code:
tiles = $(".recipe").fadeTo(0, 0);
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(500,1);
});
});
Can anyone help me optain the desired effect? I need the divs to slide up from 0 opacity to 100 percent opaque, from bottom to top, when scrolling.
Hope this makes sense, thanks.
I think this is a possible solution:
var scrollCb = function () {
var tiles = $(".tile:not(.animated)");
var $window = $(window);
var b = $window.scrollTop() + $window.height();
tiles.each(function (i) {
var $this = $(this);
var a = $this.offset().top + $this.height();
if (a < b) {
$this.addClass("animated").addClass("fadeInUp");
}
});
};
$(scrollCb);
$(window).scroll(scrollCb);
http://jsfiddle.net/74u765q2/4/
animate.css realizes the animation part.
That page uses a jquery library called waypoints.
You have to download the waypoint library, this library has a lot of functions for scroll event:
for example:
$('#example-offset-percent').waypoint(function() {
notify('25% from the top');
}, { offset: '25%' });
this code triggers the notify when the object is 25% from the top of the screen.
here is the link to the page:
http://imakewebthings.com/jquery-waypoints/
Related
box2 is a fix positioned element, I need it stops at the top and bottom of box1 when scrolling. Any help would be appreciated.
$(window).scroll(function() {
var h1 = $('.box1').height();
var h2 = $('.box2').height();
var h3 = $('.footer').outerHeight(true);
$('.box2').css('bottom', h3);
});
example
If I understand the question correctly, you want box2 to appear static within the viewport, except it should never go above or below box1's extent.
Use this code:
$(window).scroll(function() {
var scrollTop= $(window).scrollTop(),
b1= $('.box1'),
b2= $('.box2'),
min= b1.position().top,
max= (b1.position().top + b1.outerHeight()) - b2.outerHeight();
b2.css({
top: Math.min(Math.max(scrollTop,min),max) - scrollTop
});
});
Working Fiddle
Great answer from Rick Hitchcock, made some improvements:
var $b1 = $('.box1'); // 1
var $b2 = $('.box2'); // 1
var min = $b2.position().top; // 2
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var max = ($b1.position().top + $b1.outerHeight()) - $b2.outerHeight();
$b2.css({
top: Math.min(Math.max(scrollTop, min), max)
});
});
Cache DOM queries
Make min the original top of $b2 on page load.
jsbin demo
I want to change the var num into a percentage instead of a number of pixels.
how can I do this?
I need this for my site:
http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/
But they work with pixels, and my website works with % (because autoscaling for example on a HD screen or a Full HD screen)
/* Dynamic top menu positioning
*
*/
var num = 150 ; //number of pixels before modifying styles 150
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
//USE SCROLL WHEEL FOR THIS FIDDLE DEMO
First, let me tell you this is a horrible solution. Listening to every scroll event and calling addClass() or removeClass() every time is expensive. // end preach
Here's the answer to your question anyway:
var baseHeight = $(window).height(); // for body, use $("body").height();
var num = .25; // this the percentage of vertical scroll
$(window).bind('scroll', function () {
if ($(window).scrollTop() / baseHeight > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
I'm attempting to use the a jquery plugin (jsfiddle here) and it works great when I use it as intended, adding a class to imgs.
What I would like to have is a page in which multiple images appear upon scroll-over but at slightly different fadein speeds, so that a cluster group of images don't all fade in at once but kind of popping-popcorn-effect in.
tiles = $("ul#tiles li").fadeTo(0, 0);
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(500,1);
});
});
tiles = $("ul#tiles2 li").fadeTo(0, 0);
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(1000,1);
});
});tiles = $("ul#tiles3 li").fadeTo(0, 0);
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(1500,1);
});
});
I've tried using the javascipt multiple times with different classes and respective fadein times (example of this above), then assigning those different classes to the different images, but whichever class is the last one listed (in the case above #tiles3) is the only one that works. Any advice appreciated.
thanks,
Nick
You are changing tiles, but the scroll happens after that. If you want it localized to each scroll, you need to do this (for example):
$('#tiles,#tiles2,#tiles3').find('li').fadeTo(0, 0);
$(window).scroll(function(d,h) {
$("#tiles li").each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(500,1);
});
});
Or give them different names. Every time a scroll happens, it's using the current tiles variable rather than the one right above the code.
It is possible to improve scrolling on a list with large number of containing objects.
<ul>
<li>text1</li>
<li>text2</li>
<li>text3</li>
<li>text4</li>
<li>...</li>
.
.
.
<li>text1000</li>
</ul>
Whenever I scroll over 90% of the elements in container, I make a js call that will load more results to my container and will add my rest of the elements to the ul.
Can I modify the scroll speed when scrolling based on the number of the results?
p.s. I don't have any code that I have tried on this situation. I don't know how to do this. This is the last attempt in order to solve a problem that I have.
p.s. 2 i would like a solution without any extra library than jquery or jqm.
Edit:
By modify the scroll speed I mean to change the scroll to go faster if there are many objects and slower otherwise
You can use this kind of snippet:
{Change timeout delay for less boring effect using scrollbar}
SEE DEMO
(function () {
var $ul = $('ul');
for (var i = 1; i < 1001; i++)
$ul.append('<li>test::' + i + '</li>');
var lastScrollTop = 0,
st,
direction;
function getDirection() {
st = window.pageYOffset;
if (st > lastScrollTop) {
direction = "down";
} else {
direction = "up";
}
lastScrollTop = st;
return direction;
}
var scrolling = function () {
var $window = $(this);
$window.off('scroll');
var delta = $ul.height() / 10,
scroll = $window.scrollTop();
if (getDirection() === "down") $window.scrollTop(delta + scroll);
else $window.scrollTop(scroll - delta);
console.log($(window).scrollTop());
lastScrollTop = this.pageYOffset;
setTimeout(function () {
$window.on('scroll', scrolling);
}, 0);
};
$(window).on('scroll', scrolling);
})();
I have created a parallax scroll, which seem to be working fine in firefox however in the chrome browser there's a slight jump on the body text when scrolling. click here scroll to the about section. I am not sure if t this is a css or JS issue.. below is a snippet i have incorporated into my parallax function
Does anyone know how i an fix this issue?
$(document).ready(function(){
// Cache the Window object
$window = $(window);
// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
$('[data-type="background"]').each(function(){
// Store some variables based on where we are
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
// When the window is scrolled...
$(window).scroll(function() {
// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
( (topOffset + $self.height()) > $window.scrollTop() ) ) {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $self.data('speed'));
// If this element has a Y offset then add it on
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$self.css({ backgroundPosition: coords });
$('[data-type="scroll-text"]', $self).each(function() {
var $text= $(this);
var pos = ($window.scrollTop()/10) * $text.data('speed');
var curP = $text.css('margin-top');
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome) {
$text.animate({
paddingTop: pos,
}, 200, 'linear', function() {
// Animation complete.
});
} else {
$text.css('padding-top', pos);
}
});
}; // in view
}); // window scroll
}); // each data-type
}); // document ready
Some suggestions:
1.) Use position: fixed to avoid any jitter, as you'll be taking the element out of the document flow. You can then position it using z-index.
2.) Cache as much as you can to ease processing time.
3.) Math.round may not be necessary, but try adding this CSS to your moving areas: -webkit-transform: translate3d(0,0,0); This will force hardware acceleration in Chrome, which may ease some of the jittering. (It looked smoother on my screen when I added this with Inspector, but it didn't get rid of the jumpiness with the scroll wheel.) Note: Don't do this on your entire document (e.g. body tag), as it might cause some issues with your current layout. (Your navigation bar didn't stick to the top of the window, for instance.)
4.) If you have any animations running as part of your parallax logic (tweening the margin into place or something along those lines), remove it - that would probably cause the jump you see.
Hope this helps. Best of luck.
I see the same jittering in FireFox and Chrome (Mac). Looking at your containers, one thing that's glaring at me is the pixel position that's being calculated/used.
Chrome: <div id="about-title" style="margin-top: 1562.3999999999999px;">
FireFox: <div id="about-title" style="margin-top: 1562.4px;">
Browsers aren't going to allow content to sit at 1/2 pixel, let alone 0.3999999 of a pixel. I think it's moving it, and trying to calculate whether to round up or round down. It jitters because it's calculating with every click of your mouse wheel.
Thus, I'd try adding Math.round() to your positions so that the containers are never being left in limbo.
Take a look at the code here: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html
Firebug some of the elements, and you'll see that their only fraction of a pixel is '0.5'. Most of them (the bulk) go to round number values.
You are going to have to change the way that the scrolling works (i.e. change how the spacing is computed), but this can be fixed by adding the position:fixed CSS element to the page elements that are scrolling. The problem is coming from the time that it takes for the JavaScript to process and then render.
For example, on your page you would set each of the <div> tags containing text to have a fixed position and then use the JavaScript/JQuery function to update the top: CSS element. This should make the page scroll smoothly.
Have you tried adding the preventdefault inside the scroll function?
$(window).scroll(function(e) {
e.preventDefault();
// rest of your code
}
In a previous question I created a fairly good parallax scrolling implementation. Jquery Parallax Scrolling effect - Multi directional You might find it useful.
Here's the JSFiddle http://jsfiddle.net/9R4hZ/40/ use the up/down arrows or scroll wheel.
Using padding and margin for the positioning are probably why you're experiencing rendering issues. While my code uses scroll or keyboard input for the effect you can loop the relavent portion and check the $moving variable until you reach the desired element on screen.
function parallaxScroll(scroll) {
// current moving object
var ml = $moving.position().left;
var mt = $moving.position().top;
var mw = $moving.width();
var mh = $moving.height();
// calc velocity
var fromTop = false;
var fromBottom = false;
var fromLeft = false;
var fromRight = false;
var vLeft = 0;
var vTop = 0;
if($moving.hasClass('from-top')) {
vTop = scroll;
fromTop = true;
} else if($moving.hasClass('from-bottom')) {
vTop = -scroll;
fromBottom = true;
} else if($moving.hasClass('from-left')) {
vLeft = scroll;
fromLeft = true;
} else if($moving.hasClass('from-right')) {
vLeft = -scroll;
fromRight = true;
}
// calc new position
var newLeft = ml + vLeft;
var newTop = mt + vTop;
// check bounds
var finished = false;
if(fromTop && (newTop > t || newTop + mh < t)) {
finished = true;
newTop = (scroll > 0 ? t : t - mh);
} else if(fromBottom && (newTop < t || newTop > h)) {
finished = true;
newTop = (scroll > 0 ? t : t + h);
} else if(fromLeft && (newLeft > l || newLeft + mw < l)) {
finished = true;
newLeft = (scroll > 0 ? l : l - mw);
} else if(fromRight && (newLeft < l || newLeft > w)) {
finished = true;
newLeft = (scroll > 0 ? l : l + w);
}
// set new position
$moving.css('left', newLeft);
$moving.css('top', newTop);
// if finished change moving object
if(finished) {
// get the next moving
if(scroll > 0) {
$moving = $moving.next('.parallax');
if($moving.length == 0)
$moving = $view.find('.parallax:last');
} else {
$moving = $moving.prev('.parallax');
if($moving.length == 0)
$moving = $view.find('.parallax:first');
}
}
// for debug
$('#direction').text(scroll + " " + l + "/" + t + " " + ml + "/" + mt + " " + finished + " " + $moving.text());
}
May not be related to your specifics, but I had a jumpy parallax scrolling problem, I was able to solve it adding the following CSS for the fixed portions of the page:
#supports (background-attachment: fixed)
{
.fixed-background
{
background-attachment: fixed;
}
}
Not sure of all the specifics, but found at Alternate Fixed & Scroll Backgrounds