How to achieve custom jQuery page scroll api as in this example? - javascript

I recently came across one of Google's projects "What do you love" and saw a nice feature there.
If you visit http://www.wdyl.com/#monkeys
On your left you will see a small box that allows you to scroll the page "Quiet Cool" I thought when I saw it ))) I looked over the internet to find jQuery plugins or Tutorials on how to do similar thing (jQuery/javascript is not my strong side), but I couldn't find any.
So could anyone please explain how to make similar "Api/Feature" and provide code snippets if possible, that would really help. Ohh an jQuery solution is preferable.

As is so frequently the case, your best bet is to open your browser's Developer Tools and look at what's actually going on there! In this case, it looks like a static background (the grey boxes) with a blue frame on top of it, somehow made draggable, that calls one of the window scrolling functions after doing a bit of proportions arithmetic to determine how far to scroll.

Here is a simple demo I put together to show you how to animate the scroll of a page: http://jsfiddle.net/jasper/3cnKn/1/
In my example, the basic idea is to bind to a click event for some links and animate the scrollTop of the html element:
$('#nav').find('a').on('click', function (event) {
event.preventDefault();
$('html').animate({scrollTop : $(this).attr('data-scrollTop')}, 500);
});

Related

How to make the "one scroll" on a one page website

I'll start by linking you what I'm talking about.
I'd like to know how to make such a scroll like that, you just need to scroll once and boom you'll get to the next section.
Thus, how to make a one page website (yeah, maybe I'll add some more sections but wanted to know what are the properties to do that)
This is what I mean by one page websites.
Try FullPage; it supports both vertical and horizontal sections.
There are lots of libraries available. I would suggest Fullpage for this kind of CSS. It will provide you some extra features like horizontal scroll within Vertical scroll which will make you site attractive.
Hope this will help.
You can use class for each section of your page and then by using of that classname and jquery you can do the same.For more information and demo you can check the link below.It may help you.
You can check the demo and solution below here the one page section scrolling is given in great way.
Check this demo

Unable to get skrollr parallax effect on header image

everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/

Automatic scrolling text right to left in a div

Hey I want to make text scroll from right to left in a div i have. I want this to happen automatically and at a constant flow.
Now when i first started with HTML the tag was used to do this, I've looked around a few websites and it seems that this tag still seems to be going. My question is really if this is the best way of achieving this affect or is there a better way of doing it? for example, javascript,Jquery and/or css Maybe even something in HTML5?
This shows what i am looking - http://www.gftuk.com/
Notice the scrolling stops when the user hovers over the text.
Thanks for the time.
<marquee>hello world</marquee>
Personally, I think the best way to achieve this would be to use jquery. There are a few plugins out there which do the job nicely.
If you want to automatic with "scroll" text ( structure of DOM is not complex) .
<marquee>This text will scroll from right to left</marquee>
But you will see with "marquee" the scroll is not smooth.
So you can use simplyScroll plugin
http://logicbox.net/jquery/simplyscroll/
( I see it in this code of your link : http://www.gftuk.com/. in next time, please open dev tools or firebugs and see source code of any pages when you want to have the same effects )
Hope it helps you

Best way to create a side-scrolling inline element?

I am attempting to get out of amateur status, so forgive any false assumptions or silly questions.
I am interested in updating my web site http://scenicdesktops.com, so that instead of the old-school inline element that scrolls in a traditional manner (independent of the rest of the page), I would like to implement a movable inline element with smooth, side-to-side, page-to-page style scrolling. I would like to do this using side buttons, which, when clicked, would result in a smooth, moving transition of this middle section to the next / previous page.
It would also be convenient to have page links at the bottom which move the middle section strait to that specific page, all with the same smooth side-to-side motion.
I am a fan of minimalistic code, so the lighter the better. Perhaps I might need jquery or mootools for this, but my know-how ends right about there. Can anyone point me in the right direction?
Use jQuery and jQuery Tools, then you can:
$(".scrollable").scrollable();
(very minimalistic)
See http://flowplayer.org/tools/demos/scrollable/index.html for a demo

Javascript Inertial side scroll on mouseover

As I was looking through Killers Music html5 site, I wanted to do what they did with main navigation where when mouse is over to left or right, it will scroll infinite.
I have when through their javascript file, also inspected elements and one thing was for sure, they update left css property to scroll the background images.
I am not quite sure how to do that smoothly. I know I can use setTimeout to update the left but not sure what value I have to calculate to apply.
I am going to need someone's help or if there is any tutorial for it, it would be wonderful.
Please help.
It uses the jQuery easing plugin.
Some demo are available here: http://jqueryui.com/demos/effect/easing.html

Categories