Easing page scrolling? - javascript

is there anyway to ease my page scroll? I'm doing a horizontal page scrolling. Its working, as you can see below, but I want to make a ease scroll.
Already tried to scroll it whit css3 transitions on jQuery (via Transit) and didnt work because it triggers too many times.
How can I do this?
Thanks!
$('#holder')
.bind('mousewheel', function(event, delta) {
this.scrollLeft -= (delta * 20);
});

You would have to use animate function. A simple example I have done is here
http://jsfiddle.net/bd6pf/2/
Scroll to the right and and try to scroll on element

I have been over this and its best to just use jQuery to do this or at least javascript, I know its cool to use CSS3 and I try to use it as often as possible but in this case I would stick with the javascript.
Here is a great one that I have used:
http://pagescroller.com/

Related

Transform element based on scroll position without using scroll events (Css only if possible)

I currently have a full screen hero image slideshow on the homepage of a site. I have an javascript effect which gets the scroll position and divides it by 1.5 then sets the image transformY position causing a parallex effect.
Here is the code I currently have:
$(window).on("load scroll resize", function () {
$("form:not(.blive_PageEdit) .hero-img .blive_Control img").css({ "margin-top": $(window).scrollTop() / 1.5 });
});
This works as I want, but I have noticed that performance is a major issue expecially on browsers which support asynchronous scrolling which causes a juddering effect.
What I want to know is if there is a better way to implement this? What would be perfect would be to have something like the following but I don't think this is possible with just CSS:
img {
transformY(calc(scrollTop / 1.5));
}
I have also looked at IntersectionObserver, but I am unsure this would achieve what I want to do.
Any thoughts would be helpful. Thanks

Creating a slide up effect on a mobile device using CSS/JS

What I need to achieve is that when you swipe up the page from the arrows, the page needs to slide up and the user will be redirected to another page (as an intro).
I currently have a working way to use the slider:
The question is: how do I actually make an effect that looks like the page goes up when the slider is used?
There are many different ways to do it. As I prefer to do it without plugins (well except jQuery), here's my way to achieve this:
1. Detect the Swipe
This can be achieved with the "touchstart" and "touchend" events. If the touchstart event is fired, you'll get the coordinates of the touch position. When the touch ends, get it again and compare the distance.
There are many really helpful articles about this topic.
here or here or just google "javascript swipe"
2.Scroll down
Can be done in many different ways, depends on what animation you want. Google for "smooth scrolling javascript". If you use jQuery, this might be the easiest way:
function afterscrolling(){
$('html, body').animate({
scrollTop: $( YOUR_ELEMENT ).offset().top
}, 500);
return false;
};
You can use Hammer.js
var swipe = new Hammer.Swipe();
swipe.recognizeWith(swipeup);
See swipe-recogniser.
So once you recognise the swipe-up gesture, you can animate the div to translate up using css.
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
Refer this
Made a Codepen http://codepen.io/keephacking/pen/RaYxpm
Used jQuery touchSwipe and slideUp in jquery for the effect
For more about TouchSwipe ,Check link below.
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

Loop horizontal scrolling of two divs with mousewheel and buttons

I need to loop horizontal scrolling of wide block. Also I need to controll scrolling with mousewheel and buttons.
I have created working demo on codepen.
Demo on CodePen
Here I use Endless.JS for loop scrolling (works with 2 divs and more) and jquery.mousewheel for mouse wheel support. Also I write some code for arrows. On hover -> block start scrolling with animation.
animate({scrollLeft:'+=40'}
This method works great with mouse wheel but I got some trouble with arrows. After I have scrolled first few divs other div become blinking and works like artifact in game :) (see demo)
Can you help me? Maybe I need to use some other method or lib?
Thanks a lot.
You should probably avoid jQuery.animate here. Not exactly sure what causes the problem, but using timeouts seems to work fine. That way, you also have more control over the delay and animation speed. http://codepen.io/anon/pen/zGbLB
var timeout;
function loop_next(){
timeout = window.setTimeout(function() {
container.scrollLeft(container.scrollLeft() + 2);
loop_next();
}, 20);
}
function loop_prev(){
timeout = window.setTimeout(function() {
container.scrollLeft(container.scrollLeft() - 2);
loop_prev();
}, 20);
}
function stop(){
window.clearTimeout(timeout);
}

