I'm an interface designer new to development, and I've run into a snag with a side project I'm working on. I'd like to create a long, horizontally-scolling parallax scene. Users can use their mousewheel to scroll the view horizontally. (I'm currently using this JQuery plugin to help me accomplish this: http://www.pixxelfactory.net/jInvertScroll/)
Additionally, I'd like to ability for users to hover over a 20px gap on the left or right edge of their browser window to scroll the view in that direction for as long as they hover there. (As a reference, this interaction is based on a lot of MOBA games like LoL, Dota 2, or HOTS, where users can hold their cursors over an edge of the screen to pan around the map.)
I've found a sample script (shown below), but it doesn't accomplish exactly what I'm trying to do. In this example, the screen is divided in half vertically, and hovering in the top or bottom section scrolls the view up or down. As I mentioned above, I only want a 20px wide by 100% height of the screen area which a user can hover to scroll their view.
My current source:
$(document).mousemove(function(e) {
$("html, body").scrollTop(function(i, v) {
var h = $(window).height();
var y = e.clientY - h / 2;
return v + y * 0.1;
});
});
Any suggestions would be amazing!
First make 2 divs, one for the left and one for the right. Set their position to fixed in CSS and make them scroll the page while hovering over them.
This is what my JS test code looks like:
var offset = 0;
$(document).ready(function(){
$('.left').bind('mouseenter', function() {
var self = $(this);
this.iid = setInterval(function() {
offset += 300;
$('html, body').animate({
scrollTop: offset
}, 1);
}, 10);
}).bind('mouseleave', function(){
this.iid && clearInterval(this.iid);
});
$('.right').bind('mouseenter', function() {
var self = $(this);
this.iid = setInterval(function() {
offset -= 300;
$('html, body').animate({
scrollTop: offset
}, 1);
}, 10);
}).bind('mouseleave', function(){
this.iid && clearInterval(this.iid);
});
});
Here is the full example:
https://jsfiddle.net/h596y5rs/1/
Related
I have a page on a website i am working on, that includes many images in a div in a grid (map). I made the div show a scroll bar at overflow and used jquery to enable scrolling via dragging and it works as intented with only a hundred or so showing at a time.
My only issue is, that since there are thousands of small images, moving the mouse only a bit will already result in blowing past a lot of objects.
My question now is, how can i modify my code, so that moving the mouse over the screen once will only scroll about one tenth of the div's width. So basically i want to reduce the scrolling speed.
I am super new to javascript etc. so please be patient.
<div id="map" class="center unselectable overflow">
lots of images here in a grid</div>
<script>
var clicked = false, clickY, clickX;
var map = document.getElementById('map');
$(document).on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickY = e.pageY;
clickX = e.pageX;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('html').css('cursor', 'row-resize');
$(map).scrollTop($(map).scrollTop() + (clickY - e.pageY));
$(map).scrollLeft($(map).scrollLeft() + (clickX - e.pageX));
}
</script>
TLDR: how to I reduce the drag to scroll speed in jQuery?
A little more elabouration from my comment: it seems like you are trying to dampen the scrolling speed. Mathematically, this means all you need is to reduce the value you feed to the .scrollTop() and .scrollLeft() functions. This can be done by dividing them by a set, arbitrarily determined factor, so that the transformation is linear. An example will be, if you want to dampen your scrolling speed by a factor of 10×, then you simply divide the values by 10:
var updateScrollPos = function(e) {
var scrollTop = $(map).scrollTop() + (clickY - e.pageY);
var scrollLeft = $(map).scrollLeft() + (clickX - e.pageX);
$('html').css('cursor', 'row-resize');
$(map).scrollTop(scrollTop / 10);
$(map).scrollLeft(scrollLeft / 10);
}
Pro-tip: since you are accessing $(map) several times, you can (micro)optimize your code by caching it:
var updateScrollPos = function(e) {
var $map = $(map);
var scrollTop = $map.scrollTop() + (clickY - e.pageY);
var scrollLeft = $map.scrollLeft() + (clickX - e.pageX);
$('html').css('cursor', 'row-resize');
$map.scrollTop(scrollTop / 10);
$map.scrollLeft(scrollLeft / 10);
}
let's say I have the follwing function:
window.smoothScroll = function(target) {
var scrollContainer = target;
scrollContainer.scrollIntoView(true);
}
How can I make the page scroll 20px above the element instead of scrolling to the element itself?
Thank you
Get the dimensional information for your element and then rather than scrolling it into view, tell the window to scroll to your element's top minus 20:
function scrollToJustAbove(element, margin=20) {
let dims = element.getBoundingClientRect();
window.scrollTo(window.scrollX, dims.top - margin);
}
Well, for smooth scroll you can use jQuery animate(). Check the code below:
window.smoothScroll = function(target, above, speed) {
let $scrollContainer = $target;
jQuery('html, body').animate({
scrollTop: jQuery(scrollContainer).offset().top - above
}, speed);
}
[Note: above will be your 20 (as you wanted 20px above the target), speed will be any number say: 900 like that.]
If it helps...!
If you are scrolling to a target from a non-fixed position on the page (say, from a sticky navigation bar) you have to take into account the current position that you're scrolling from. To do this, add window. scrollY to the y number in scrollTo (borrowing Mike's code):
function scrollToJustAbove(element, margin=20) {
let dims = element.getBoundingClientRect();
window.scrollTo(window.scrollX, dims.top - margin + window.scrollY);
}
Please change variables definations.
$scrollContainer and target vars are not same, you can use at below
window.smoothScroll = function(target, above, speed) {
let scrollContainer = target;
$('html, body').animate({
scrollTop: jQuery(scrollContainer).offset().top - above
}, speed);}
I've been trying to create smooth scrolling and trying to get it as smooth as http://lookbook.quechua.com/spring-summer-2016/en/hiking when you scroll down through the products but finding it hard to replicate / find anything else that could help.
At the minute Im using TweenMax and the Scroll To Plugin however this acts differently in Firefox and Chrome and it scrolls a set distance which I really don't want to have to do instead of it feeling like the user has full control of the distance.
What would the best way to replicate this be or how to get the page to scroll that smooth?
Demo
var $window = $(window);
var scrollTime = 1.2;
var scrollDistance = 135;
$window.on("mousewheel DOMMouseScroll", function(event){
event.preventDefault();
var delta = event.originalEvent.wheelDelta/40 || -event.originalEvent.detail/3
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);
TweenMax.to($window, scrollTime, {
scrollTo : { y: finalScroll, autoKill:true },
ease: Power1.easeOut, // Quart.easeInOut
overwrite: 5
});
});
I wanted to achieve an effect like this http://www.offset.com/
as you can see when it scrolls it slowly covering the carousel rather than scrolling with it.
I've tried using background fixed but the problem is the elements inside it will not stay in its position
Maybe there is a good technique in achieving this, Thanks
this is called parallax scrolling here is an example of how to do this using Jquery :
Live Demo
// Y axis scroll speed
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.container').each(function() {
var $element = $(this);
// subtract some from the height b/c of the padding
var height = $element.height()-18;
$(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
});
};
$(window).bind('scroll', update);
an other example it might help DEMO
I want to implement something like this page does: link
Look at the Clicker box. The box has two animations going on. One for the easeInQuad, then the other animation is for the easeInOutSine.
How can I implement something like that in my own function?
$(function()
{
var iH = window.innerHeight + 80;
var position = $(window).scrollTop();
$(window).scroll(function()
{
var scroll = $(window).scrollTop();
if(scroll > position)
{
$("body").animate(
{
scrollTop: iH
},1000,
"easeInOutQuart")
.animate(
{
scrollTop: parseInt($(window).scrollTop()) - 80
},1000,
"easeInOutQuart");
}
else if(scroll < position)
{
$("body").get(0).scrollTop = 0;
}
position = $(window).scrollTop();
});
});
The second animate doesn't work quite well. But it does scroll it up. But it scroll it up too much not just 80 pixels. It scroll it up to the top, then the animation gets into an infinite loop. After the second .animate it will continue to animate it again and again and again. Non stop.
I think its better to use a toggle effect
http://www.sohtanaka.com/web-design/examples/toggle/
$("body").stop(true)
This will clear all animation Queues on the object.
http://docs.jquery.com/Effects/stop