We Keep Coding

Switch header from absolute to fixed positioned with slide in/out transition when scrolled down

I have a website header which appears full-size and is positioned absolutely such that it allows the underlying content to be partially visible 'behind' it. It should scroll off screen as the user scrolls down the page.
When the user hits a certain scroll point, 400px down the page, the header should re-appear in a fixed position at the top of the viewport and should be a smaller/minimal version. To facilitate this in a performant way (i.e not using window scroll events) I'm using an invisible marker and setting an IntersectionObserver on it to set a class on the body when the marker has been hit.
This works nicely, although please run this in a full-size viewer as the small inline version doesn't work so well (something I will address, but not part of the question):
let waypoint = new IntersectionObserver(entries => {
document.body.classList.toggle('waypoint-passed', !entries[0].isIntersecting);
});
waypoint.observe(document.querySelector('.waypoint'));
* {
margin: 0;
padding: 0;
}
.header {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 10;
background-color: rgba(0,0,255,0.5);
color: #fff;
}
.header__full {
padding: 100px 0;
}
.header__min {
padding: 20px 0;
display: none;
}
body.waypoint-passed .header {
position: fixed;
}
body.waypoint-passed .header__full {
display: none;
}
body.waypoint-passed .header__min {
display: block;
}
.section {
aspect-ratio: 4 / 3;
background-color: #ddd;
color: #333;
display: grid;
place-items: center;
}
.section + .section {
margin-top: 10px;
}
.trigger-indicator {
border-top: 1px dashed red;
color: red;
position: absolute;
top: 400px;
right: 0;
left: 0;
}
.waypoint {
position: absolute;
top: 400px;
width: 0;
height: 0;
}
<header class="header">
<div class="header__full">Full Header</div>
<div class="header__min">Minimal Header</div>
</header>
<section class="section">Section 1</section>
<section class="section">Section 2</section>
<section class="section">Section 3</section>
<section class="section">Section 4</section>
<div class="trigger-indicator">Trigger Point</div>
<div class="waypoint"></div>
However, the last requirement is proving tricky! I need the minimal version of the header to slide down into position when the trigger point has been passed as the user scrolls down the page and then slide back up when the trigger point has been passed when the visitor scrolls back up.
The most performant way to do the animation is via CSS transform: translateY() so I'd like to implement it like that, but I just cannot figure out a nice way to trigger the slide down/up transitions.

Is there a way to mask a sticky element using an absolute element?

I've been trying to create a sticky position image that changes as it scrolls across the border between two sections of my page. So basically, there should be two sticky position images, the top one gets masked by the bottom section and the bottom gets masked by the top section. I am having trouble figuring out a way to mask both images at the same time (you can use the bottom section div to hide the top image, and vice versa, but not both at the same time).
Here's an image to illustrate what I'm trying to do
Here's the code I'm using:
.lblue {
height: 40vh;
width:10vw;
position: -webkit-sticky;
position: sticky;
top:30vh;
left:45vw;
background:lightblue;
}
.lred {
height: 40vh;
width:10vw;
position: -webkit-sticky;
position: sticky;
top:30vh;
left:45vw;
background:lightcoral;
}
.blue {
position: absolute;
top:0;
height:150vh;
width:100vw;
background:blue;
}
.red {
position: absolute;
top:100vh;
height:100vh;
width: 100vw;
background:red;
}
<div class="blue">
<div class="lblue"></div>
</div>
<div class="red">
<div class="lred"></div>
</div>
Thank you!

