I have been following Keith Clark's guide to CSS Parallax. His concept it like so:
HTML:
<div class="container”>
<div class="parallax-child”></div>
</div>
CSS:
.container {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
perspective: 1px;
perspective-origin: 0 0;
}
.parallax-child {
transform-origin: 0 0;
transform: translateZ(-2px) scale(3);
}
This works perfect for the most part, for example on my development website. However I need to add this effect to another website where I can't control the HTML structure much at all, below is the basic structure tree, added comments to where I can edit.
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer">
<p>Content in here scrolls slower than everything else</p>
</div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
I can add any styles I want, just can't edit the HTML structure apart from where stated in the comments.
My issue is I can't seem to get the parallax effect to work, if I put the example container styles for the parallax effect (at the top of this post) on the body the parallax effect works...
From what I have read I would need to add the transform-style: preserve-3d; style onto elements between the container and the children, however this doesn't appear to work.
Anyone know what's going wrong?
Edit:
Codepen of the working CSS on the body.
Codepen of the non-working CSS on the HTML.
Edit:
Due to more complications with fixed positions and detecting body scroll (not possible it seems), I really need to get this working by using the HTML element.
What is strange, is that is sort of works. Follow this link and click and drag the slider left/right, the parallax effect is there, just not when you scroll down...
Not too sure why this effect doesn't work when you scroll down...
Guessing no one knows the answer to this, so thought I may as well post what I did.
It appears that you simply can't use the HTML tag for this Parallax effect, so I have just put the effect on a containing div, so then for things functions such as sticky headers I can simply check for the scroll amount on this div and set anything sticky to position: sticky.
Sticky doesn't work on Edge or IE so a fall back would be just to completely disable the parallax effect on these browsers and give the scrolling back to the HTML element so you can use position: fixed.
Fallback:
#supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) and ((position: sticky))) {
Not sure if I quite understood your problem, but why don't you ignore the body/HTML and just map it to your own editable elements.
See working example
.body {
perspective: 1px;
height: 100vh !important;
overflow-x: hidden;
overflow-y: auto;
preserve-origin-x: 100%;
}
.body > div { height: 200%; }
p { color: #fff; }
.parallax__group {
position: relative;
// transform-style: preserve-3d;
overflow: hidden;
height: 300px;
margin-top: 100px;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
position: relative;
float: left;
}
.parallax__layer--back {
transform: translateZ(-1px) scale(2);
height: 100vh;
background-image: url('https://static.pexels.com/photos/173383/pexels-photo-173383.jpeg');
background-size: cover;
background-position: center center;
}
.row-block {
background: red;
}
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div class="body">
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer"></div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
It uses the same CSS of the version you claimed as "working". The only change I made is changing your body for a .body which is an additional div wrapper. This way, it is only touching elements you own / can edit.
Related
I'm not quite sure how to title this better, so edits are welcome.
Basically I wanted to animate a right side sliding-in panel in a page over a fixed div panel.
My jQuery ajax does what its supposed to do to animate it. However, I just noticed that after adding the sliding-panel there was a horizontal scroll bar. Indeed it was my sliding-panel.
How can I "hide" it without extending or allowing the user to scroll horizontally and find the empty panel?
My HTML looks like this:
<div class="left-pane">
<div id="left-conent"></div>
</div>
<div class="sliding-panel" style="position: absolute;z-index: 1000;width: 400px;height: 90%;background-color: whitesmoke;right: -400px;">
<div id="pane-content-edit" class="pane-content">
</div>
</div>
<div id="right-pane" class="right-pane">
<div id="pane-content" class="pane-content">
...
</div>
</div>
CSS:
.right-pane{
width:400px;
height:90%;
background-color: whitesmoke;
z-index: 999;
right: 0;
position: absolute;
Apply to body if no overflow is needed. Read about overflow
.right-pane {
width: 400px;
height: 90%;
background-color: whitesmoke;
z-index: 999;
right: 0;
position: absolute;
}
body {
overflow: hidden;
}
<div class="left-pane">
<div id="left-conent"></div>
</div>
<div class="sliding-panel" style="position: absolute;z-index: 1000;width: 400px;height: 90%;background-color: whitesmoke;right: -400px;">
<div id="pane-content-edit" class="pane-content">
</div>
</div>
<div id="right-pane" class="right-pane">
<div id="pane-content" class="pane-content">
...
</div>
</div>
As a possible solution - use overflow-x: hidden on the body tag. But in case the user doesn't have a screen big enough to show the whole, horizontal scrollbar will not appear. Hence the usability of your website will be significantly reduced.
I can suggest you to have a look at this css library in order to achieve the effect of sliding panel - https://daneden.github.io/animate.css/. Then you just need to care about hiding your panel with display: none and when you need to show it - add bounceInRight class to it.
I've been trying, but struggling to get this layout going using twitter bootstrap, what I need is a centered page with two side columns that don't scroll with the page but a center column that does.
for reference the black displays the entire screen space, with blue showing body content, two grey boxes being non scrolling, but maroon scrolling normally as it is the main content for the page
Setting any column with position fixed makes them overlap, and attempting to use a traditional sidebar takes it to the edge of the view space, which is also undesired. any ideas?
The example shows to use the universal scollbar (on the right side of browser frame, rather than in the middle), live demo: http://jsfiddle.net/hm4do8mg/
HTML
<div class="left">
<p>left</p>
</div>
<div class="midd">
<p style="height:2000px;">midd</p>
<p>bottom</p>
</div>
<div class="righ">
<p>righ</p>
</div>
CSS
body, p {
text-align: center;
margin: 0;
}
.left,
.righ {
background: lightgrey;
position: fixed;
}
.left {
width: 20%;
}
.midd {
background: paleturquoise;
width: 60%;
position: relative;
left: 20%;
top: 0;
}
.righ {
width: 20%;
right: 0;
top: 0;
}
The layout you asked, is kind of old fashion style like <iframe>. You can also use <table> to do it, it's the most solid, and easiest way to me (ignore it if you need a mobile version).
I made a fiddle that can help you achieve this. But I haven't used Bootstrap. You can easily make these changes on bootstrap grid.
JSFIddle
I think this could fit your needs. It's not perfect, but it's a starting point.
HTML
<div class="container">
<div class="row">
<div class="first col-xs-3">
<div class="fixed">
<p>Fixed</p>
</div>
</div>
<div class="col-xs-6 scroll">
<p>PUT A NOVEL IN HERE</p>
</div>
<div class="second col-xs-3">
<div class="fixed second">
<p>Fixed</p>
</div>
</div>
</div>
</div>
CSS
html, body {
background:#CCCCCC;
height:100%;
}
.container, .row {
height:100%;
}
.fixed {
height:100%;
background:#FFFFFF;
position:fixed;
width:20%;
}
.scroll {
height:100%;
background:#000000;
overflow:auto;
}
.second.fixed{
margin-left:-15px;
}
DEMO
Fiddle
I have a question that I suspect has a simple answer. I'm using Bootstrap to make a personal webpage, and I'm attempting to divide the background into 3 equal columns (which will all have different images).
I know this could be done with class="col-xs-4" but the issue is that I'd like to keep what's over the background as-is (it's a "col-lg-12" that is responsive).
Is there a way to split my background (again, going to upload images into the 3 panels, and the panels will essentially mask the full images), and still have all the "col-lg-12" heading stuff on top?
Thanks for any help you can give, my current html code is such:
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/picture.png" alt="">
<div class="intro-text">
<span class="intohead">Filler Text</span>
<span class="subhead">More detailed, longer filler text for below</span>
</div>
</div>
</div>
</div>
</header>
Basically, there are three columns with background images, and then a cover div that is placed on top of the three columns. You can place anything you like in the cover div. Here's an article about CSS positioning.
.wrap {
width: 100%;
height: 300px;
position:relative;
}
.section {
float: left;
height: 300px;
width: 33.33333%;
}
.one {
background: url(http://placehold.it/200x300/ccc/666/&text=img+1) no-repeat;
background-size: 100%;
}
.two {
background: url(http://placehold.it/200x300/666/ccc/&text=img+2) no-repeat;
background-size: 100%;
}
.three {
background: url(http://placehold.it/200x300/ccc/666/&text=img+3) no-repeat;
background-size: 100%;
}
.cover {
width: 100%;
height: 100%;
/*A background isn't needed, it's just to show that the element is there*/
background: salmon;
opacity: .5;
/* this stuff is key */
position: absolute;
top: 0;
left: 0;
/* place cover on top */
z-index: 10;
}
<div class="wrap">
<div class="cover">Put all you content in here</div>
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
</div>
Run the code snippet and tell me what happens. Is this what you're looking for?
I am trying to achieve a a horizontal scrolling website with a fixed header and footer.
Goals:
1. Fixed Header and Footer
2. No vertical scrolling
3. Content div fills all space between the header and footer
I used position: absolute on the content to make sure the height:100% takes up the area between the header and the footer. (my third goal)
However this also causes a vertical scrollbar to appear.
live demo:
http://jsfiddle.net/wQ2XR/230/
how can i achieve my goals without a vertical scrollbar to appear?
thanks a lot in advance!
The html code:
<div id="total">
<header id="1">
<div id="a">
<h1>Header</h1>
</div>
</header>
<div id="2">
<div id="b">
<div id="bb">
<h2>Post Title Example One</h2>
<p>hello world! Have you thoroughly searched for an answer before asking your question? </p>
</div>
</div>
</div>
<footer id="3">
<div id="c">
<h1>footer</h1>
</div>
</footer>
</div>
the css:
body, html {
height: 100%;
padding: 0;
margin: 0;
}
body {
width: 100%;
}
header {
}
#a {
position: fixed;
height: 50px;
top: 0;
width: 100%;
background-color: blue;
}
#2 {
position: relative;
padding: 50px 0 25px 0;
}
#b {
height: 100%;
position: absolute;
}
#bb {
position: relative;
height: 100%;
margin: 50px 0 0 0;
width: 2000px;
background-color: yellow;
}
footer {
}
#c {
position: fixed;
height: 25px;
bottom: 0;
width: 100%;
background-color: green;
}
Hmmm, the problem is that the wrapper(s) around your content between the header and footer are taking on the height of the viewport with height:100%. So, when you apply a margin to vertically offset those content wrappers (so that the header becomes visible), they get pushed by that much below the viewport (50px, height of the header). As a result, you get a vertical scrollbar, since the content wrappers are both the full height of the viewport and pushed down - so they can't fit on-screen.
How to avoid this? Well, if your footer and header height won't be dynamic (ie. You'll always be in control of how tall they are through your CSS), you can achieve this in a fairly straightforward manner with position:absolute.
Your structure I modified slightly; I removed the #2 and #b elements, since it looks like they were just there to properly position/size #bb, the actual content-containing element:
<div id="total">
<header id="1">
<div id="a">
<h1>Header</h1>
</div>
</header>
<div id="bb">
<h2>Post Title Example One</h2>
<p>hello world! Have you thoroughly searched for an answer before asking your question?</p>
</div>
<footer id="3">
<div id="c">
<h1>footer</h1>
</div>
</footer>
</div>
Now, with your CSS, I removed the definitions for styling #2 and #b. Additionally, I modified the #bb CSS to read as:
#bb {
position: absolute;
top: 50px;
bottom: 25px;
width: 2000px;
background-color: yellow;
}
Here's an updated JSFiddle to demonstrate what this achieves. Additionally, here's a JSFiddle implementing your multiple-row layout which you gave as a comment in one of the answers.
The reason why overflow:hidden doesn't quite work is because #bb would actually still extend below the viewport - just, no vertical scrollbar would be created because that overflowing region is ignored by the browser. However, when you use a percentage height, it becomes apparent that the height of #bb is not that which is visible. Anyways, hope this helps out! If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!
To hide the scrollbar use:
overflow: hidden;
However, the text needs to go somewhere (otherwise it will be hidden), so you need to have the container larger or use text-columns.
Do you intend to achieve something like Windows 8 Metro UI for the scrolling?
Firstly, apologies for what appears to be a very common question, looking at the amount of similar questions, you are forgiven for being annoyed at yet another, but regardless of all the others that I have read (and tried to implement), and many other links found on Google, I'm still struggling to solve my problem, so I'm sorry, but here goes..
The footer I have is fine when the main content is longer than the browser window, but when there is very little content, rather than sticking to the bottom of the browser window, it sticks to the bottom of the main content, leaving a horrible blank space below the footer.
I've created a simple(ish) fiddle HERE using a stripped down version of my code.. here is the code for those that are able to see the issue without "fiddling"..
<body>
<!-- Header -->
<div id="header-wrapper">
<header class="5grid-layout" id="site-header">
<div class="row">
<div class="12u">
<div id="logo">
<h1 class="mobileUI-site-name">HEADER</h1>
</div>
</div>
</div>
</header>
</div>
<!-- Main -->
<div id="main-wrapper" class="subpage">
<div class="5grid-layout">
<div class="row">
<div class="12u">MAIN CONTENT </div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<footer class="5grid-layout" id="site-footer">
<div class="row">
<div class="12u">PROBLEM FOOTER</div>
</div>
</footer>
</div>
</body>
and here is the css..
#header-wrapper {
background: #12ff00;
height: 110px;
position: relative;
padding: 0.0em 0 1em 0;
}
#main-wrapper {
border-top: 3px solid #662d91;
border-bottom: 3px solid #662d91;
background: #ff5a00;
position: relative;
padding: 1em 0 2em 0;
}
#footer-wrapper {
background: #ff00fc;
position: relative;
padding: 1em 0 1em 0;
height: 100px;
}
Granted, a lot of the above Divs aren't needed for the sake of this demo, but I have left them in just in case it is one of these thats causing the problem. I'm still new to this, so I honestly have no idea.
so basically, how on earth do I get that footer to behave, previous attempts based on other Stack Overflow answers have left me with either no footer, or a footer that sits in the center of the screen regardless of whether there is a lot or little content.
Any help will be gratefully received.
I have answered this question before
Click Here
Or see this JSFiddle for a working example of a sticky footer.
HTML
<div class="wrapper">
<div class="header"></div>
</div>
<div class="footer"></div>
CSS
* {margin: 0;}
html, body {height: 100%;}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* the bottom margin is the negative value of the footer's height */}
.footer { height: 200px;background-color:#000;}
The idea is that the bottom margin is the negative value of the footers height
Have you tried:
html, body {
height: 100%;
min-height: 100%;
}
#main-wrapper {
height:100%;
}
Here's a working DEMO1
UPDATES:
I've changed a few things in your code, but now its working!
Here are the changes:
added a #container for the header and main divs.
I've changed the footer padding from em to px, because I need precise height.
I gave the main-wrapper's background to #container
and the border-bottom to footer as border-top
DEMO2
The way I ussualy do this is using
http://www.cssstickyfooter.com/using-sticky-footer-code.html
If you can, try to stick close to that, it has compatibility with older browsers.
I didn't find better alternatives to this and is well explained