I found some lovely websites - http://www.mini.jp/event_campaign/big-point/, http://www.twenty8twelve.com/ and http://www.scozzese.com - all vertical scrolling, and all using a technique that aligns the 'pages' to the top of the browser when you scroll onto a new 'page' - even if you scroll half way into one.
Could anyone give me any pointers e.g. the right terminology/words I could use to search for more info, or a brief intro on the basics behind this technique, or if any jQuery etc plugins exist I can play and learn with?
I did a search of their code but nothing jumped out as how to do it, my Javascript and jQuery are still novice level.
Javascript Has some native methods like scroll(), scrollTo(), scrollBy() which (with some tricks) you can use to smoothly scroll the page. Together with offsetTop(), offsetLeft() you can achieve effects like on these sites.
There are also a lot of jQuery Plugins out there (e.g. like this google hit) to save you a lot of work with this.
Just search for these Methodnames, this should give you enough hits I guess.
Basic scrolling...
// Scroll
h = $(window).height();
t = $("mydiv").offset().top + $("mydiv").height();
if(t > h) {
$(window).scrollTop(t - h);
}
Their scrolling script isn't very smart. If I scroll the webpage down by repeatedly clicking on the down arrow, every time I click, it scrolls back up. So inevitably it doesn't work.
Related
So essentially what I am looking to do is have a section that has a solid background at some point on my page, and at the top of that a pair of sunglasses that as you begin to scroll, the reflection of the sunglasses changes from a few different images, as well as some text changes below the sunglasses to match each change in the sunglasses. Then once the final image is scrolled through, you reach a new section with different information. I am not entirely sure what this effect is called or how to achieve it, though I am guessing it will require a significant amount of jquery.
An existing website that demonstrates the effect I am trying to achieve is https://software.dakno.com/ with the phone effect in the second area down the page. (I do not own this site nor am I affiliated with the owners). I used chrome developer tools to figure out how it is working, but didn't get too far.
The site that I am working on is http://zack2171.github.io . This is an example site I am using to practice css and web design. The second section is where I am trying to get this effect to work. If someone could help me out a bit and give me some pointers, that would be great. Thanks
To achieve your goal, your definitely looking towards a mixture of jQuery and css. Most of your time will be dedicated towards the scroll position and at what pixel (Scroll distance) is covered to showing your images/text. I would start to align your image that you want in a position that is either fixed or absolute, to give you a better adjustment. Then start to play around with jQuery's Scroll Position. My personal approach would be to to detect the distance scrolled and after reaching those milestones (Half a page / 3/4 of a page) you would use jQuery to verify the position and then display those extra materials you want to show. I hope this kind of let you onto a good starting path.
Quick example, scroll down within the script below and check the console it logs!
$(window).scroll(function() {
console.log($(window).scrollTop());
})
.box {
background-color:#333;
height:5000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
I've been looking everywhere and I cannot find an answer for this specific need.
I want to create a page with this effect - I want the page to scroll down automatically and smoothly to a certain section on the page as soon as the user begins to scroll their mouse. The problem with using the plugin linked above is that I already have my page designed the way I want, I just want to implement this scrolling effect. I am by no means a javascript expert - I deal mainly with the layout aspects of web. But if someone could show me how I could use javascript to automatically drop to a certain section on the page when the user begins to scroll, I would GREATLY appreciate it. Thank you!
Try Using Nice Scroll
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
$("#thisdiv").niceScroll({
mousescrollstep: 40, // scrolling speed with mouse wheel (pixel)
});
I'm building a single-page website with a few sections that each fill out the user's window; I've got that working.
What I want to do is:
When the user scrolls up or down he/she would ease-up or down (accordingly) to the section before or after. My sections each have a anchor at the top of them.
Here is an example of what I'm trying to achieve. Each article fills the page. Once you scroll you jump to the next article.
http://www.made-my-day.com/
I think you could get the job done using this plugin: https://github.com/alvarotrigo/fullPage.js.
Also, it seems to be actively updated. The last commit to the repo was made 3 days ago.
Cheers!
You should take a look at scrollorama and superscrollorama.
They are lots of cool effects that you can use for scrolling, including the one just like the site you provided.
--UPDATE--
After some talking with OP, I realized that both libraries don't do what he wants.
So, my new suggestion is reveal-js, a js presentation library.
You don't really want to do this on an onscroll. Consider that onscroll isn't really anything except an event which says "the view of the page is moving".
That doesn't mean that they're using the mousewheel to do it.
On a phone, your plan can make sense: then it would be like making a drag movement equal to a swipe movement. Great.
My preferred method for scrolling is to click the middle-mouse button, and then position the mouse just below the anchor point, so that I can read each block of text as it scrolls past the screen.
I don't even need a hand on the mouse, for long blocks.
So in my case, onscroll will fire at something like 60 events/sec, and if you auto-jump the articles, I'm going to be teleporting through your entire site's content.
Other people still drag the actual scrollbar.
Listening to the mousewheel and keys (up/down, pg-up/pg-down), rather than just any method of moving the page, is safer... ...but are you sure all articles are going to be small enough so that all content fits in all browser windows, even at stupid-small resolutions (iPhone 3)?
Because if people need to scroll to read content, then all of a sudden you're dealing with a much, much more complex solution:
You would be required to listen to regular (or customized) scroll requests of any kind, to get to the bottom of the current content... ...and then you'd have to provide some sort of visual queue to the user that they are now at the very bottom of the content, and continuing to use a trigger method (swipe/drag/keys/mwheel) would switch articles.
The first two are fine... ...make it feel spring-loaded, like smartphones do.
...what about the other two, where people might expect to hit them multiple times in a second, to get where they're going?
I'm building out an infinite scrolling feature for my site and am debating at what scroll point to inject more content into the page. I've seen some that perform the request at a fixed pixel distance from the bottom of the document, and others that feel more percentage based. What do large sites like Tumblr, Facebook, Pinterest, etc. do? Are there different use cases between fixed pixel distance and percentage? Here's my code:
// 20%
var scrollPoint = ($(document).height()/5);
if($(window).scrollTop() >= $(document).height() - $(window).height() - scrollPoint) {
console.log('Load more goodness');
}
Edit: On re-examining Facebook, it almost looks like they have a 'hot zone' where they pull in more content. If you use the mouse to scroll to the bottom you don't get an auto fetch of content.
I would imagine a fixed pixel distance is a great idea, since as you add more content, the 20% mark would probably include more and more information. Depending on your content, I think it could even end up in a feedback loop.
Since the "tick" of the mouse's scroll wheel is independent upon window size, I think that the triggering distance should also be static.
I don't really know what to say. Does it make a difference? As long as the user doesn't hit the bottom of the page, I don't think it matters.
Why not use an existing JQuery plugin like this one rather than writing it yourself?
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
Are there any plugins or does anyone know of a good way to achieve the iPhone elastic band scroll?
working example in flash
http://www.shinedraw.com/text-effect/silverlight-3-and-flash-iphone-dragging-effect/
I'm looking to drag and scroll a div, but if it goes past a certain point it bounces back.
Thanks
Check out iScroll.
Once you have figured out how to scroll it, it's very simple in mootools to obtain that "bounce" effect.
For example, you can apply a particular bounce effect in this way:
//element is supposed to be the main div you want to drag on iPhone
var element = $('elementID');
//instantiate a morph fx referred to that element
var bounceEffect = new Fx.Morph(element,{duration:1000, transition:Fx.Transitions.Bounce.easeOut});
//...then, when you want it to bounce back (e.g. at the release, or when it goes below a certain position) you can do:
bounceEffect.start({'top':0});
Edit: take a look # mootouch too, it's a very interesting project
Drew McCormack wrote an article for MacResearch about the physics of the bounce and momentum scrolling here, which includes JavaScript code for replicating much of the behavior you see on the iPhone.