I'm working on a very animated website that extensively uses the pin function of superscrollorama to pause scrolling while still animating certain elements based on scroll position.
The issue is one of stability and optimization. The client, of course, wants the site the be super stable and glitch free, even when grabbing the scroll bar with the mouse and jerking it up and down. Fortunately, this is the only way to get the problems to rear their ugly head, but ugly they are.
When jerking the page up and down with the scroll bar, certain elements are "lost" or "misplaced". I suspect that their positioning is not being reset appropriately. When pinned elements are unpinned, the screen goes white until the next section is pinned. You can see this especially when jerking the page up and down, stopping at the top of the page. Try scrolling down from there. Even some animations are only partially rendered in the scene after the initial office scene. I've tried resetting each affected img and divs position to absolute on unpin to no avail. I've also forced an initial fixed position on each affect img and div and still had issues.
Could it be that the is just too much going on and the browser/computer cannot render it all quick enough, dropping the unexecuted JavaScript and leaving the animation only partially completed?
I am new to the world of web development, especially front end stuff. Any help is really appreciated.
EDIT: I ended up scrapping all of the Superscrollorama code and used Skrollr instead. None of the glitchy stuff happens now + using Skrollr made it easier to make the site responsive. Even works to a certain degree on mobile/tablet.
URL: TalentVisor
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>
See this page:
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html
Try and scroll to 10,20 or 30% position using the mouse-wheel. It is not possible. It seems to jump to 33%, 66% and 100% as if they are anchors. That makes sense on a large page if you want to scroll quickly through the page.
But the page I am using it for I need more control, I need it to be able to easily scroll to specific points. Is that possible to do that where I can use the mousewheel to scroll more specifically to say 8,22,47%. Of course, it might not be possible to scroll to those exact points but it should be easy enough to scroll and slightly adjust with the mouse-wheel to get to that point you want.
Is that basically what smooth scroll is and if so do I just turn it off or do i need a jquery script to able to do this on my website or can you adjust your current script to change the anchors so instead of jumping 10% it only jumps 2% which would likely give more control.
On this particular page there wouldn't be a ton of scrolling needed but you do want to be able to stop it at specific points otherwise one tile is half cut off and then you have to use your mouse on the scrollbar to move it to a specific point where its not cut off.
I did not really know what was the best solution at the time but the problem was that I had a view like Trello with cards and when I used the mouse scroll often it would stop with half the card cut off, the only way to see the full card was to stop the mouse wheel scroll and manual use the scrollbar to pull it to an exact position.
As it turns out there was a perfect solution. http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
See the last solution, snap scrolling to images, I used that but snapped to the top of the card so for each mouse scroll it moves to show a new card which is the perfect solution for me and hopefully will solve other users with similar layouts.
The initial link I posted did not have this solution even though it was the same code repo, I stumbled across the solution later but I accept I probably did not explain my question very well initially
I am trying to do a specific way to move an image (just an image, not background) to a certain spot when you scroll. So say I load a page, the page loads then an image slides to the left of the page and when you scroll, the image slides to the middle or bottom or where ever you want when you start scrolling the page. And the image stays they there by a set of texts or info. I have tried many things such as:
stop().animate({"top":(window.scrollY)
I cannot get it to stay there at the spot when scrolling to that specific spot, if you keep scrolling down, the image continues to scroll down when I scroll, and I am not sure how to stop the image after a certain point.
Then I tried this:
if($(window).scrollTop() + $(window).height() == $(document).height()) {
var a = $(window).height() - 100;
$('#scrolling').animate({
However, I cannot get it to work, it doesn't go back up to top when scrolling back to the top.
Any thoughts on how I would get the image to float in to the center or top or even on the sides and then move to a spot when scrolling down? Am I on the right path or am I totally going about this incorrectly? It feels like I am missing something here, and I am not sure what it is.
I thought I could do this in HMTL5 with animation protocols, but I do not think I can acheive that, and I know CSS3 is robust, but it is also very choppy, so I think JQuery or JavaScript is the way to go, and I can get it partially working but not fully. Any thoughts?
I have searched this site and I cannot find what I am looking for. These are the sites I have found that are similar: Animated Scroll Image to a particular position on a window and this: How to make an element fake position:fixed so it acts fixed until a certain scroll height, then attaches?
But I need an image to move to a spot. Are these links in the right direction? Are the example codes I gave somewhere to start with?
Take a look at Skroller, it is a JS library (not jQuery dependant, it needs require js though) that allows you to define certain actions.
Basicly you add some data elements to a div, one that says at what pixel (of scrolling) it should start animating, when it stops, and what it does (goes to the middle of screen for example) dsuring that scroll.
Scrolling back up works well (used it in a project of ours)
I have been trying to understand how they did those effects in http://artofflightmovie.com/ with no success so far. I am not even sure what to google for for help. Could any one ellaborate on it and perhaps put links to plugins\tutorials\other websites doing the same thing?
There is already a similar question, but it didn't help me a bit ^^
Custom scroll bar behavior in Javascript?
All of the answers here so far are spot on and cover various pieces of the execution. Joseph's post about how we 'contained' and 'maneuvered' the site are dead-on, and those mentioning jQuery accurately depict our heavy reliance on it :)
With that said, the other concept of moving along a non-linear path was probably the most difficult part. We literally used an Illustrator file that was setup like a piece of graph paper and drew a bezier path that reflected the movement we wanted from the scrollbar. Then we 'downsampled' the path by converting the curved lines into a bunch of straight lines that represented the curve (similar to downsampling audio waveforms) to keep performance/speed high. We took those coordinates, gave them to our designer, and he created a gigantic design file and literally designed each content section at the designated 'stop' points. Next we mapped each coordinate along the path to a percentage value of the scroll position. We stored these values in a JavaScript array. Lastly we wrote some JS functions that we pipe the scroll position through to determine how to offset the positioning of the site 'container'. (It basically 'tweens' between each coordinate allowing us very fine/precise values at any given scroll percentage) The scroll functionality is handled by a tall div that basically sets our document height to force a scrollbar, and we just read it's position during a Scroll Event and slide the container around to where it should be using the above mentioned functions.
The parallax effect is achieved by applying a percentage of the position offset (what we use to move the container around) and applying it to the sub-containers of the various content sections. This makes the subcontainers move slower or faster than the background, but on the same motion path.
Lastly, the little snowboarders and helicopters (which have CSS3 rotations in addition to x,y movement in some browsers!) are positioned by using a simliar array of 'start' and 'end' positions and tweening between them based on the scroll percentage.
I'll leave it at that to keep this from turning into a book, but I'd be happy to elaborate on specifics if you're interested.
Full disclosure: I was lead developer on the site. I'm not posting to 'toot my own horn' or anything like that, just to be helpful and provide assistance to a fellow tinkerer. I come here a lot to dig through and get insight from others. (many, many thanks to those who have helped us!) Also, shameless plug, but the film is breath-taking... go rent it if you haven't yet, you won't be sorry. :)
That's a pretty cool website ;)
Basically using some javascript you can detect how far a person has scrolled. Considering the amount of scrolling you can move the contents of your webpage around if their position is absolute.
There are a couple of jQuery plugins that allow you to do simular stuff although I'm not sure you can "scroll through" a sequence of coordinates.
Here are a couple of jQuery plugins that helps you get simular effects:
http://johnpolacek.github.com/scrolldeck.js/
http://johnpolacek.github.com/scrollorama/
http://demos.flesler.com/jquery/scrollTo
http://webdev.stephband.info/parallax.html
I just picked a couple I'm familiar with but there are many plugins that are alike.
edit:
Decided to add some more simular websites for your pleasure.
http://www.activatedrinks.com
http://www.beetle.de
http://www.nikebetterworld.com
the whole page is an "overlay" - a full width and height wrapper <div>. sort of how modal windows do their "full page shadow" effect and have a small div float inside. the whole page content is in that wrapper. the scroll path is a script. the script captures the body scroll and moves the contents of the div accordingly to the positions provided by the script. with a body long enough to be scrollable (which cannot be seen since the wrapper covers the whole page), it's as if you are scrolling sideways, upwards etc.
an analogy is a modal window. the wrapper is the full-page shade. the modal window is the content. and notice how modal windows stick to the middle? that's using a script to calculate it's position to stay in the middle by moving the modal window down, relative to the page's top. but in that website's case, they move in different directions.
It doesn't seem too complicated.
Using the .scroll(function() {}) in jQuery you listen for a scroll event. When triggered you set the position style (left, top) of the content div to give the appearance of moving sideways instead of down.
I guess you'll need overflow:none property on the div to prevent users from scrolling over the area you don't want them to see.
Sounds like a lot of effort for a clunky user interface in my opinion.
Ok, so I've created a little plugin that takes a bunch of elements and creates a sort of never ending list. I'll try to explain...
I have a div, and it's got about 20 elements tags in it. When the user scrolls up, the top element moves out of view and is moved to the bottom of the list. And vice-versa so that when the user scrolls down, the bottom element is moved to the top of the list.
This is specifically for Mobile Safari (iPad, iPhone) web content
What I would like to do is implement inertia so the scrolling slows to a halt in response to how fast or slow the user is scrolling when their finger leaves the screen. Just like the inertia commonly found in the iPhone / iPad UI.
The problem is, every time an element moves to the top or the bottom of the list, the scollTop value for the parent div is adjusted to make it look like all the elements are staying in the same place. Which means the scrollTop value is never more than the top elements total height. So there's no value I can think of that I can keep on manipulating to give the illusion of inertia.
I'm stumped. Does anyone have any suggestions?
iScroll implements scrolling with inertia, but I'm not sure how it would react to you adding and removing elements mid-scroll. Might be worth looking into though.