The coding behind these two amazing website seems very complex but I am willing to take on the challenge.
I have done several hours of research and tried to figure out by myself but unfortunately I can’t. I am just overwhelmed by the complexity of the code. So I am posting a question here.
I have some experience with CSS and HTML, right now my current website has a full screen image. Nothing complex… Haha
Created using:
html {
background: url('/images/google-data-center.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale');
}
Yes I have been… I just don’t know where to start. (I just get overwhelmed by the code, even with that simple website ralph.m has linked (http://richardshepherd.com/smashing/parallax/background.html))
I am just having difficulty studying the code.
According to ralph.m 's last post, the website that has been linked is using Boilerplate.
Based on my research, Boilerplate is a good template to base my project on. Would you say?
In that case, even with most basic Boilerplate 4.3.0 I don’t know where to start. (I get most of the HTML part but not CSS and JavaScript. (Some codes I understand some I don’t and I don’t know if they are important therefore I should keep them or not))
Yes, it certainly can be overwhelming at first, and even after for that matter.
It’s good that you have some grasp on the HTML, that’s what the rest is built upon.
I won’t get in to how I feel about “javascript required” sites, the fact is it depends on your target audience and how willing you are to alienate some visitors. They sure do look nice when javascript is enabled, but can fail miserably when not.
You don’t need a localhost server to get started with these, but if you have one you could use it.
To learn what is going on, the way I’ve learned a lot is to copy what I’ve found, study it, change it a bit until it breaks, figure out why then fix it, change it some more until it breaks again, etc. etc. until I’m happy with what I’ve got. True, you may not always learn best practice this way, but you’ll learn.
The first step is to replicate the directory structure on your computer somewhere and download the files into it. Once you’ve done that and it works OK you can start to get your hands dirty by changing things and seeing what effect the changes have.
The CSS code from the tutorial: there are two margin
I don’t understand why… Shouldn’t there be only one?
The CSS code from the tutorial: max-width: 1920px
is set to 1920 pixels. This means that this website can only support up to monitors with 1920 pixels horizontally. What would I need to do so that it can support screens with greater resolution? (Also zooming website will mess the background image position…)
(The last question is related to the first question… I can’t figure out how to integrate the codes to fix this problem.) Mmmm… its hard to make a universal website…
The finer points of CSS aren’t my strong suit, but I’ll do the best I can.
Giving the <html> tag a background will result in the full viewport having a background, though being “no-repeat center” might mean it dosen’t show in some areas of the page if the dimensions of the page exceed the dimensions of the image.
I think what the example code is doing is giving the <div> tags backgrounds so that each has a different background that will fill viewport as long as it doesn’t exceed the dimensions their the images.
Good catch!
margin: 0
margin: 0 auto
both are not needed, the last over-rides the first.
As for 1920px, you are correct in being concerned. Many designers choose a “good” solution that is not necessarily best practice.
My feeling is that a page should be written such that it will be usable (not necessarily identical) for all users then have CSS added, then javascript. Testing often to make sure it doesn’t break anything along the way.
I have seen many threads saying things like “can I stop desiging for 800x600”, “can I have javascript enabled required” etc.
Truth is, if you know your target viewers and you don’t mind alienating some visitors you can still have a sucessful website even when not follwing best practice.
IMHO it’s a matter of Professionalism (in terms of ethic not earning) and Pragmatism (skill, budget, time restraints).
As for parallax — its overused and quite frankly isnt converting all that well. Anyhow, its not the easiest thing to implement well if you dont have a good designer backing you up. I mean its not hard to move pieces of content separately as user scrolls, but will it look good is another question.
Also looking on someone else’s code might not be the fastest way to learn things, i d suggest taking existing libraries and experimenting with variables. But hey, i am a designer and not a front-end engineer.