I have noticed several website which have background images that zoom out, in, and move based on scroll. I am familiar with parallax scrolling, but this seems a little different as the background images does not actually change.
Some examples of what I mean (there is some parallax within these as well) are flatvsrealism and DiscoverLab. Flatvsrealism has it especially at the end when it turns to real life.
Since I'm sure this is way too complicated to do on your own, I was wondering if there are any JavaScript libraries that could work. I am familiar with ScrollMagic, but it doesn't seem it's capabilities extend so far as this.
To do this, you will want to make your parallax scrolling modify your background image's size in addition to it's position. To do this, set the background property of your parallax scrolling element, in Javascript:
[your parallax object].style.background= "color image repeat attachment position size";
Note: the color is a hex code or rgba(, the image is the url, the repeat is whether you want the background to repeat, the attachment is going to be "scroll", the position is going to be the position of your background image, and the size will be "xpx ypx"
This code will go where your scrolling is. It will replace the code that sets your background image's position; this will use the composite property of "background". You will need to set the size as a function of how far your visitors have scrolled down the page.
The exact code will depend upon your library and how you are implementing parallax scrolling.
If you are looking for parallax libraries, I would recommend writing your own parallax function in jQuery. This way you will be able to modify your function to change the background size. There is a comprehensive list of jQuery parallax tutorials here.
Related
I have a big svg file (with animation and stuff), and I want to use it as a background for my site.
At my site I have so when I shrink the page, svg adapts fully by orientating on window width, so my starts to go out of background and create white background for itself.
I can solve it with CSS
background: url(background.svg)
but svg then starts lagging pretty hard, so I wonder if I can make my background svg more adaptive on height, and do it in more html/svg way
Note: Im doing it with react, and I put svg in index.html from react-app, is goes far away from my svg size.
It sounds confusing, but I think Im not the only one who struggled with it.
Thank you in advance!
I have little website I'm trying to plan on building. But when I started making the background image for it, the image is made so my website is kind of scrolling web page up and down so I made it long. But now the image only shows small part of it, I trying changing resolution of my browser and I could see it but without that I cannot scroll to see the whole image.
The problem which shows that the photo is not fully shown, photo is 2160*3840 px means it is opposite of normal resolution:
If you're using CSS and adding this as a background image to the page body, then it should be an easy problem to solve (and in fact you get quite a few options).
Firstly, lets assume this is your current code:
body {
background-image:url("yourimage.png"); /* The filetype does not matter */
}
Now, as far as CSS sees it, some people viewing your site could be on phones, some on 13" laptops, or some could be viewing it on 5k desktops - if we want the image to work on all at all of these different sizes, then clearly the image is going to have to be modified in some way.
By adding the background-size property here, we can adjust how this happens:
background-size:cover; seems like the best choice for you. It will slightly crop / stretch the image to fit it (but remember, this is probably going to be beneficial).
background-size:100% 100%; will always display 100% of the image - but this will usually result in it being stretched, etc.
There are quite a few other values this property can be set to - you can take a look at them here, or read the spec on it over at MDN.
I have been at this for 10 hours straight, I have tried different types of positiong, but it's just not working. I can't replicate this interesting effect where you scroll down the page and the navigation changes from a transparent background, to a white background. The example can be found at http://www.bakkenbaeck.no/ Can anybody point me in the right direction?
TL;DR This effect is accomplished with not only HTML and CSS but also needs some JS to pull this one off.
I am guessing a little bit as to what you are referring to specifically on that example you gave but I will assume for this post that you are referring to the change that happens once the user scrolls down past the initial full height image where you see the logo change from white to gray and the background of this nav area turns white.
Not knowing your skill level/knowledge its a bit tough to make assumptions about what is going to give you direction, but I'll try my best. What is happening here is the creative use of CSS z-index, some javascript, and duplicate menus. If you think of a web page as a stack of paper, then the first piece of paper is the menu which is on top of the second page, the opening image, then the third page, the the next (duplicate) menu. The duplicate menu is positioned exactly under the first menu. As you scroll down you remove that middle image layer and the new navigation is exposed via some JS. There is a page scroll event listener (javascript) that is checking where the page is currently scrolled to. Once the user reaches the point where the logo and navigation need to start changing, the javascript kicks in and starts to set the height of the first navigation to 1px smaller for every 1px past the scroll point you've gone all the way until it gets a height of 0px effectively hiding it. If you take a look inside of chrome web tools by inspecting both navigations, you can see this happening (the height of the navigation shrinks) as you scroll.
I can see that the site is using http://pagescroller.com/ which is probably the plugin they are using to trigger the height adjustments I was describing.
Hope that gives you some direction!
Reaserch Paralax scrolling if you not familiar with js there are numerous tutorials online and you will find it very easy if you follow them step by step here are some that I have used:
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
It's really easy don't let jQuery intimidate you there is plenty examples on google!
On a webpage I am rendering a collection of images. Some images are portrait orientation, some are landscape, all are larger than the desired render size.
I want to display these images in a gallery of neat, uniformly sized, square thumbnails.
How can I do thus using only CSS?
I would like to avoid a javascript library if possible. I don't need to select a part of the image to display, just any central-ish square area.
I've seen this question asked elsewhere, but have not yet found an answer that seems to work with all orientations (e.g., portraits may get correctly cropped/resized, landscapes do not).
You could still use server side technology to resize the image via cURL; however, that is neither here nor there. One thing to understand, CSS is not really a programming language, as in, it cannot make decisions or do any real math, so we can't make dynamic decisions with just CSS.
That being said, you could create divs for your gallery, and use CSS to set the background image to the desired image. In CSS3 there is a property called background-size. You can set the size in pixels manually, but it will not maintain aspect ratio that way, so it will probably look awful. Setting the background-size: cover will scale the image so that it completely fills the background area while cutting off the excess. Setting background-size: contain will scale the image so that it maintains its original aspect ratio and fills the background without cutting off the image. Here is a little code that kind of explains how to use it. jsFiddle
EDIT: I forgot to mention that this solution will only work in IE9+ (should work fine in FF, Chrome and Safari)
I suggest having a div wrap the images. You can specify a width and height on this wrapper with a overflow:hidden.
I've been exploring methods for full-width background images combined with type. I found this website: http://starvedforattention.org/
I cannot figure out the logic for how the page works once the user starts scrolling. I know it's along the lines of big DIVs with backgrounds alongside setting absolute/relative locations.
Approaches for coding this would be much appreciated.
As I can see, what you are looking for is a Parallax Scrolling Effect.
Perhaps you must take a look to jParallax if you're going to work with jQuery. :)
Best!