i'm pretty sure a few of you guys know the website medium.com articles page.
For example, here: Click
There is a very "easy" effect on this page when you scroll down – opacity and transform changes. Not a big deal at first sight. I've implemented the same effect probably more then 10 times on websites already.
But if you take a closer look at it, you can see how absolutely perfect smooth this is. Seems like the text is perfectly gliding above the surface. (Im checking it on the latest Chrome)
I was keen if this is just imagination, and quickly built up the same thing to check this. So i came up with this code:
var windowTop;
var limit = 420;
function parallax(){
parallaxElem.css({
"opacity": (1 - (windowTop / limit)),
"-webkit-transform":"translate3d(0," + (100 * (windowTop / limit)) + "px,0)",
"-ms-transform":"translate3d(0," + (100 * (windowTop / limit)) + "px,0)",
"transform":"translate3d(0," + (100 * (windowTop / limit)) + "px,0)"
});
}
$(window).on('scroll', function(){
windowTop = $(window).scrollTop();
parallax();
});
And it's by far not as smooth as the code on the Medium website.
Anyone any idea, what they are doing to get this super smooth scroll transform effect? I just can't find it out – their code is too complex/too compressed for me, to get any information out of it.
Thank's a lot for any answer in advance!
Regards
Mark
The biggest improvement is to go from this:
$(window).on('scroll', function(){
windowTop = $(window).scrollTop();
parallax();
});
to:
$(window).on('scroll', function(){
window.requestAnimationFrame(parallax);
});
Store windowTop inside of the parallax function. There's no point in making that an out of scope variable.
Additionally, although you don't have it in your sample code "parallaxElem" should be an out of scope variable, because you don't want to do a DOM search for the element on every scroll.
Related
The problem that I am facing is exactly the same as in this question - Need small logic for infinite scroll jquery
The only problem is I cannot use the accepted solution. The solution is perfect but does not work in my case.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
/*Ajax logic*/
}
});
This logic asks the user to scroll to the end of the page for the condition to be satisfied and then makes the call. This used to work before but now I had to increase my footer by adding some content which is much larger than the window height. The user no longer scrolls down to the very end for this logic to work.
The solution adds an offset but the problem is that when the user scrolls up and down a little(with the solution of the above mentioned question) he makes multiple ajax calls which are not desired.
I am racking my brains but I would like to hear from you guys to!
Thanks
I found an answer myself and jotting it down for anyone else with a similar problem.
Logically, I capped the ceiling for $(window).scrollTop() so that it doesn't increase once it reaches the footer. Subtracted the footer offset and added one more condition with the difference of 1 px. The code is like this:
$(window).scroll(function() {
var scrollpos = $(window).scrollTop();
var docHgt = $(document).height();
var wndwHgt = $(window).height();
var footerH = $("#footer").height();
/* Capping to a Ceiling */
if(scrollpos > (docHgt - wndwHgt-footerH))
scrollpos = (docHgt - wndwHgt-footerH);
if (( scrollpos >= (docHgt - wndwHgt-footerH))&& (scrollpos <(docHgt - wndwHgt - footerH + 1))) {
/*Ajax logic*/
}
});
Not the best way but a tradeoff!
Currently, I’m using the following formula:
var scrollTop = $(this).scrollTop();
$('.item').css({opacity: 100 / scrollTop});
But if you watch on the home page of my website, its stops fading at one moment,
Someone please guide me better formula
My website
You should try this:
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
Source: https://codepen.io/nickcil/pen/sfutl/
I've used this JS code to achieve what I believe you're trying to do here, before on a couple of sites I've built:
$(window).scroll(function(){ // standard JS document open
$(".top_section").css("opacity", 1 -
$(window).scrollTop() / 260); // set where you want fade to begin
});
I need to setup a section of a template I'm building out for a client that contains a parallax. This means I wont always know where that section will end up on the page. This creates a problem, the y-axis of my parallax is often off because the current parallax technique I'm using requires me to set the start and stop points.
I could possibly get around this if I could set the image on repeat and set the spacing between images to prevent it from showing in that window, that said, background-repeat: space; doesn't seem to be adjustable.
I'm currently using http://www.franckmaurin.com/blog/the-parallax-effect-with-jquery/ does anyone know of a work around to make parallax images look great when it's left to the clients hands or another javascript technique that would do this for me?
Thank you.
$.fn.parallax = function(options){
var $$ = $(this);
offset = $$.offset();
var defaults = {
'start': 100,
'stop': offset.top + $$.height() + 800,
'coeff': 0.95
};
var opts = $.extend(defaults, options);
console.log("Parallax Works!");
return this.each(function(){
$(window).bind('scroll', function() {
windowTop = $(window).scrollTop();
if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
newCoord = windowTop * opts.coeff;
$$.css({
'background-position': '0 '+ newCoord + 'px'
});
}
});
});
};
// //parllax bind
if ($('.commit').length){
$('.commit').parallax({ 'start': 51 , 'stop':offset.top + $$.height(), 'coeff':-0.65 });
}
Not a lot to show as far as code goes, this script may just not be robust enough to do the job.
Without further ado, in similar cases, I recommend using an out of the box solution like Parallax.JS, which only needs to add an image input and is widely configurable.
But for parallax effects, there is no need for JavaScript as it is an inbuilt feature with CSS3, with background-attachment: fixed;. For an actual example check out this w3 article. In this very case it is really recommended to use this version simply for performance reasons, as CSS is enhanced by the GPU, while, if written wrong, JavaScript is not. On your provided link the effect feels slow and cloggy, and believe me, not my computer is the problem.
In general terms, always use CSS for animation and such effects, and with parallax, you only have to use this one command.
I have an idea for a website but I am not yet sure on how to achieve the desired result. The end product would be a website where a series of visible connected nodes are generated based on data that comes back from a database.
The first concern is that I will need the website to accommodate any generated content which could span in any direction.
So does anyone know how to achieve an 'infinite' scrolling website? I have seen this kind of thing for online idea boards where the user can move their mouse in any direction and the page begins to scroll, with the page expanding seemingly infinitely.
You can try something like this:
// Fetch variables
var scrollTop = $(document).scrollTop();
var windowHeight = $(window).height();
var bodyHeight = $(document).height() - windowHeight;
var scrollPercentage = (scrollTop / bodyHeight);
// if the scroll is more than 90% from the top, load more content.
if(scrollPercentage > 0.9) {
// Load content
}
The first thing that strikes my mind on the concept of infinite scrolling is Facebook! The page at qnimate might be the code you are looking for -
qnimate.com/facebook-style-infinite-scroll
For infinity scrolling in either direction you will have to tweak the code to include window.pageXOffset
Other links that I would recommend checking out is -
sitepoint.com/jquery-infinite-scrolling-demos/
tutsplus.com/articles/vertical-and-horizontal-scrolling-with-fullpagejs
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/