I'm working on horizontal website. I would like to create 2 buttons (left button and right button) which can help users to scroll to left and right.
The site that I'm working on
The functionality that I wanted to create is, when I mouseover the button the page will start and continue the scrolling action until the mouse move away from the button then the page stop scrolling.
I found something from codepen "http://goo.gl/uTQdzD" that is similar to what I looking for but that is not function in the way I wanted. It's required to keep clicking it only it can continue scroll, once it clicked then it only move a certain pixels distances and stop then have to click again... even I tried to change to mouseover, the same thing... I have to moving the mouse in and out the button only it can continue to scroll the page.
I'm not a professional web coder or developer but just a new guy. I Hope someone out here could help me out.
Thanks in advance.
Here you go: http://codepen.io/caseybaggz/pen/uBysA?editors=001
I changed the .click to a mouseenter event which is what you are looking for. Additionally, the increments that you noticed were happening because of the step variable being assigned 400. So, I just replaced the 400 with wWidth and within the mouseenter function, told it to scroll the bodyWidth.
I'm not totally sure why you would want to do this? The natural flow of web design is to design/build sites vertically. To have the user scroll horizontally is a little awkward regarding the UX and could be considered bad design…especially now that devices come into play.
Be sure to learn web-design and UX standards first before you get into a position for developing sites. It not only helps to contribute for bettering the web, but also the UX. ;)
Hope this helps and good luck!
Related
Context
I am creating a site where there are sections stacked in rows, and each row takes up the full viewport.
I don't want the site to be scrollable normally, and would instead like the site to "snap" to the bottom of each section, so that I can then play out the animations taking up the full view port.
Issue
I took the approach of listening to scroll events, and then triggering a nextsection.ScrollIntoView when the user had scrolled far enough to snap to the next view.
This doesn't work well though, as the ScrollIntoView is interupted by user scroll activity, including the latent scrolling of the mouse that hangs around for about 300ms after you've scrolled.
I managed to get it sort of working by using a setTimeout(scrollIntoView(), 400), but this takes too much time and relies on the user not interacting with the site after scrolling.
I made a CodePen (here) showing the type of setup I'm working with, however to see the issue you need to open it as a webpage itself, as CodePen doesn't perform a smooth animation when using ScrollIntoView and just jumps there.
I need a smooth and uninterruptable animation as the site switches from one section to another, but as of yet I've found no working ways to implement this.
Thanks for any answers.
I've built that page. and it's using the framework vue.js 2 and Jquery.
It's blowing out my head because that page is very slow.
Could you expert guys help me with some idea about how to speed up it.
Thank Guys.
The page is that:
http://softwareapqp.com.br/teste/public/pecas/21/cronograma
you can click in "editar" button and in blue button which opens you can try to drap and drop it. You'll see how it's realy slow.
or, you can click in "Desenvolvimento Fornecedores" or "adicionar atividade" and see how the modal is slow to open.
Had a quick look, your right it's not a seamless experience. It doesn't look like a problem with JavaScript, this is more of a UI/UX problem. One thing stood out, you have a horizontal scroll inside a vertical scroll inside the vertical scroll of the page itself.
Maybe you can have panels with left right panning navigation arrows that asynchronouously loads content when the user clicks the arrows instead of scrollable windows. This way, you're only loading what the user can see and scrolling the page wouldn't be such a pain. Only load the data/HTML when it's useful, otherwise it's just bloating up your memory/DOM.
I'm currently working on a website. I want to have a fixed text (I know how to do that) that changes if you scroll.
So if you're on top of the page it shows '0' and then, while scrolling, the number goes up and up and when you scrolled one viewport-height it should be '10000'.
I think this should be done with javascript, but I'm just a beginner with it. Could you please help me? Thank you very much.
edit
Thanks Ajay for the tip with the onscroll function. But this always just adds a number on scrolling. I want something like this (look at the top left hand corner). Where the size is relative to the position on the site and not the scrolling wheel.
Try using the onScroll event of javascript.
Here is a useful link to learn.
The wording in the title is weird, apologies. It's hard to explain the effect.
I currently have this, it works best on Chrome:
http://mattluckhurst.com/dev/
My client wants each panel to slide up as the user scrolls down, covering the previous panel. I am currently accomplishing this by setting the "current" panel to have position:fixed and top:0 as soon as the page scrolls to it. The panels each have a z-index that corresponds to their vertical position on the page. So ideally:
You scroll down. when the next panel is halfway up the window, the scroll animates to get you all the way there, then that panel is snapped to the top so the next one can come in over it.
It's working pretty well in Chrome, but I am getting a lot of flickering and stuff elsewhere. Also on mobile it's a mess, but we really want a nice smooth swipe up down.
I know fixed elements can get pretty funky on mobile, so I am wondering if that is the problem, or if I should be using something other than just window scrolling for the animation / effect.
I see more complex parallax stuff all the time, so this should be pretty doable, I'm just not sure where to start.
Thanks for any help! Let me know if you need more info.
A few libraries that might help you:
https://github.com/dirkgroenen/jQuery-viewport-checker
https://github.com/janpaepke/ScrollMagic
https://github.com/matthieua/WOW
https://github.com/jlmakes/scrollReveal.js
https://github.com/Prinzhorn/skrollr
I've seen one or two sites lately that take over the default scrolling in browsers.
When scrolling down, it will animate a scroll down to the next content section (stopping any scroll events during the animation.
When scrolling up, the same thing happens, but to the previous section.
The site I currently have is here: http://cirkut.net/sub/proven/parallax/
I've got the parallax down, but I can't think of an easy way to takeover the scroll and animate this. I'm fairly certain there must be a js/jQuery plugin to do this (I'm currently using stellar.js).
I've been searching for hours to find the example of what I want, but I can't find anything. If I find one, I'll come back and edit this.
Thanks for any leads or help!