I have recently started to see websites with full size, full width background images, and when you scroll down there comes a section with some content and then a different background. and that scrolls with the page. I am sure if you have seen it you know what I am talking about.
How do you call this technique? Is there a name for it? I would like to look for a tutorial on this, but I don't know what to look for.
Thanks!
I think u are looking for Parallax Scrolling Website.
There are many tutorials for doing that easily.
A simple example for that is given here.
Moe can be found-
http://webdesign.tutsplus.com/articles/web-design-inspiration-scrollin-scrollin-scrollin--cms-25486
http://webdesign.tutsplus.com/tutorials/how-to-give-your-logo-the-slip-scroll-effect--cms-22274
http://webdesign.tutsplus.com/tutorials/create-a-masked-background-effect-with-css--cms-21112
http://webdesign.tutsplus.com/articles/building-a-complete-website-with-the-gumby-framework--webdesign-16980
http://webdesign.tutsplus.com/articles/working-with-gumbys-parallax-extension--webdesign-16967
http://webdesign.tutsplus.com/tutorials/jazz-up-a-static-webpage-with-subtle-parallax--webdesign-10195
http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellarjs--webdesign-7307
http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
If u like to implement Parallax with Twitter Bootstrap, then this tutorial is for u-
https://www.impulse-themes.com/zenith/development/twitter-bootstrap-parallax-scrolling
Think u have your complete answer.
Are you perhaps looking for Parallax? There are many resources online with instructions about it, hopefully knowing the term will get you there.
Here's a simple demo with pure CSS Parallax, but you could also check out Awwwards for some inspiration.
The term “parallax” first came from the visual effect of 2D side scrolling videogames that used different background image movement speeds to create the illusion of depth during gameplay. This was generally done by making the background of the game move slower than the foreground in order to make it seem further away. This same concept applies to parallax site design in which the background of the website moves at a different speed as the rest of the page for an impressive visual effect that allows for countless creative applications for online storytelling.
You can check the link below for more information, tips and some downsides as well.
See More
Related
I've been browsing Dribbble this morning and found this nice UI design for a dating app, see screenshot below:
Now, this is an ever growing trend in design and it does look fantastic, but realistically is it possible to code an element that has a horizontal/diagonal gradient and fades out vertically?
If I were to do this I would probably do it using only CSS, which is fine for the colour gradient, but is there a way to also fade the element out vertically. The only other way I can imagine doing this is to generate the gradient as an image on the fly using server side code but I'd imagine that would use a lot of server resources to regenerate on the fly.
Info on other ways of doing it would be great, I've tried a couple of ideas but nothing has actually worked yet.
Andy
So the title pretty much say's it all, In case anyone is interested I'm self thought so please don't be so hasty to say I did no research or put any effort into this because I've messed around with a lot of various things on this somewhat BS page and searched using Google Yahoo and Bing looking for a similar issue. Basically the table layout seems to to get like a default transparent overlay, I noticed its only directly on the table because the background images are clearly visible when scrolling past the top of the page and its visible in each table cell.
Like I said I've tried various things with no luck but if this is just some common newbie mistake please point me to some reading material or even a good book for web design as I could really use the know how and wouldn't mind learning something as apposed to shooting in the dark with random bits of HTML, CSS and JavaScript in the little free time I do have..
*Also I was doing all this using blogger as my "host" mainly because I plan to ingrate the blogger framework or whatever into the page after I know its good to go. Find a link to the page below, If you need the raw HTML not formatted to blogger just let me know.
https://layout-dev.blogspot.com
Turns out the image host for the body background-image wasn't loading in the image on apple device's, still not sure why but after relocating the image to my personal Dropbox and directly linking to it that solved the problem. *As weird as that may sound the original url was http://subtlepatterns.com/patterns/binding_dark.png and simply replacing it with https://dl.dropbox.com/s/njcu65h90cmsbp8/binding_dark.png solved the problem. -Figured I should post the answer just in case someone ever has a similar issue.
I've been reading other posts about having horizontal scroll, but I haven't been able to do it. I took a web design class a very long time ago at my local community college, and all that was taught was basic HTML. I haven't been up to date with the latest web technology, which is why I'm considering to stop working for a singer in Los Angeles. I have tried reading tutorials, and looking at websites and looking/importing the code into Dreamweaver to see if I can understand it, but it's been hard.
Right now I was asked to have the news as just a thumbnail, but with horizontal scrolling. Right now I have the news appear in an iframe, but scrolling with a mouse is not even possible. It's also very hard to use the finger on a mobile device. What would be the best way to have something like apple.com in a simple html page? Something like just having the dots, and moving to the next page?
This is the news page of the page I work in: http://www.maria-del-pilar.com/main.html and this is the the page that loads within the iframe: http://www.maria-del-pilar.com/news.html
What do you guys recommend I should do? What would be the easiest way to scroll horizontally?
You will probably not want to hear this, but you will not make horizontal scrolling any better than what you have now without adding some javascript.
Great things can be achieved with jQuery - you will probably have to learn something new in order to use it, but hey - life is about learning, isn't it?
Also, after you learn just basics of jQuery, you will be able to use solution of somebody else and not necessarily write all code by yourself. Like this - http://www.jquery4u.com/plugins/10-jquery-horizonal-scroll-demos-plugins/
You can also abandon idea of horizontal scrolling whatsoever - I don't think it is anything special in terms of usability or design anyway. But I understand that you want to achieve what you were asked for.
Good luck
I'm looking for a way to implement some animation on the background on a page when the user scrolls down a page. Think of ... maybe a divided sphere which get closer when the user scrolls down the page and get departed on a scroll up.
I thought of using SVG in combination of JS, but maybe some of you know better ways to implement that kind of stuff.
Maybe some of you already coded that kind of animation?
PS: I don't want to use Flash etc., just HTML5 and existing frameworks.
I found some frameworks, plugins that do exactly I was looking for and I don't want to hold them back. Here are the links:
Scrollorama
Scrolldeck, Parallax
Have a nice day! :)
Sy
Under the iPod Touch, when I click on the blue button the image will be scrolled to the right/left according to the image.
What is this technique called and is it achievable using pure HTML5?
It's just another style of carosel/image gallery design. This is usually done with jQuery. And honestly you can find pre-built templates almost all around the web for this stuff. I have added a couple links below. If you have time check them out and post back with questions.
Coin Slider
Nivo Slider
Presentation Cycle
BXSlider
I'm not sure about only HTML 5, but through CSS3's target pseudo class ( http://www.w3.org/TR/css3-selectors/#target-pseudo ) you can allow users to scroll through images.
The problem with this is, of course, that without JavaScript the functionality is lost in older browsers, and having it animate through the various images automatically (without a user selecting an image to drive the :target class) is going to be difficult at best.
Paul Hayes' CSS3 modal window ( http://www.paulrhayes.com/2011-03/css-modal/ ) explains a lot of these issues, and gives you a lot of the theory behind how one might implement a slider through CSS3.
In the end though, unless you're trying to do a proof of concept, or something that shows the world how cool CSS3 can be, you're better off with one of the JavaScript solutions that Jake has linked — they'll work in the real world.