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
Related
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 am trying to find out what the jquery control being used on the Google Nexus website is called: http://www.google.com/intl/all/nexus/5/
Basically as you scroll down the website, the image background changes to a new one. Its not really lazy loading.
It is also used here:http://www.flipkart.com/motorola/motox?otracker=ts_motorola_explore_motox
I can roll my own based on just manipulating z-indexes and scrolling sections on the website, but I would really like to know what this is called.
Figured out that is a variant of Parallax Scrolling
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.
I am just starting with both media queries and viewport statements. Is this what is used to create websites like the following ?
http://html5up.net/escape-velocity/
http://www.sitediscount.ru/parallaxer3bs/index.htm
What I am trying to achieve is a full page / viewport on all screen sizes. Then on scroll to the next section below is also filled with the viewing area. This is a new popular type web desin and I am trying to figure out how to replicate it. Either html5 or bootstrap solutions would be great. Thanks in advance.
Short answer: Yes, media-queries is the main way to go in order to create fluid layouts.
If you're just starting out, I would recommend you to learn writing these from scratch in order to get an understanding. There is a good article available at http://css-tricks.com/css-media-queries/
However, if you do not wish to code the media-queries yourself; that kind of pages with a fluid responsive layout can easily be made with bootstrap.
To download bootstrap, go to http://getbootstrap.com and start working from there.
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!