Parallax 'background-image/position/attachment' jQuery animation is jittery

Here's the breakdown...
wrapper (position:relative; overflow:hidden; )
section-container (position:absolute)
multiple child sections
I attach a mousewheel event listener and animate (with easing) the 'top' position of 'section-container'. As this position changes, the 'background-position' of each section moves vertically based on the position of 'section-container's 'top' property (continually updated through a setTimeout()).
All of that works as it should, except as the 'background-position' changes, the image has a bit of a jitter. This doesn't happen if the 'background-attachment' is set to 'fixed'... but I don't want that.
Can anyone explain this, with a possible fix? I continually refer to the https://victoriabeckham.landrover.com/ site and can't figure out what they're doing differently to get theirs operating so efficiently.
You can check this out, i believe its where they do most of the animating:
https://victoriabeckham.landrover.com/js/ScrollAnimator.js?v=471
I would have to say they have some kind of framework that they are using to accomplish this.
EDIT: Sorry didn't see the new answer above mine, seems like a good starting point.
-Ken
If you inspect this website carefully, you will able to use it like landrover site.
You need to use: scrollTo plugin and parallax plugin
And document jQuery should be like this:
$(document).ready(function(){
$('#nav').localScroll(800);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#intro').parallax("50%", 0.1);
$('#second').parallax("50%", 0.1);
$('.bg').parallax("50%", 0.4);
$('#third').parallax("50%", 0.3);
});
Ok. So I figured out my issue was when trying to animate() the 'section-container' on the 'top' property. I was using a "+=" to allow it to increment from its current position. Not a good idea when using 'mousewheel' events. I changed it to a hard-set variable that is continually incremented/decremented.

How to solve element flicker while scrolling with parallax effect in JavaScript?

I am trying to re-create website with parallax effect using JavaScript. That means that I have two or more layers, that are moving different speeds while scrolling.
In my case I'm moving only one layer, the other one remains static:
layer 1 = website text;
layer 2 = element background;
for this I'm using simple source code (with jQuery 1.6.4):
var docwindow = $(window);
function newpos(pos, adjust, ratio){
return ((pos - adjust) * ratio) + "px";
}
function move(){
var pos = docwindow.scrollTop();
element.css({'top' : newpos(pos, 0, 0.5)});
}
$(window).scroll(function(){
move();
});
The Problem:
- All calculations are done right and the effect "works" as expected. But there is some performance glitch under some browsers (Chrome MAC/Windows, Opera MAC, IE, paradoxically not Safari).
What do I see during scrolling?
- While scrolling the background moves in one direction together with scroll, but it seems to occasionally jump few pixels back and then forth, which creates very disturbing effect (not fluid).
Solutions that I tried:
- adding a timer to limit scroll events
- using .animate() method with short duration instead of .css() method.
I've also observed, that the animation is smooth when using .scrollTo method (scrollTo jQuery plugin). So I suspect that there is something wrong with firing scroll events (too fast).
Have you observed the same behavior?
Do you know, how to fix it?
Can you post a better solution?
Thanks for all responses
EDIT #1:
Here you can find jsfiddle demonstration (with timer): http://jsfiddle.net/4h9Ye/1/
I think you should be using scrollTop() instead and change the background position to fixed. The problem is that setting it to absolute will make it move by default when you scroll up or down.
The flicker occurs because the position is updated as part of the default browser scroll and updated again as part of your script. This will render both positions instead of just the one you want. With fixed, the background will never move unless you tell it so.
I've created a demo for you at http://jsfiddle.net/4h9Ye/2/ .

Categories

Resources