A sidebar that scrolls slower than the main content - javascript

Is this impossible? I am using CSS and HTML, I have a sidebar and I have found ways to make it stick (not scroll at all) but none of the parallax examples I can find work.
I really want to avoid using JS.
<html container>
<content>
<left column>
This content is very very long and goes for a long way down.
</left column>
<right column>
This is the sidebar and is much shorter, so I want it to scroll slower than the main content.
</right column>
</content>
</html>
Is this even possible without javascript?

Using CSS3 perspective this is indeed possible. In fact, as the parallax is handled by the browser, it will likely behave more smoothly than if you used JavaScript. The downside is that older browsers will not support it.
CSS3 perspective involves transforming the elements along the Z axis. Elements further away will scroll more slowly. Thus you would not transform your main content along the Z-axis, so that it scrolls at its default speed, and you would transform the sidebar down the Z-axis - away from the user so to speak - so that it would scroll slower.
As you transform into the Z-axis the sidebar will become smaller (or larger if you move up the axis) as it is further away from the user. You will need to calculate the correct scale for its distance and apply that, making it appear at its original size.
I can't guarantee that this code will work with your current implementation as you haven't provided your CSS. But it would typically work something like this:
content {
...
perspective: 1px;
height: 100vh;
overflow-x: hidden;
}
column {
...
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
left {
left: 0;
transform: translateZ(0);
}
right {
left: 50%;
transform: translateZ(-1px) scale(2);
}
Using the perspective and translateZ values, the scale factor to appear at its original size is 1 + (translateZ * -1) / perspective.
A codepen that demonstrates this with a long content section and shorter, slower scrolling sidebar is found at https://codepen.io/jla-/pen/NOGxpQ.
This article has more information on implementing a parallax effect in CSS.

Related

Better performance for left transition animation with CSS

This is what I have:
.s2 {
top: 150px;
left: 20px;
position: absolute;
transition: left 300ms linear;
}
I change the left position dynamically on scroll with JavaScript. At the moment the performance is bad on mobile and even in a desktop browser.
How can I improve this? Is there a better approach for this?
Consider throttling the scroll using requestAnimationFrame
use properties such as translate if you can instead of left or top
Ad translateZ(0) or translate3d(0,0,0) to trigger GPU on mobile (not always guaranteed)
Also since you are animating during scroll, you do not need to use the transition property, unless you have breakpoints/thresholds where you set the property once scroll amount exceeds a certain value.

scaleY property not maintained properly for small screens

I am tryng to fix a css bug for mobile screens
when I click section 1 content opens and if i move till the bottom of the section one content and after that if I click section 1 content closes.
but I dont see section 2 after that I see section 3 since the screen moves upwards.
how to retain the section 2 in our screen.
am I doing anything wrong with the scaleY property.
providing the related code below
I used scrollIntoView but still not point to second one any idea???
I used window.scrollTo(0, 0) but still not point to second one any idea???
.television .chromecast .sun .sunItem > .bulb {
overflow: hidden;
transition: transform .5s, max-height .5s;
transform: scaleY(0);
box-sizing: border-box;
max-height: 0;
transform-origin: center top;
}
.television .chromecast .sun .sunItem.selected > .bulb {
transform: scaleY(1);
max-height: 100%;
}
We need to invoke properly on the select function
onSelect() {
this.props.onSelect(this.props.id);
this.focusDiv();
}
That's the expected behaviour. The scroll position is retained but you remove content from the top of the screen so you end up further down in the page.
It's always a bad idea to collapse the previous elements when expanding a new one, especially on mobile.
To fix that, you will need to script a scrolling to the top of the open section. That could easily be achieved using jQuery.ScrollTo() or something similar, but to be honest, I would just leave the previous sections open, unless the users have a tendency to scroll back up and that would require to much scrolling to get back to the top of the page. Other UX solutions like a scroll to top link might come in handy to solve that.

Anchoring html framework

I'm using html/css/javascript as a game UI for a 3D game. I render the page on top of my game. Most game UI's have an anchoring concept (position widgets to Top, Left, Right, Bottom, Center, LeftCenter, RightCenter, TopCenter, BottomCenter). I'm wondering if anyone knows of any existing html/css framework out there that mimics this behavior or if it's fairly easy to do such a thing with css? I'm not all that familiar with css and I've done some searching around this but haven't seen anything that seems like it's a direct anchoring like I was referring to above. It seems like anchoring div's like this would be ideal in my situation.
I'm picturing behavior like anchoring a div to the bottom center and when I add things inside of it the overall div itself always stays centered at the bottom no matter if I resize the window.
Comment as answer:
Look at css position: fixed it basically causes the element to act like a watermark
If you want it bottom-left you would do
css bottom: 0; left: 0;
If you wanted top-center you could do
css top:0; left:0; right:0;
(I think you can get where I'm going with that without explaining all the different scenarios)
left: 0, right: 0 seems to just make the div take up the entire width. Giving a width of 50% doesn't center that div of a width of 50% it seems.
Response
try html
<div id='a'>
<div id='b'></div>
</div>
css
#a {
position: fixed;
left:0;
right:0;
}
#b {
width: 50%;
margin: auto;
}

Is it possible to have an auto-height div footer with scrollable content area above?

I am trying to create a container that has two sections - the top section will be a scrolling div that takes up 100% of the vertical height of it's container, minus the height of a sticky footer. The sticky footer cannot have a hardcoded height (because it will work in two modes with two different heights) which is where I'm troubled. I would prefer not to use js, only css if possible.
HTML
<div class="container">
<div class="scrollArea">
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
</div>
<div class="footer">
<!-- the contents of the footer will determine the height needed -->
</div>
</div>
CSS
.container {
position: relative;
height: 100%;
width: 100%;
}
.scrollArea {
position: absolute;
top: 0px;
bottom [height of sticky footer]; left: 0px;
right: 0px;
overflow-x: hidden;
overflow-y: scroll;
}
.footer {
position: absolute;
bottom: 0px;
height: [height of sticky footer];
left: 0px;
right: 0px;
}
You don't want to be using position: absolute; on everything.. This will make it very difficult to style things because a absolute element technically has no height (from the perspective of other elements). You are further confusing things by using the "stretch technique" of using bottom, left, top and right all 0.
Your question is also a bit confusing in terms of how the height will be set.. Is it to be set through javascript? Through media queries? If it is either of those cases, you could easily set the height of the scroll area through the same method, allowing them to change in tandem.
If, for some reason you have to only set the height for this one element, you can let css table display properties do the work of calculating the new height for the scroll area, by setting the container as display: table;, and adding another wrapper around the scrollarea. Setting that wrapper and the footer to display: table-row; will get them laid out.
Check this out to see what I mean:
http://jsfiddle.net/6gprU/3/
Your code sample suggests that the height will be set, somehow.. though if this is not the case, and you absolutely cannot set the height (which would be the case if the content that went into the footer was dynamic and unpredictable in size) then you are making this increasingly difficult. In this case, it would depend on if the overall container height needs to stay a certain size. If it does, like I assume it would, then you may need to rethink your layout, as you have too many variables to be able to do it with pure css.
As a final addition to that, there is another option that would make this really easy. CSS has a feature called calc():
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This feature allows you to perform calculations in css, much like you would in javascript, and would allow you to set the height of anything in relation to anything, dynamically. However, I put this last, as browser support is a bit limited. It will not work in IE 8 or below.
Check this site to see where it will work, and then make the decision as to wether this is a valid option for you or not.
http://caniuse.com/calc

css margin issue with jquery slider

I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar
I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.
The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.

Categories