I came across this website http://morris-digital.co.uk/
And I love the way the scrolling website works, Really smooth and nice, I would die to have such a smooth scrolling on my website too :)
I have been searching but I can not find anything similar.
That site is accomplishing smooth scrolling with this code, which appears to be a combination of $.smoothwheel, Paul Irish's requestAnimationFrame suggestion, and this custom smooth-scrolling code. (plus some custom code to patch it together).
Probably shouldn't be too hard to make something similar for your site.
Related
If you do encounter opening this question and if you dont know the answer. please upvote it so that i and many others can get answers.. Please dont downvote anyone please!
I want to get the best performance i can on animations for my landing page of my project, I am trying GSAP and raw css and i think none are helping performance gets too laggy at times,
-> I have seen many websites using hardcore and way more complex with animations going sweetly silk continuously and supporting all platforms including mobile phones mostly as well, but my animations are chirpy even when running at PC,
I have been trying to get the solutions, have tried to
remove all the other animating properties other than transform or
opacity and
have added css 3d transform hack ,
Using Gsap as well none are helping,
and now i am out of ideas how to get it working, if anyone wants to see my site, this is the link :
webkrushers.com/test/template
Note:
the preloader animation (only css) lags sometimes while loading and the home screen animation as well (the stars are animated via gsap,the BG is moving through css transform and the world is rotating with css transform as well), when i am doing one more animation which is that i want to stamp the big logo and world and then fade it out, it just gets done in steps not smoot at all,
if we get through this i have one more place where animations are not going so well. Hope to get it all sorted and that someone else also learns something from the solutions. you can see it, its in development not so responsive, so open it up at 80% zoom on full HD screens and 67% on HD screens. I would really like help from anyone who can assist me along the way, if he/she feels so. I would also like some recommendations on bettering my UI if someone sees some improvement or replacement that can be made.
Should i try some other thing like, canvas,webGL or web animation API or anything else considering that i want full support till IE9 and mobile devices as well but i dont need the home animation on phones essentially just the loading animation is need in phones.
I'm not quite good in javascript or css but I would like to create a home page with an iPhone. When you scroll through the page, the view scroll in the iPhone.
It will be exactly like this one : https://www.happn.com/it/
I have nothing yet and I'm searching for framework or anything that could help me to do it the simpliest way possible.
What you're looking for is something like scrollspy for Bootstrap: http://getbootstrap.com/javascript/#scrollspy
Mostly depending on the scroll position they modify the iPhone graphics. It could be just an animation that they loop forward and backward depending on the the position of the scroll. You take a look at: http://framework7.io/ but I believe it can be done easierly done with an animation.
I have found a website feature that I really like. I'm still fairly new to front end web development and I can't find any information regarding what the scrolling technique is used here.
It's the 'page to page' scrolling I'm interested in, all I require is the name of the technique so I can research and self learn.
Thank you!
I don't know what's the name of this "page to page scroll" effect, but when you scroll at the beginning of the page there is a parallax effect used on the desktop lamp.
Also, the library to do the "page to page scroll" effect is fullPage.js and it's located here: https://github.com/alvarotrigo/fullPage.js
You can see those related questions on SO: How can I achieve this background scroll effect? and Differential scrolling?
Edit: quoting myself from linked post to have complete answer:
a great demo from Nike http://www.nike.com/jumpman23/aj2012/
a collection of parallax http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design
(make sure to see each example, some are really great ! ex:
http://benthebodyguard.com/index.php http://www.siebennull.com/
http://janploch.de/)
Mercedez Class A web site http://a-class.mercedes-benz.com/com/en/index.html#!/?s=live (not
really parallax but still great)
a tutorial on how to make an image slider using parallax effect http://tympanus.net/codrops/2011/01/03/parallax-slider/
another tutorial with different effects http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
a library to do parallax https://github.com/cameronmcefee/plax
another library https://github.com/markdalgleish/stellar.js
You may also like this:
http://johnpolacek.github.com/scrollorama/
http://joelb.me/scrollpath/
It's the latest technique in web design, called
Parallax Scrolling
With new technologies like HTML5 and CSS3, it's becoming possible to create more advanced, interesting and remarkable effects in the browser.
One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page.
Useful Links
Wiki
Simple Tutorial
46 great examples of parallax scrolling websites
I just found out about this really cool plugin (new for me, old for some of you maybe) and it works like a charm upon implementation, but only in regular computer browsers. When I try it on my android phone, the css3 animation of the dropdown moves really really choppy, just like its dropping frames. How can I fix this problem?
Here is the plugin I am reffering to:
http://responsive-nav.com/
They seem to have done a really nice job with the plugin, I would say the largest cause of the drop of frame rate may be because you are repainting the entire screen. If you would like, roll your own side navigation but make it go over the existing web page rather than move all the elements on the screen.
EXAMPLES OF SIMPLER MOBILE NAV without repainting
http://fringewebdevelopment.com/
http://www.sony.com/index.shtml
As a further step you can also get rid of the javascript and just do plain CSS and see how that works for you, an example of using checkboxes and labels to control the side nav can be found on my site (just inspect the code) - www.aktof.ca . Hope this helps!
I have been going through this website, I was wondering how to implement a scroll like this. I mean background picture is changing and you can see front image sliding nicely.
Same type of effect I saw at Apple Inc Website. Here if you scroll down, in middle of the page you see an image of iPhone getting separated from a lot and joining another one while scrolling. I just started learning jquery. Can anyone suggest me how to implement this type of animation as I am not sure how to search for such effect. Please, any help is appreciated.
There's another plugin for it, probably a bit more options and designed to work also in old browsers such as IE 9 or IE 8 (OnePageScroll doesn't) and which I believe is essential nowadays.
It is called fullPage.js
I believe it will fit you better.
The Apple website uses functionality similar to OnePageScroll.