Javascript Inertial side scroll on mouseover - javascript

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

Related

Page Pilling or FullPage - How to make this scroll effect

I know that it is not a very precise question, but I do not know where to start, I have an example which is the objective design, however I cannot find any solution and / or documentation to help me make this type of layout.
More specifically this is the scroll effect that I want to do, http://modern8.com/d5-process/
It should be noted that I have already tried with FullPageJS and I have not been able to recreate it, if you can see the effect consists of applying fixed and relative position according to the scroll but as I indicate, I do not know where to start.
I really appreciate the help you can give me.
The effect is the same as in pagePiling.js but pagePiling.js uses snap scroll so you'll snap to each section. There's no scrollbar.
The closer you can get with fullPage.js is by using the paid Parallax extension with autoScrolling: false (to avoid snap) and placing the whole content of the section inside the fp-bg element.
There's an article about it here.
https://alvarotrigo.com/blog/how-create-tumblr-website-effect/

Topbar covering webpage header

I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?
Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.
Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)

page animation on scrolling it like movie

I found this page http://www.wanderworld.io/ when you scrolling its start animation on scrolling and scenes are changing. how to create something like this? Please help me, any example on jsffidle or codepen?
To point you in the right direction, this is called parallax scrolling and can be accomplished using CSS, but is most commonly done in Javascript / jQuery.
This library is great for parallax animation and would probably accomplish most, if not all, of what the example site does: http://prinzhorn.github.io/skrollr/
Basically the idea is to have a page scroll listener that tracks the window.scroll position. At certain ranges, elements move in and out of the screen. The concept behind it is relatively simple, but it can be difficult to implement and can be as complicated as you choose to make it.

jQuery - Continuously scroll div on hover

I wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly.
This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll.
Also, this needs to be actually scrollable, so it will work on tablets/phones.
I have no idea here to start so any directions would be great.
Thanks,
Jake!
Image of netflix shelf.
UPDATE: Check out the Smooth Div Scroll jQuery plugin. It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward.
Original answer:
I might be off with that, but check out these two plugins:
jQuery Coverflow plugin or the jQuery Imageflow plugin
I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. Hope this helps.
Best regards,
Michael

Imitate a iPhone swipe view on a webapp (like the weather app)

I'm trying to find a Javascript snippet that I can archive the UIScrollView + UIPageControl effect of the iOS using Javascript and CSS3.
Generating the page control to a dot to each view and do the switching is very easy, but the complicated part it is to do the elastic movement.
I would want to do this myself, but it seems to much work to me, like hours of work, tried googling, but I not found anything. I don't like JQuery but the mobile framework doesn't seems to do this.
If I had to do this by myself, do you guys have any suggested approach? I'm thinking in using a parent div, with a bunch of divs inside for each view. Use the parent with overflow: hidden;
and attach event to the parent view and listen to drags and bind to the horizontal scroll offset. This would be a good way? or using css transitions with left or translate-x would be more smooth?
EDIT:
This is what I tried (not working very well): JSFIDDLE
Yeah,
Im not sure about touch swipes, although i think the 'activate' or 'touchstart' handler might be useful. Using CSS3 transitions to achieve the elastic movement is quite smooth, just alter the left or right style property of your internal div and the transfom will move from its current position to where you need it to be.
This is not the worlds bestt example but have a look here
villasanrafael.eu/Gallery.php

Categories