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.
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 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.
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!
With the most latest updates Google has been rolling out, the sites have all been getting custom JS scroll bars (at least in Chrome).
What I like most about it is that its simple and works perfectly. Until now a lot of the JS scrollers that I have seen don't function that well - i.e. if you scroll really fast or scroll and move your mouse around they don't function that well.
Hence I'm just wondering if anyone know of any scroller out there that is simple/small (code foot print is small) and functions well (as mentioned about).
I have thought about using jQueryUI's scroll as a base, but for my needs I can't take on jQueryUI for this one feature.
They're done by styling ::-webkit-scrollbar psudo-elements with CSS, not JS.
I have been using the lion bars jquery scroller, and I think it meets all the specifications you mentioned, give it a try.
Take a look at https://gist.github.com/fanzeyi/3995618
Works fine for me.
I'm developing a product to be used by a number of customers alongside our Web application.
Quick background:
These customers have incorporated into their pages a widget that we've developed.
The widget's content can be modified by using our application.
The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.
The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:
http://skitch.com/troywarr/dtexp/example-good
However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:
http://skitch.com/troywarr/dteqx/example-bad
As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.
I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.
I created a test bookmarklet as a live example. To see it, please:
Open Firefox (the version under development currently only works there reliably).
Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
Click the bookmarklet while on that page, and you should see what I'm referring to.
Thanks very much in advance for any help! This has me baffled.
I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.
The iframe inside DIV#onespot_nextclick needs a background color of #FFF.
Simple!