I have a website-slider where every section has height of 100vh. So each section is a slide. At the bottom of the website I need to have a simple footer. It works fine in all browsers but in Safari it kind of jumps because of overscroll.
Link to example
Gray div is an image which is outside my slider and is kind of behind all of the slides beacuse I need to change it's opacity on scroll. My footer is outside of slider as well.
<div class="section1">SECTION 1</div>
<div class="section2">SECTION 2</div>
<div class="section3">
SECTION 3
</div>
<div class="bg" style="background: gray"></div>
<footer>FOOTER HERE</footer>
CSS
* {
margin: 0;
padding: 0;
}
.section3,
.section2,
.section1 {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
z-index: 2;
background: #000;
color: white;
margin-top: 15%;
}
.section3 {
background: transparent;
margin-top: 0;
z-index: 10;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(bf34577….png);
background-repeat: no-repeat;
background-size: cover;
}
footer {
display: flex;
position: absolute;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 10px;
z-index: 9;
width: 100vw;
height: 65px;
object-fit: cover;
background: #000;
color: #727272;
}
So when overscroll is happening footer jumps up and behind it you can see an image which shouldn't happen.
It can be fixed if I give footer position: fixed and bottom: 0 but I don't need it to be position: fixed, I just need it to be at the bottom of the page.
Related
A background-image stretches the height of the div rather than being contained to the dimensions of the viewport. Testing on desktop the desired effect is achieved but on iPhone X (Safari and Chrome) the background stretches the height of the content so the image is 'zoomed in' and blurry.
So my phone is ignoring the combo of:
background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
I'm aware there has been issues with this in the past on iOS and I have searched SO for threads but I saw this working on https://mrleight.com/clip and I'm wondering how they got this to work - is JS maybe or something else I'm missing as my core CSS seems to more or less match.
I've included an simplified example, I've taken out all the 'real' content and just added a red div with a fixed height to simulate the effect my grid of content has.
I'd rather not resolve this by having a separate div with position: fixed - I see that as a last resort!
html,
body {
margin: 0;
padding: 0;
}
.page {
background: white;
}
.collection {
background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
display: block;
height: 100%;
overflow: hidden;
position: relative;
}
.collection:before {
background: rgba(0, 0, 0, .48);
content: "";
height: 100%;
position: absolute;
inset: 0;
width: 100%;
}
.p-grid {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 100%;
position: relative;
}
.product-grid {
background: rgba(255, 0, 0, .24);
display: block;
height: 3000px;
margin: 0 auto;
width: 50px;
}
<div class="page">
<!-- START COLLECTION -->
<div class="collection" style="background-image: url('https://images.pexels.com/photos/38136/pexels-photo-38136.jpeg')">
<!-- START GRID -->
<div class="p-grid">
<div class="product-grid">
</div>
</div>
</div>
</div>
So what I currently have is a parallax effect that works fine, but I can't figure out how to make one section "slide up" and reveal the next section, making it look like a smooth section transition. Currently my content on the second section just keeps scrolling down until it's in its place, and I can't seem to make it appear behind the first section. I currently have this: https://jsfiddle.net/165pw4ks/3/.
index.html:
<div class="parallax-wrapper">
<div class="frame-top"></div>
<section class="parallax-section part1">
<div class="frame-bottom"></div>
<div class="part1-sticky-container">
<div class="part1-sticky">
</div>
</div>
</section>
<section class="parallax-section part2">
<div class="part2-content">
<h1 class="part2-text">
Some text here
</h1>
</div>
</section>
</div>
style.css:
body {
margin: 0;
}
.parallax-wrapper {
top: 100vh;
}
.parallax-section {
position: relative;
}
.part1 {
background: url("https://place-hold.it/1920x1080") no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
z-index: 4;
}
.frame-bottom {
position: sticky;
z-index: 100;
top: calc(100vh - 40px);
height: 40px;
width: 100%;
background-color: #111;
}
.part2 {
margin: 0;
background: url("https://place-hold.it/1920x1080") no-repeat;
background-size: 100vw;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.part2-content {
position: sticky;
width: 30rem;
height: 5rem;
z-index: 1;
background-attachment: scroll;
background-color: transparent;
margin-left: calc(50% - 15rem);
top: calc(50% - 2.5rem);
}
.part2-text {
margin: 0;
color: white;
font-size: 32px;
text-align: center;
}
What I am attempting to make is something like on this picture:
Any help would be appreciated.
Trying to build out a hero style masthead with a transparent cover image, and a color tint overlay; then display some text on top of this. I am using bootstrap 3 as underlying framework.
I have my hero wrapped in a div, I then have two child div. One contains the background tint layer, the other contains the text/title.
The background div layer is breaking out of the parent wrapper div and covering the entire viewport below it. I'm not sure where i went wrong.
Fiddle of my broken attempt:
Fiddle
#page-title {
font-size: 2.2em;
padding: 20px 40px;
margin-bottom: 40px;
}
.bg-layer {
opacity: 0.75;
background-color: #f7f8fa;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.bg-wrapper {
background-image: url(/whatever.png);
background-position: right center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
}
<div class="bg-wrapper">
<div class="bg-layer"></div>
<header id="page-title">
<div class="container">
About Us </div>
</header>
</div>
Add high z-index on .bg-layer, beacuse bootstrap CSS navbar Class default z-index is 1000
.bg-layer {
opacity: 0.75;
background-color: #f7f8fa;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index:1001;;
}
https://jsfiddle.net/lalji1051/9b46x5yo/3/
All your code is absolutely fine, Just add this line position: relative;to the .bg-wraper class and you will get the desired result!
#page-title {
font-size: 2.2em;
padding: 20px 40px;
margin-bottom: 40px;
}
.bg-layer {
opacity: 0.75;
background-color: #f7f8fa;
background-color: #f005; /* just adding this for visibility*/
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.bg-wrapper {
background-image: url(/whatever.png);
background-position: right center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
/*Just this additionale property*/
position: relative;
}
<div class="bg-wrapper">
<div class="bg-layer"></div>
<header id="page-title">
<div class="container">
About Us </div>
</header>
</div>
Is there any way of adding a filter (CSS or other type) to an element so this filter then effectively applies to the element below it.
I have an element with reduced opacity, that sits on top of a background image. I would like the element with reduced opacity to basically apply a black and white filter to the part of the element directly below it (effectively working as a mask). In the example below this means that the part of the image below the white box has the filter applied to it.
https://codepen.io/emilychews/pen/zWjWxo
Two things to note:
1) Because I'm using vh and vw units and the layout changes dependent on device / window size, I can't slice the image in photoshop or similar and then add or align it separately.
2) The image placeholder service I'm using serves up random images, and sometimes the image in the example is black and white - please don't let this confuse the issue.
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
#row-1 {
position: relative;
width: 80vw;
height: 70vh;
background: red;
border: 1px solid black;
background-image: url("https://loremflickr.com/320/240");
background-size: cover;
}
#inner {
background: rgba(255, 255, 255, .8);
position: absolute;
width: 50%;
height: 40%;
right: 0;
top: 0;
padding: 1rem;
}
<div id="row-1">
<div id="inner">
<p id="text">Some Text</p>
</div>
</div>
Short answer - no. But there is a non-standard -webkit-back-drop filter that works in iOS, but it's only available in other browsers behind an experimental flag.
https://webdesign.tutsplus.com/tutorials/css-backdrop-filters--cms-27314
(SVG 1.1 had a mechanism to do this, but the spec was poorly written and only IE10+ ever implemented it (and they may have backed it out))
You can try mix-blend-mode
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
#row-1 {
position: relative;
width: 80vw;
height: 70vh;
background: red;
border: 1px solid black;
background-image: url("https://loremflickr.com/320/240");
background-size: cover;
}
#inner {
background: rgba(255, 255, 255, .8);
position: absolute;
width: 50%;
height: 40%;
right: 0;
top: 0;
padding: 1rem;
mix-blend-mode: exclusion;
}
<div id="row-1">
<div id="inner">
<p id="text"></p>
</div>
</div>
Please, try this solution I have made on Codepen. You can play around with the Z-index & opacity in background-color.
It uses the :after pseudo element to make some sort of filter. Being stretched all over the div with an absolute position, everything underneath it will be affected.
I hope it can help you!
HTML:
<div class="box">
<p>Hello world!</p>
</div>
CSS:
.box {
position: relative;
width: 400px;
height: 300px;
background: url(http://farm2.staticflickr.com/1486/23990047223_5b7a0c82e8_b.jpg);
background-size: cover;
margin: 0 auto 100px;
z-index: 1;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
// change color opacity here!
background-color: rgba(0, 0, 0, 0.5);
}
// styling
.box p {
margin: 0;
font-size: 26px;
text-align: center;
color: white;
padding-top: 50px;
position: relative;
z-index: 0;
}
This is how I try to make the wrapper container scrollable over the footer element.
The footer should be fixed in the background, so it shouldn't move. I want to give the user the feeling he is moving the wrapper layer upwards to take a look at the fixed background footer.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100%;
z-index: 0;
overflow-x: auto;
background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center;
background-size: cover;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}
footer {
bottom: 0;
z-index: -10;
width: 100%;
height: 300px;
background: #555;
}
<div id="wrapper"></div>
<footer>This content should stay fixed on bottom of footer</footer>
For the fixed footer give position:fixed;bottom:0;
For parallax scrolling refer : Parallax
The edited code for you
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
z-index: 0;
overflow-x: auto;
background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center;
background-size: cover;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}
footer {
bottom: 0;
z-index: -10;
width: 100%;
height: 300px;
background: #555;
position: fixed;
}
<div id="wrapper">
Test</br>Test</br>Test</br>Test</br>Test</br>
Test</br>Test</br>Test</br>Test</br>Test</br>
Test</br>Test</br>Test</br>Test</br>Test</br>
Test</br>Test</br>Test</br>Test</br>Test</br>
Test</br>Test</br>Test</br>Test</br>Test</br>
</div>
<footer>This content should stay fixed on bottom of footer</footer>
See the materialize fixed footer