Here’s a solution. The trick is to use the images as CSS backgrounds, because CSS backgrounds can be easily fixed in the viewport of their parents.
.blue {
position: absolute;
top:0;
height:150vh;
width:100vw;
background: blue fixed linear-gradient(lightblue, lightblue) 45vw 30vh / 10vw 40vh no-repeat;
}
.red {
position: absolute;
top:100vh;
height:100vh;
width: 100vw;
background: red fixed linear-gradient(lightcoral, lightcoral) 45vw 30vh / 10vw 40vh no-repeat;
}
<div class="blue"></div>
<div class="red"></div>
In this solution, you can replace linear-gradient(color, color) by the URL of your image, using url(https://…). I used gradients because, for the browser, gradients are (generated) images. So, this trick actually works with images.
The position: absolute also becomes useless, at least for the demo.
The long background rule may need some explanations. background is a shorthand (= a short way to write several properties in a single line) for:
background-color: red;
background-attachement: fixed;
background-image: linear-gradient(lightcoral, lightcoral);
background-position: 45vw 30vh;
background-size: 10vw 40vh;
background-repeat: no-repeat;

position:fixed can do this if you conside a clip-path trick to hide the overflow so that each element will show only inside its section
.lblue,
.lred {
height: 40vh;
width: 10vw;
position: fixed;
top: 30vh;
left: 45vw;
background: lightblue;
}
.lred {
background: lightcoral;
}
.blue,
.red {
height: 100vh;
background: blue;
clip-path: inset(0 0 0 0); /* this is important */
}
.red {
background: red;
}
body {
margin: 0
}
<div class="blue">
<div class="lblue"></div>
</div>
<div class="red">
<div class="lred"></div>
</div>

Header banner with css only?

I'm a beginner in css and i'm trying to create a hero banner with css only and make it responsive, i'm quite confused with positioning of the texts on top of the image, if i zoom the page or resize it down the texts don't respond.
<header class="main-header">
<img src="imgs/header.jpg"/>
<div class="title">
<h1>This is a title</h1>
<p>some texts here</p>
</div>
</header>
css:
.main-header img {
max-width: 100%;
margin: 0 auto;
position: relative;
}
.title {
position: relative;
top: -450px;
left: 10%;
text-align: center;
display: inline-block;
color: white;
margin: 0 auto;
width: 80%;
text-transform: uppercase;
}
.title h1 {
font-size: 2.7rem;
font-weight: 700;
margin: 0 auto;
width: 80%;
margin-bottom: 1.5%;
}
.title p {
font-size: .60rem;
width: 33%;
margin: 0 auto;
line-height: 1.8;
}
Is it even possible to create a hero banner with css only? cuz i can't see any tutorial for that..

Example: Responsive Hero Banner with Image and Text
Here's a very minimal example of a full width, responsive hero banner with image and text, using only css.
The HTML:
<div class="hero-wrapper">
<header class="hero">
<div class="hero-sizing"></div>
<div class="hero-content">
<h1>Hero Title</h1>
<p>Hero paragraph text.</p>
</div>
</header>
</div>
The only unusual element there is the "hero-sizing" div. It's there to ensure the banners image maintains its aspect ratio at different window size (more on "hero-sizing" later).
On to the css. First is the outermost hero-wrapper class:
.hero-wrapper {
clear: both;
position: relative;
width: 100%;
text-align: center;
font: 18px helvetica, sans-serif;
color: white;
}
Nothing too confusing here, mostly just setting up some formatting. Note that width: 100% makes the banner extend the full width of the window.
Next is the hero class, which specifies the banner image and how it is displayed:
.hero {
background-image: url(http://lorempixel.com/image_output/people-q-c-1200-400-6.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
background-size: 100% auto;
}
This hero class specifies the image, centers it, and sets it to the full width of its container.
Next comes the hero-sizing class that's responsible for maintaining the banner's aspect ratio when it's resized:
.hero-sizing {
padding-top: 33%;
}
To maintain the image's aspect ratio, padding-top must match the image's height:width ratio. Since the image in this example is 1200 wide by 400 high, we've set padding-top to 33%. hero-sizing serves an important function -- it stretches and shrinks the height of div containing the background image, so the div's aspect ratio and the image's aspect ratio always match.
With just the above css, we now have a full-width, responsive banner image that maintains its aspect ratio, but we still would like to be able to add some text to the banner and have it look decent. That's what the hero-content class and 'hero-content:before pseudo-class are for:
.hero-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.hero-content:before {
content: ' ';
display: block;
height: 40%;
}
Our content ought to be placed at roughly the same spot over the image, regardless of the image's size. To accomplish this, we're employing a little trick with :before pseudo-class to push our content down the page by 40% of the banner's current height. This positioning 'trick' means our content's position is responsive, as it will stay at the same place over the image.
The final css just sets some formatting preferences:
.hero-content h1,
.hero-content p {
margin-top: 0px;
margin-bottom: 6px;
}
And we're done.
Granted, this is just a bare minimum example which could be improved for small screens with #media queries (like reducing the font size), but this example shows how to implement two very useful capabilities:
full width, responsive hero banner images that maintain aspect ratio
consistent content positioning over the image
.hero-wrapper {
clear: both;
position: relative;
width: 100%;
text-align: center;
font: 18px helvetica, sans-serif;
color: white;
}
.hero {
background-image: url(https://picsum.photos/id/1062/1200/400);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
background-size: 100% auto;
}
.hero-sizing {
padding-top: 33%;
}
.hero-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.hero-content:before {
content: ' ';
display: block;
height: 40%;
}
.hero-content h1,
.hero-content p {
margin-top: 0px;
margin-bottom: 6px;
}
body {
margin: 0;
background-color: #d0d0d0;
}
<div class="hero-wrapper">
<header class="hero">
<div class="hero-sizing"></div>
<div class="hero-content">
<h1>Hero Title</h1>
<p>Hero paragraph text.</p>
</div>
</header>
</div>

align texts or images in Bootstrap carousel

I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.
here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.
CSS for align
.carousel-caption {
position: absolute;
right: 15%;
bottom: 40%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.
In this exemple text stay fixed on every device.

<div class="wrap">
<div class="display-table">
<div class="display-cell">
<h1>Title in here</h1>
</div>
</div>
</div>
<style>
.wrap {
width: 100%;
height: 400px;
}
.display-table {
width: 100%;
height: 100%;
display: table;
}
.display-cell {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
</style>
This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!
Hope this helps :)

Hope, Try this demo that centers text vertically in the Bootstrap carousel.
Here is the Fiddle.
All I do here is give the div a height that contains the text and then position it with this css...
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}

How to fix an image compared with another one in CSS?

http://tree-leaves.comuf.com/
In this website, I want to fix the leaves position just over the branchs of the tree in spite of resizing the window.
For this, I used percentage in the CSS positioning, but when I resize the window, I can see that the leaves aren't perfectly aligned with the branchs.
How can I do to position the leaves with more precision, knowing that the tree and the leaves change their dimensions when we resize the window ?
HTML code :
<pre>
<div id="leaves">
<img src="images/leaf1.svg" id="l_1">
<img src="images/leaf1.svg" id="l_2">
<img src="images/leaf1.svg" id="l_3">
</div>
<div id="content">
<img src="images/tree.svg" id="tree">
</div>
</pre>
CSS code :
#content {
float: left;
width: 100%;
text-align: center;
background: linear-gradient(to bottom, transparent 0%,transparent 85%,#893700 85%,#893700 100%);
}
#tree {
width: 80%;
left: 10%;
z-index: 10;
}
#leaves {
background-color: red;
}
#leaves img {
width: 5%;
}
#l_1 {
margin: 0;
margin-bottom: -4%;
margin-left:5.7%;
transform: rotate(-35deg);
}
#l_2 {
margin: 0;
margin-bottom: 0%;
margin-left: 12.9%;
}
#l_3 {
margin: 0;
margin-bottom: -4%;
margin-left: 7%;
transform: rotate(-5deg);
}

What you can try is using viewport units, such as vw. I have played around seems working good, i.e. for first leaf on the left:
#f_1 {
margin-bottom: -4vw;
margin-left: 5.7vw;
transform: rotate(-35deg);
}
You can just use browser Web Inspector/Developer Tools to adjust the values for each leaf, and save it when you're happy with them all. Obviously, you can also do it on the branches too.
http://caniuse.com/#feat=viewport-units