Text and Headline scroll over effect

Everything is in the code – just look:

here is the layout – working with codeblock element ( Deactivate schema.org markup ) means no additional containers.

what is the codeblock element input:
and the surrounding color-section got custom-class: fixed-heading

<div class="mask">
	<div class="mask__content">
		<div class="container is-full">
			<div class="teaser is-centered">
				<div class="teaser__title">
					<h2 class="is-h2">Your Text</h2>
					<h2 class="is-h1">A next line</h2>
				</div>
			</div>
		</div>
	</div>
</div>

your input for quick css:

.mask {
	height:400px;
}

@supports ((-webkit-clip-path:polygon(0 -1px,0 calc(100% + 1px),100% calc(100% + 1px),100% -1px)) or (clip-path:polygon(0 -1px,0 calc(100% + 1px),100% calc(100% + 1px),100% -1px))) 
{
	.mask {
		-webkit-clip-path:polygon(0 -1px,0 calc(100% + 1px),100% calc(100% + 1px),100% -1px);
		clip-path:polygon(0 -1px,0 calc(100% + 1px),100% calc(100% + 1px),100% -1px);
		clip:rect(0,auto,auto,0)
	}
	body:not(.is-noscroll) .mask {
		position:relative
	}

	.mask .mask__content {
		position:fixed
	}

	.mask .mask__content {
		top:50vh
	}
}

.mask__content {
	position:absolute;
	width:100%;
	left:0;
	transform:translateY(-50%);
	z-index:20;
	top:50%
}

.fixed-heading .content {
    padding: 0 !important;
}

h2.is-h2 {
    text-align: center !important;
    font-size: 36px;
    font-weight: normal;
    text-transform: none !important;
    line-height: 60px;
}

if you like to style the h2 change the class in the code block element in is-h1 or something else

the color-section can have background as you like. And: “no minimum height” ( is given by mask height )

See example page: https://webers-testseite.de/schrift-und-parallax/

next question from you:

clip text only works on firefox with background-attachment : scroll.
but on chrome and safari they will do the trick with : fixed
so we need a fallback for firefox
see same example page above.

take a color-section give it a custom class like: cliptext
put in it a heading alb element ( or text-block Alb)

.cliptext .av-special-heading-tag  {
  background :url('https://link-to-your-image');
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  color: #000;
  font-size: 200px !important;
  font-weight: 900;
  line-height: 1.5em;
  letter-spacing: .1em;
  text-rendering: optimizeLegibility;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;

  -webkit-filter: drop-shadow(2px 2px 5px #333);
  filter: drop-shadow(2px 2px 5px #333);
}

@supports(-moz-appearance:none){
  .cliptext .av-special-heading-tag {background-attachment:inherit}
}