Is this scrolling function possible?

Question

I have been developing an application in work and want to add some functionality to my Home Page where the user selects what service they want to go into.

At the moment I have 4 services they can click on, but in the future their could be hundreds.

I am trying to find out what functionality I can use to achieve the effect I want on this page and I don't know anything about it so I have drew a picture trying to explain.

My Application Screen Now

enter image description here

What I want to happen

enter image description here

Sorry if its hard to understand I just don't know any of the functionality needed or name of the function

@Mr_Green Functionality name or any other sources I can look at to achieve this? p.s. Anything is possible. — user3091919, Nov 28 '14 at 13:36
This function is known as slider (AFAIK). check for jquery slider. you might find one. ps: if you think anything is possible, edit your question title. — Mr_Green, Nov 28 '14 at 13:38
@Mr_Green I'll give you that one! Thanks for your help mate :) — user3091919, Nov 28 '14 at 13:39
This one is getting close i think: http://darsa.in/sly/ try to edit this one :-) — Stefan, Nov 28 '14 at 13:42
Have you ever used jQuery before? Surely you must have explored the top 10 of the top 15 jQuery plugins made. — Piotr Kula, Nov 28 '14 at 13:42
http://www.jqueryscript.net/demo/3D-Rotating-Carousel-Plugin-with-jQuery-CSS3-Circular-Carousel/ Just listen to the scroll event and apply the same logic as the next/prev button in this demo. — VVV, Nov 28 '14 at 13:43
@Stefan This one looks brilliant and what I'm looking for ill check other ideas people have sent in aswell. — user3091919, Nov 28 '14 at 13:46

score 0 · Answer 1 · answered Nov 28 '14 at 13:38

0

You can use image sliders. For example

http://www.jssor.com/demos/scrolling-logo-thumbnail-slider.html

There are many more. Please google it. Thanks

answered Nov 28 '14 at 13:38

Biswas

598
2
16
34

These all look like you click to move to the next image, I need a scroll effect when they move the mouse wheel – user3091919 Nov 28 '14 at 13:42
you cah just add the mouse scrolling event on the plugin by yourself. Thanks – Biswas Nov 28 '14 at 13:54

score 0 · Answer 2 · answered Nov 28 '14 at 13:38

0

google it, there are a lots of way for do this eg.

answered Nov 28 '14 at 13:38

Michael

425
3
13

I see these effect but they are all scrolling down? – user3091919 Nov 28 '14 at 13:41
the first one can scroll up too but I prefer this one http://joelb.me/scrollpath/ – Michael Nov 28 '14 at 14:40

BEAGM · Answer 3 · 2014-11-28T13:46:58.723

You want to use the "mousewheel" event, which is not supported by every browser.

Try first a script that detects the event. Then work on the animation (with recursive setTimeout etc).

Edit : if you need an infinite scrolling menu (last icon followed by first icon, and conversely), create an array of objects, with every object having the icon and the url as properties. The function should show the following and preceding element, and go back at the end (or the beginning) when reaching an extremity of the array (use "if, else if"). You can then animate it with css or jQuery.

score 0 · Answer 4 · edited May 23 '17 at 11:50

Yes, It is possible by following these steps:-

creating a global variable window.service = 0 (represent the current state of page) and attaching a scroll event.
You can use this answer (How can I determine the direction of a jQuery scroll event?) for attaching up and down event to move left and right to the service respectively.
Every time you move up window.service -= 1 and every time you move down window.service += 1. Use boundary condition to check it does not go over the limit.
Now, you have 5 conditions( window.service belongs to [1,5]). Use these condition to show 5 different css conditions which will be representing 5 different scenario that you are trying to obtain.

or Use any of the plugins suggested above.

Is this scrolling function possible?

4 Answers4