Basically, I'd like to understand how the effect with the vertically scrolling, but overlapping images on the amazing Beolit 15 works.
What I found out so far is that they use a container div which again contains four divs that are positioned absolutely to the upper left corner of the container. So far, so good. Apart from that, the four divs all have the same size, feature a background-image that is sized as cover, and have different z-index values to make sure that they are in the correct order on top of each other.
Then, what they added is a clip style that always starts in the upper left corner of each of the four divs, always has the same width, but they differ in their vertical length. The top-most is the shortest one, the second-top-most is the second-shortest one, and so on…
So far, I already have two questions:
How do they get the 673px width? Isn't this depending on screen resolution? Why is it exactly this value?
How did they get the height of teach of the clipping rectangles? Why exactly those values? (Of course, because otherwise it wouldn't work, but how did they get those values? I'm sure not by trial and error…)
Now, apart from that, you can see that when you scroll, basically all they do is update the lower border of the clipping rectangle. This way it looks as if they were sliding up, and move above the images, while they stay fixed.
What I do not get here is how they do this. Obviously they have somehow attached to the window.scroll event, but how exactly?
They add a .fixed class to div.images via e.startEngine() once it reaches the top edge of the viewport and remove it via e.stopEngine() when you scrolled through all images. This triggers the following styles:
.focus .images.fixed {
position: fixed;
width: calc(50% - 30px);
}
calc(50% - 30px) is probably the 673px you are searching for.
The style every image gets looks like:
height: 928px;
clip: rect(0px 597px 1856px 0px);
which can be expanded to:
height: [window.innerHeight];
clip: rect(
0px
[window.innerWidth / 2 - 30]
[
this.parentNode.parentNode.offsetTop +
document.querySelector('.inpagenav').offsetHeight +
(window.innerHeight * IMAGENUMBER) -
window.scrollY
]
0px
);
The scroll event is attached via e.Tools.bindEvent(window, "scroll", w) and the function w calls e.Tools.clipY() which sets the clip styles for each image.
Related
I'm trying to limit the repeated body background image (some call it sprite) from overflowing the bottom.
The reason I'm using the before: method, is because it was the only solution I could find to add transparency to background image transparent without causing everything else to have transparency.
I notice whenever I pull content: " " style, the overflow is removed correctly, but the image disappears causing it's necessity. It's the image wanting to finish displaying in its entirety that's causing the extra scrollable space below the body.
I have tried various combinations of background-size, overflow, even background-position (which is kind of not really related to this).
The background tile is rather large 528x290px, and this is a responsive site.
Here is the code im working with
jade
body
div#body-wall
sass
#body-wall:before{ //background image
position: absolute;
z-index: -1;
left: -264px; //set half image dimension to remote initial offset
top: -250px;
background-image: $body-bg-image;
background-repeat: repeat;
// background-size: 528px 290px; //actual image dimensions 528x290
// width:190%; //set wider to accomodate for top and left offset
// height:120%; //set wider to accomodate for top and left offset
opacity: .15;
content: '';
}
#body-wall{ //implemented for background image
position: relative; //important for background image to display
}
The reason I have the top and left offset is to get the image to a nice starting position. Please note, adjusting the top and or left positioning does nothing to fix the issue.
What can I do to tweak the styles to get the image to cutoff, using this before: method.
EDIT
What Im seeing in my development site, there is an additional few hundred pixels of overflowed image causing the bottom of the site to fall below well below the footer div (see fiddle).
Expected result, I expect the image to be clipped off at the bottom of the content, as opposed to causing the content boxes to expand until its finished displaying leaving a few hundred px of overlap.
I was able to recreate what I'm seeing, its in this fiddle here, but i had to actually comment out the position relative in the #body-wall for some reason, where on my development site, if i do this, the bg disappears entirely to a blank white.
#body-wall {
/* position: relative; */
}
Please note, I have an entire bootstrap3, then migrated to bs4 site in the middle of that tempdiv. Also note, migrating bs had no effect on the way its displaying like this.
Any suggestions?
Actually my first question on stack:)
I'm trying to get a negative (right) margin on my repeating background, so there won't be a gap between the repeating images.
It seems there is no css syntax for this.
To make things clear, i added an image below. So i'm trying to get the repeating images of the cookie-like things to overlap so there's no gap between them.
screenshot of the page
You can apply multiple backgrounds to an element, so why not use this background image twice, with different horizontal offsets.
body {
min-height:170px;
background:
url('http://i.stack.imgur.com/jKAKB.png') 0 100% repeat-x,
url('http://i.stack.imgur.com/jKAKB.png') 75px 100% repeat-x;
}
PS the cookie like things are called kruidnoten. Although everybody calls then pepernoten, which is not actually true.
I don't get why this is happening:
I have:
https://jsfiddle.net/d5jehq02/1
<div class="para_group">
<div class="para_layer para_layer_back">
<h2>background</h2>
</div>
<div class="para_layer para_layer_front">
<h2>forefront</h2>
</div>
</div>
I am trying to create a parallax scrolling effect and although the 2 parent layers (class='para_group') have position='relative', still onr of the child divs - specifically seems to overlap its parent layer...
If you see the example link above, you will realize that the background layer from the 2nd group - seems to overlap the first group all together - when it shouldn't - the group's position is set to relative - therefore block objects (the parent divs) should appear one below the other...
I cannot get my mind around this one :(
The relativity of the conventional html positioning in here is seriously disturbed by the fact that the layer_back elements AND layer_front elements are actually moved into 3d context and scaled.
To achieve the parallax effect, what is done in here is:
Setting 1px perspective (camera set 1px away from the rendering plane).
.parallax {
perspective: 1px;
}
Moving the background layers 1px deeper into the field of view while at the same time scaling them to be twice as large.
.para_layer_back {
transform: translateZ(-1px) scale(2);
}
^ This is the heart of the parallax effect, as moving the elements 1px deeper when we have perspective set at 1px, positions the elements twice as far from the camera as the front layers which are translateZ'd by 0. This produces the parallax effect while scrolling, but also makes the elements appear smaller, because they're further away (the perspective effect).
That's why they are scale(2)'d so they appear in their original size.
Thing is, they're moved away from the camera without changing their relative positions (they're right next to each other then), and then they're scaled in-place, the scale operation having transform-origin set at their centers, makes them get larger and overlap each other.
What you could do to solve the problem is to work on first moving them away from each other before scaling them.
Take a look at the forked and updated fiddle where I've removed the "scale(2)" part on the back layers, they are in the back, and they are positioned properly (without overlapping).
http://jsfiddle.net/3x150vsx/1/
.para_layer_back {
transform: translateZ(-1px) scale(1);
}
The solution to your problem lies in moving them away from each other before you try to scale them up.
Good luck :>
For an application with a good lot of icons, I want to make an image sprite.
Since I started my 'adventure' in the land of webdesign/ front-end webdev, I've always wondered: what is the logic behind background-position: (left)<number>px (top)<number>px;
When you compare this to the shorthand property for either padding or margin(when only specifying top and left), these are both property: (top)<number>px (left)<number>px;
So top and left values are reversed.
Also, suppose I have a sprite that is 64px (length) x 16px (height) and contains a total of 4 16x16 icons. To get the second icon in the sprite (|____|_this_|___|____|), you have to type background-image: -16px 0px; instead of 16px 0px (which would be logical, because the second icon starts 16px later than the first one).
If you want an example (I know w3schools is not always correct but it will do for the example): http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav
So my question is: Why are all the values for the background-position property like,... reversed? Is there any logic behind it? Does CSS read the property from right to left?
When using shorthand for margin (or padding) with only two values you are not setting a X/Y position - you are setting four margins, using the same value for top & bottom (vertical margins), as well as right & left (horizontal margins). You can also pass four values and they will start with margin-top and continue clockwise around the box (top -> right -> bottom -> left).
I usually remember this using the word "trouble" without any vowels (TRBL).
Anyway: for positioning there is only two values, and it is common practice to use the vertical axis (x-axis, 0 is top) and then then horizontal (y-axis, 0 is left), so using a negative value for the y-axis on background-position would move a background the same direction you would move the box if you were to give it a negative left margin.
.class1 {
background-position: -20px 0; // move background 20px left
margin-left: -20px; // move box 20px left (margin, following items will also move)
}
.class2 {
position: relative;
left: -20px; // move box 20px left (position, following items will stay put)
}
So I guess what I'm trying to say is that the values are basically coherent, depending on how you look at it ;)
Docs for margin (check the syntax list)
I need to make ui controls panel, that has 100% width and gradient background. UI elements on this control panel should have width 1000px and should be centered.
For a moment i have two elements:
panel (width 100%, gradient background), global wrapper
panel-wrapper (width 1000px, transparent background), is placed inside "panel" element, contains UI elements.
It works brilliant in all browsers i need, but i really don't like to use two HTML elements, when logically it should be just one. Perhaps it is possible to have one element "panel" with fixed width (1000px) and auto-padding, that will cover all free space to the left and to the right? (i've made an image to show it if my explanation is crazy :))
It is possible?
You could potentially use the calc() function, though it isn't highly browser compliant.
Here is a quick example and more information on compatibility and usage can be found here.
*I made the example in Firefox, didn't test it elsewhere.
Just for a quick code example, the following shows one solution:
div {
width: 100px;
background-color: blue;
height: 100px;
padding-left: calc(50% - 50px);
padding-right: calc(50% - 50px);
}
The challenge is you can't really combine percentages and fixed widths with padding in the traditional sense, since the padding is added to the total width.
If the total width is 100%, and you want the content in the center to be 500px, you can't calculate the padding.
With CC3, though, you can use the box-sizing to change 'where' the padding is placed in the box model.
http://www.css3.info/preview/box-sizing/
Alas, I still don't think that will give you want you want simply due to there still being an unknown variable in play (the width of the container that the 100% width object is in).
In the end, we can sometimes over think these solutions in the name of over-optimization. IN this case, an extra div seems perfectly acceptable and, likely, the proper solution.
Why padding ?
You could set left and right margins to auto and that would make the div centered..
So just set
.panel{
width:1000px;
margin:0 auto;
}