Hey all this is my first question on here go easy on me. I'm learning CSS3 and came across an effect that I wanted to use. I'm not sure if it's simply classed as parallax scrolling or if there is a specific name for it.
The effect doesn't show on mobiles...
http://www.anotherstory.co/home/
At certain points scrolling down there is a different static background behind the content. What is it called and how is it achieved? Any links to references would be appreciated.
Cheers!
I don't know what it's called, but it's achieved like this (extra stuff removed):
// first div
.intro-text {
background: #fb860a url("../css/images/Office2.jpg") no-repeat fixed center center / cover ;
}
// second div
div.Services {
background: #454545 url("../css/images/Office3.jpg") no-repeat fixed center center / cover ;
}
Parallax is an effect where we have the objects positioned at same line of sight but they move at different speeds when we scroll our page this creates an illusion of objects moving at different speeds.
Refer This link
http://www.uiupdates.com/how-to-create-a-simple-parallax-scrolling-webpage/
Related
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
I am so sorry for asking this question here because I'm pretty sure it's not 100% what this forum is for (although it is CSS I presume) but I asked on another forum and no one understood what I was talking about!! So I thought: I'm 100% sure someone here will know!
What is the website box shadow (I think it's a CSS box shadow?) that they use on websites like this one:
http://www.rcgp.org.uk/
-the box shadow I mean is to the left and right of what I assume would be the body container and it helps give the page a general frame - of note the shadow slowly fades and disappears completely by the end of the 'Find Courses & Events' box.
Thank you in advance and I appreciate your wisdom!
This page uses a fixed width container (940px, #wrapper) for all content. The shadow is simply an image which has just the correct dimensions:
body{
/* ... */
url("../images/main-bg.jpg") no-repeat scroll center top transparent;
}
I'm trying to get a background image to start and stay in a fixed position, but only until the rest of the 'content' of the page is finished, at which point the full image is displayed.
I'm working on a purely CSS solution. I should note that the image is larger than most (laptop) screens.
Specifically, here's the code that I've been using:
body {
background:$bgcolor;
background-image:url('http://i.imgur.com/cIGSehG.jpg');
background-repeat:no-repeat;
background-position:0px 72px;
background-attachment:fixed;
margin:0;
...
}
The image that I'm using is given in the url():
The effect that I'm looking for is basically the image will display only about the top 10% of the grass hill while you're looking at most of the page, but if you finally scroll all the way down past all the page content, the remaining 90% of the grass hill will be shown.
I couldn't find this anywhere, but I may have just been using poor search terms since I'm not so familiar with the lingo.
Well, this was one jiggy nut! I did come up with a not so stable trick to achieve this. I don't have time to develop it any more right now, but perhaps it might be a working concept.
Main contept
By providing a large and empty footer area that the user is likely to hover when reaching the bottom of the page, we use a sibling selector to change the position of its sibling element containing the background:
#footer:hover ~ #background {
background-position: center bottom;
}
Along with a few quirks (which ought to be improved) we can achieve a parallax effect.
Go Fiddle
Check out this JFiddle (in Chrome) to see and play with it.
I've used the div:hover CSS rule to achieve the desired affect - an image "swap" when the mouse hovers over a navigation image: www.scottmccarthydesign.com/dev.index.html
My setup here, however, is not actually a "swap." The main navigation image is a flattened jpeg of the entire desk (for faster loading), and there are empty divs over each item on the desk to map the image with links. When these empty divs are moused over, the div:hover rule fills the div with a .png that is meant to be placed precisely over the main desk image to give the effect of an image swap.
It works nicely in Firefox, but I do not understand why Safari is positioning the :hover image over the desk differently than Firefox is - each :hover image is about 1 pixel off, making it look like the seperate images on the desk are actually shifting a bit when moused over. Any suggestions??
I've had trouble using the :hover pseudo-class on elements other than <a></a>. You could use (jquery/javascript) to alter the class of the said <div> using onmouseover and onmouseout events.
With onmouseover, add a class that defines a certain background image. With onmouseout remove that class.
Even easier, use jquery .hover()
reposition your links after adding this to your css:
a div {
line-height: 0;
}
I've come across this issue before and found that it had to do with the size of the image. When the image is an odd-number pixel size on one of its dimensions, the calculations done by Firefox and Chrome/Safari (particularly when using center) are slightly different. Essentially, it has to do with sub-pixel rounding.
Simply add or subtract a pixel to your images on the axis that has an odd number length, to make them an even number (ie - instead of 100x123, make it 100x124) and you should be golden.
No need to use Javascript, this can certainly be achieved using just CSS. In my opinion, your best bet is to use the technique discussed in this article on CSS Sprites: http://www.alistapart.com/articles/sprites.
Essentially, for each item on your desk, place the hovered and non-hovered image in same image, one on top of each other, so that the top area has the non-hover state, and the bottom area has the hover state. Your code will probably look like this modified:
div#keyboard2 {
position: absolute;
left: 89px;
top: 256px;
width: 67px;
height: 160px;
background: url(../images/keyboard.png) 0 0 no-repeat;
}
#keyboard2:hover { background-position: 0 100%; }
Your desk image will then be empty, and of your items will just be on top of it.
when we define hover state of anything CSS... & on hover state we change the background:url('image path'); will this image be preloaded of will be download on the first hover of the element.. if that is so then how to preload it... i know the javascript to preload images.. is that going to work...
If you're trying to avoid having your hover state images only load they they're being hovered on, instead of preloading them, why not create sprites that hold both the normal and hover images ? That way you can be sure that all your hover state images will already be loaded, and at the same time drop the overhead for all the requests. The only thing that you would then need to do, is to set the value of the background-position attribute.
As for your first question, I suppose the best way of finding the answer is to use two large images (a couple of wallpapers would work) and test it yourself, although I suspect that the images will only be loaded when the mouse is over the original image, because that's when the code is being executed.
Hope this helps !
If you have a div of height 20px, say, and want a background image to change on hover, use an image with both the no-hover and hover graphics in it, with the no-hover at the top, and the hover image at the bottom. Both parts should be the hight of your div, in this case, 20px. Then, set your CSS background-position first to 0px 0px (top left). This is default (no hover).
When the user hovers over the div, set the background-position to 0px -20px (20px up). This will move the background image up by 20px, showing the bottom half of the sprite, which is the hover graphic. When the mouse is removed from the div, the sprite will fall back to it's original position.
CSS:
.hoverDiv /* Normal state */
{
background: url('images/img.png');
background-position: 0px 0px;
}
.hoverDiv:hover /* Hover state */
{
background-position: 0px -20px; /* Move background up by 20px, hiding the top image */
}
If you have a div of different height, just change the 20px bits with the height of the div.
If your sprites are side by side as opposed to on top of each other, move the X axis by using background-position: -20px 0px; instead of 0px -20px;. Of course, you can move the background positively too.
Hope this helps,
James
you could use css sprites
The best thing to do is use CSS Sprites. A sprite sheet is a large image with lots of images inside it, which will be used on your site. What's the benefit? Well, it means that only one http request is sent to download all of your images. Therefore, making the site load slightly faster.
It will really work well with a hover effect!
It's much easier to use plus simple code. Not like JavaScript, with messy horrible code. It's very easy to learn. Based around the position of the image in the sprite. Here's a useful tutorial, on Flowdev. Here's an example on W3Schools