Codrops 원본

Background Shift Animation with CSS Blend Modes

배경 · MIT

배경 더 보기

Background Shift Animation with CSS Blend Modes 정적 미리보기

갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.

큰 화면으로 보기

SOURCE FILES

원본 코드 읽기

9개 파일

수집한 원본 소스와 실행 안내를 함께 제공합니다.

src/css/base.css

파일 저장

*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 22px;
}

body {
	margin: 0;
	--color-text: #fff;
	--color-bg: #e1ddd8;
	--color-link: #4ebbfb;
	--color-link-hover: #fff;
	--color-bg-shift: #1e2227;
	--page-padding: 2vw;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: brother-1816, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.demo-2 {
	--color-bg: #d8d8e1;
	--color-link: #fbae4e;
	--color-bg-shift: #2b2b3c;
}

.demo-3 {
	--color-bg: #e1d8dc;
	--color-link: #4efbf3;
	--color-bg-shift: #2e2125;
}

.invert {
	-webkit-filter: invert(1);
	filter: invert(1);
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: #000;
	animation: loaderAnim 0.7s linear infinite alternate forwards;

}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5, 0.5, 1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

a:hover {
	color: var(--color-link-hover);
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid red;
	background: transparent;
}

.unbutton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
}

.unbutton:focus {
	outline: none;
}

main {
	position: relative;
	z-index: 100;
}

.bg {
	background: var(--color-bg);
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	pointer-events: none;
}

.shift {
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	display: grid;
	pointer-events: none;
}

.shift--rotated {
	height: 120vh;
	top: -10vh;
}

.shift--horizontal {
	grid-auto-rows: 1fr;
	grid-auto-flow: row;
}

.shift--vertical {
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
}

.shift__layer {
	position: relative;
	overflow: hidden;
	margin-top: -0.5px;
}

.shift--rotated .shift__layer {
    transform: rotate(4deg) scale(1.1);
    width: 120%;
    left: -10%;
}

.shift__layer-inner {
	height: 100%;
	background: var(--color-bg-shift);
	transform: translate3d(0, 101%, 0);
}

.shift--vertical .shift__layer-inner { 
	transform: translate3d(101%, 0, 0);
}

.blend {
	mix-blend-mode: exclusion;
}

.intro {
	position: relative;
	display: grid;
	grid-template-areas:
		'intro-images intro-menu'
		'intro-title intro-title';
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	padding: 0 var(--page-padding) var(--page-padding);
	grid-gap: 5vh;
	height: 100vh;
}

.intro__title {
	grid-area: intro-title;
	text-transform: uppercase;
	align-self: end;
}

.intro__title-links {
	font-size: 0.65rem;
	margin-left: 0.25rem;
	display: flex;
	flex-wrap: wrap;
}

.demos {
	width: 100%;
}

.current {
	color: var(--color-text);
}

.intro__title-links a {
	margin-right: 0.5rem;
}

.intro__title-main {
	font-size: 13vw;
	font-family: ivypresto-display, serif;
	font-weight: 400;
	margin: 0;
	line-height: 0.9;
	pointer-events: none;
}

.intro__title-sub {
	font-size: 4vw;
	font-size: clamp(1rem, 4vw, 1.35rem);
	font-weight: 300;
	margin: 0.5rem 0 0 0;
	line-height: 1;
}

.intro__gallery {
	grid-area: intro-images;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
}

.intro__gallery-item {
	width: 100%;
	display: block;
	background-size: cover;
	border-radius: 13vw;
	margin-top: 1rem;
	background-position: 50% 50%;
}

.intro__gallery-item--top {
	border-radius: 0 0 13vw 13vw;
	margin: 0 0 50%;
}

.intro__menu-button {
	align-self: start;
	justify-self: end;
	border: 0;
	margin-top: 1rem;
	background: none;
	cursor: not-allowed;
	width: 60px;
	height: 60px;
}

.lines {
	stroke-width: 4px;
}

.present {
	position: relative;
	padding: 0 var(--page-padding) 10vh;
}

.present__text--large {
	grid-area: present-large;
	max-width: 95%;
	-webkit-hyphens: auto;
	hyphens: auto;
	font-size: 5.5vw;
	font-size: clamp(1rem, 5.25vw, 10rem);
	line-height: 1;
	font-weight: 300;
}

.present__text--small {
	grid-area: present-small;
	font-size: 1.25rem;
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.3;
	font-weight: 300;
}

.present__text--small p {
	margin-bottom: 10vh;
}

.present__visual {
	grid-area: present-visual;
	border-radius: 20vw;
	background-size: cover;
	background-position: 50% 50%;
	height: 105vh;
	width: 70%;
	max-width: 70vh;
	align-self: center;
	justify-self: center;
	position: relative;
}

.projects {
	position: relative;
	display: grid;
	grid-template-columns: 35% 15% 1fr;
	grid-template-areas: '... ... project-latest'
		'project-img-left ... project-title'
		'project-img-left project-img-right project-img-right'
		'project-more project-more project-more';
}

.project__latest {
	grid-area: project-latest;
	text-transform: uppercase;
	font-weight: 300;
	text-align: center;
	position: relative;
	padding-bottom: 20vh;
	margin-left: 5vw;
	width: 20vw;
	z-index: 0;
}

.project__latest::after {
	content: '';
	position: absolute;
	width: 44vw;
	height: 44vw;
	border: 1px solid #fff;
	border-radius: 50%;
	left: 50%;
	top: -25%;
	margin-left: -22vw;
}

.projects__img {
	position: relative;
	background-size: cover;
	background-position: 50% 50%;
}

.projects__title {
	grid-area: project-title;
	text-align: right;
	padding-right: var(--page-padding);
	font-family: ivypresto-display, serif;
	font-weight: 400;
	text-transform: uppercase;
}

.projects__title-main {
	font-size: 10vw;
	font-size: clamp(2rem, 10vw, 9rem);
	display: block;
	line-height: 0.9;
}

.projects__title-sub {
	font-size: 4vw;
	font-size: clamp(1.5rem, 4vw, 3rem);
	font-style: italic;
	line-height: 1;
	margin-right: 0.5vw;
}

.projects__img--left {
	grid-area: project-img-left;
	grid-column-end: 3;
	border-radius: 0 30vh 30vh 0;
	height: 60vh;
}

.projects__img--right {
	grid-area: project-img-right;
	border-radius: 40vh 0 0 40vh;
	height: 80vh;
}

.projects__more {
	grid-area: project-more;
	justify-self: center;
	text-decoration: underline;
	font-size: 1.5rem;
	font-size: clamp(1rem, 3vw, 1.5rem);
	margin: 15vh 0 35vh;
	font-weight: 300;
}

.type {
	padding: 30vh var(--page-padding);
	counter-reset: type-link;
}

.type__link {
	font-size: 5vw;
	font-size: clamp(2rem, 5vw, 6rem);
	font-weight: 300;
	color: #fff;
	margin: 0 1rem 0 0;
	position: relative;
	white-space: nowrap;
	display: block;
}

.type__link:hover,
.type__link:focus {
	color: #fff;
}

.type__link:nth-child(even) {
	font-family: ivypresto-display, serif;
	font-style: italic;
}

.type__link::before {
	counter-increment: type-link;
	content: counter(type-link);
	font-family: brother-1816, sans-serif;
	font-size: 1.15rem;
	font-style: normal;
	display: inline-block;
	margin-right: 0.5rem;
	vertical-align: 110%;
}

.footer {
	min-height: 400px;
	padding: 0 var(--page-padding);
}

.footer__links {
	grid-area: footer-list;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1.25rem;
	font-weight: 300;
}

.footer__links a {
	filter: invert(1);
}

.footer__links a:hover,
.footer__links a:focus {
	filter: none;
}

.footer__img {
	grid-area: footer-img;
	max-width: 300px;
	max-height: 400px;
	height: 80vh;
	width: 40vh;
	background-size: cover;
	background-position: 50% 50%;
	align-self: end;
	justify-self: center;
	border-radius: 20vh 20vh 0 0;
}

.footer__author {
	grid-area: footer-author;
	margin: 0;
	align-self: end;
	padding: 1rem 0;
	font-family: ivypresto-display, serif;
	font-weight: 400;
	font-size: 5vw;
	font-size: clamp(2rem, 4vw, 5rem);
}

.footer__year {
	grid-area: footer-year;
	align-self: end;
	padding-bottom: 1rem;
	font-size: 1.25rem;
	font-size: clamp(1rem, 2vw, 1.25rem);
	font-weight: 300;
}

@media screen and (min-width: 53em) {
	body {
		--page-padding: 1.5rem;
	}

	.lines {
		stroke-width: 2px;
	}

	.intro__menu-button {
		width: 105px;
		height: 105px;
	}

	.intro {
		grid-template-areas: 
		'intro-images intro-menu'
		'intro-images intro-ad'
		'intro-title ...';
		grid-template-columns: 67% 1fr;
		grid-template-rows: 1fr 1fr auto;
	}

	.intro__title {
		white-space: nowrap;
	}

	.demos {
		position: relative;
		width: auto;
	}

	.demos::before {
		content: '';
		width: 3rem;
		border-bottom: 1px solid;
		display: inline-block;
		vertical-align: middle;
		margin: 0 0.5rem;
	}

	.present {
		display: grid;
		grid-template-areas: 'present-large present-large''present-small present-visual';
		grid-template-columns: 40% 1fr;
	}

	.type__link {
		display: inline-block;
	}

	.footer {
		display: grid;
		grid-template-areas: 'footer-list footer-img ...''footer-author footer-img footer-year';
		grid-template-columns: auto 1fr auto;
		align-content: space-between;
	}

	.footer__links {
		column-count: 2;
	}
}

/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

html.has-scroll-dragging {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.has-scroll-smooth body {
	overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
	min-height: 100vh;
}

[data-scroll-direction="horizontal"] [data-scroll-container] {
	height: 100vh;
	display: inline-block;
	white-space: nowrap;
}

[data-scroll-direction="horizontal"] [data-scroll-section] {
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	height: 100%;
}

.c-scrollbar {
	position: absolute;
	right: 0;
	top: 0;
	width: 11px;
	height: 100%;
	transform-origin: center right;
	transition: transform 0.3s, opacity 0.3s;
	opacity: 0;
}

.c-scrollbar:hover {
	transform: scaleX(1.45);
}

.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
	opacity: 1;
}

[data-scroll-direction="horizontal"] .c-scrollbar {
	width: 100%;
	height: 10px;
	top: auto;
	bottom: 0;
	transform: scaleY(1);
}

[data-scroll-direction="horizontal"] .c-scrollbar:hover {
	transform: scaleY(1.3);
}

.c-scrollbar_thumb {
	position: absolute;
	top: 0;
	right: 0;
	background-color: black;
	opacity: 0.5;
	width: 7px;
	border-radius: 10px;
	margin: 2px;
	cursor: -webkit-grab;
	cursor: grab;
}

.has-scroll-dragging .c-scrollbar_thumb {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
	right: auto;
	bottom: 0;
}

src/index.html

파일 저장

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Background Shift with CSS Blend Modes | Demo 1 | Codrops</title>
		<!-- Generate Meta Tags via https://www.opengraph.xyz -->
		<meta name="description" content="A background color shift animation using CSS Blend Modes" />
		<meta name="keywords" content="mix-blend-mode, css blend modes, animation, background, animation, gsap" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="https://use.typekit.net/goy3tuq.css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
	</head>
	<body class="demo-1 loading">
		<div class="bg"></div>
		<div class="shift shift--horizontal">
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
		</div>
		<main data-scroll-container class="blend">
			<section class="intro frame">
				<div class="intro__title">
					<div class="intro__title-links">
						<div>
							<a href="http://tympanus.net/Development/DistortedPixels/">Previous demo</a>
							<a href="https://tympanus.net/codrops/?p=58511">Article</a>
							<a href="https://github.com/codrops/BackgroundShift">GitHub</a>
						</div>
						<div class="demos">
							<a class="current" href="index.html">Demo 1</a>
							<a href="index2.html">Demo 2</a>
							<a href="index3.html">Demo 3</a>
						</div>
					</div>
					<h1 class="intro__title-main">Mia Farkas</h1>
					<p class="intro__title-sub">Designer &amp; Visual Story Teller</p>
				</div>
				<div class="intro__gallery">
					<div style="background-image: url(img/1.jpg)" class="intro__gallery-item invert"></div>
					<div style="background-image: url(img/3.jpg)" class="intro__gallery-item intro__gallery-item--top invert"></div>
					<div style="background-image: url(img/2.jpg)" class="intro__gallery-item invert"></div>
				</div>
				<button class="intro__menu-button invert" aria-label="Open Menu">
					<svg width="100%" height="100%" viewBox="0 0 105 105">
						<circle fill="#25282a" cx="52.5" cy="52.5" r="52.5"/>
						<path class="lines" d="M40.5 46.208h25M40.5 52.208h25M40.5 58.208h25" stroke="#B7B7B7"/>
					</svg>
				</button>
			</section>
			<section class="present">
				<p class="present__text present__text--large">Mia is a multi-disciplinary designer who creates artful web experiences with a focus on interactive blissfulness and organic motion integration.</p>
				<p class="present__text present__text--small">According to this mystic interpretation, the legend of the three men in the fiery furnace appears as a magic fire ceremony by means of which the Son of God reveals himself. The Trinity is brought together with the unity, or, in other words, through coitus a child is produced. </p>
			</section>
			<section class="projects">
				<div class="project__latest">Latest</div>
				<h2 class="projects__title">
					<span class="projects__title-main">Phœbus</span>
					<span class="projects__title-sub">Hearken</span>
				</h2>
				<div class="projects__img projects__img--left invert" style="background-image: url(img/4.jpg);"></div>
				<div class="projects__img projects__img--right invert" style="background-image: url(img/5.jpg);"></div>
				<a class="projects__more" href="#">See all projects</a>
			</section>
			<section class="present">
				<p class="present__text present__text--large">Of all passions, that which is least known to ourselves is indolence: it is the most ardent and malignant of them all, although its violence may be insensible, and the injuries it causes may be hidden.</p>
				<div class="present__text present__text--small">
					<p>This amazing growth has proceeded steadily in an ever-widening fashion despite opposition as violent as any of which we have knowledge in the past. The criticism originally directed towards the little understood and viiimuch disliked sexual conception now includes the further teachings of a psychology which by the application to it of such damning phrases as mystical, metaphysical and sacrilegious, is condemned as unscientific.</p>
					<p>It is not a simple matter to come out boldly and state that every individual is to a large extent the determiner of his own destiny, for only by poets and philosophers has this idea been put forth—not by science; and it is a brave act to make this statement with full consciousness of all its meaning, and to stand ready to prove it by scientific reasoning and procedure.</p>
				</div>
				<div id="trigger" class="present__visual" style="background-image:url(img/6.jpg)"></div>
			</section>
			<section class="type">
				<a class="type__link">Astrø</a>
				<a class="type__link">Butterflies</a>
				<a class="type__link">Hot Stuff</a>
				<a class="type__link">Mr. Chekhov</a>
				<a class="type__link">Modern Man</a>
				<a class="type__link">Vedic Pi</a>
				<a class="type__link">Search of Soul</a>
				<a class="type__link">Nidanakatha</a>
				<a class="type__link">Sankhya Dub</a>
				<a class="type__link">Good Heart</a>
				<a class="type__link">Good Mind</a>
				<a class="type__link">The Skanda Purana</a>
				<a class="type__link">Mio</a>
				<a class="type__link">Mèahuasca</a>
				<a class="type__link">Dhammapada</a>
				<a class="type__link">Eternal</a>
			</section>
			<section class="footer">
				<ul class="footer__links">
					<li><a href="http://tympanus.net/Development/DistortedPixels/">Prev demo</a></li>
					<li><a href="https://tympanus.net/codrops/?p=58511">Article</a></li>
					<li><a href="https://github.com/codrops/BackgroundShift">GitHub</a></li>
					<li><a>About me</a></li>
					<li><a>Projects</a></li>
					<li><a>Writing</a></li>
					<li><a>Mind Lab</a></li>
					<li><a>Reading list</a></li>
				</ul>
				<h3 class="footer__author">Mia Farkas</h3>
				<div class="footer__year">2022</div>
				<div class="footer__img" style="background-image:url(img/2.jpg);"></div>
			</section>
		</main>
		<script type="module" src="js/index.js"></script>
	</body>
</html>

함께 쓰는 파일 7개 보기

src/index2.html

파일 저장

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Background Shift with CSS Blend Modes | Demo 2 | Codrops</title>
		<!-- Generate Meta Tags via https://www.opengraph.xyz -->
		<meta name="description" content="A background color shift animation using CSS Blend Modes" />
		<meta name="keywords" content="mix-blend-mode, css blend modes, animation, background, animation, gsap" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="https://use.typekit.net/goy3tuq.css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
	</head>
	<body class="demo-2 loading">
		<div class="bg"></div>
		<div class="shift shift--vertical">
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
		</div>
		<main data-scroll-container class="blend">
			<section class="intro frame">
				<div class="intro__title">
					<div class="intro__title-links">
						<div>
							<a href="http://tympanus.net/Development/DistortedPixels/">Previous demo</a>
							<a href="https://tympanus.net/codrops/?p=58511">Article</a>
							<a href="https://github.com/codrops/BackgroundShift">GitHub</a>
						</div>
						<div class="demos">
							<a href="index.html">Demo 1</a>
							<a class="current" href="index2.html">Demo 2</a>
							<a href="index3.html">Demo 3</a>
						</div>
					</div>
					<h1 class="intro__title-main">Mia Farkas</h1>
					<p class="intro__title-sub">Designer &amp; Visual Story Teller</p>
				</div>
				<div class="intro__gallery">
					<div style="background-image: url(img/1.jpg)" class="intro__gallery-item invert"></div>
					<div style="background-image: url(img/3.jpg)" class="intro__gallery-item intro__gallery-item--top invert"></div>
					<div style="background-image: url(img/2.jpg)" class="intro__gallery-item invert"></div>
				</div>
				<button class="intro__menu-button invert" aria-label="Open Menu">
					<svg width="100%" height="100%" viewBox="0 0 105 105">
						<circle fill="#25282a" cx="52.5" cy="52.5" r="52.5"/>
						<path class="lines" d="M40.5 46.208h25M40.5 52.208h25M40.5 58.208h25" stroke="#B7B7B7"/>
					</svg>
				</button>
			</section>
			<section class="present">
				<p class="present__text present__text--large">Mia is a multi-disciplinary designer who creates artful web experiences with a focus on interactive blissfulness and organic motion integration.</p>
				<p class="present__text present__text--small">According to this mystic interpretation, the legend of the three men in the fiery furnace appears as a magic fire ceremony by means of which the Son of God reveals himself. The Trinity is brought together with the unity, or, in other words, through coitus a child is produced. </p>
			</section>
			<section class="projects">
				<div class="project__latest">Latest</div>
				<h2 class="projects__title">
					<span class="projects__title-main">Phœbus</span>
					<span class="projects__title-sub">Hearken</span>
				</h2>
				<div class="projects__img projects__img--left invert" style="background-image: url(img/4.jpg);"></div>
				<div class="projects__img projects__img--right invert" style="background-image: url(img/5.jpg);"></div>
				<a class="projects__more" href="#">See all projects</a>
			</section>
			<section class="present">
				<p class="present__text present__text--large">Of all passions, that which is least known to ourselves is indolence: it is the most ardent and malignant of them all, although its violence may be insensible, and the injuries it causes may be hidden.</p>
				<div class="present__text present__text--small">
					<p>This amazing growth has proceeded steadily in an ever-widening fashion despite opposition as violent as any of which we have knowledge in the past. The criticism originally directed towards the little understood and viiimuch disliked sexual conception now includes the further teachings of a psychology which by the application to it of such damning phrases as mystical, metaphysical and sacrilegious, is condemned as unscientific.</p>
					<p>It is not a simple matter to come out boldly and state that every individual is to a large extent the determiner of his own destiny, for only by poets and philosophers has this idea been put forth—not by science; and it is a brave act to make this statement with full consciousness of all its meaning, and to stand ready to prove it by scientific reasoning and procedure.</p>
				</div>
				<div id="trigger" class="present__visual" style="background-image:url(img/6.jpg)"></div>
			</section>
			<section class="type">
				<a class="type__link">Astrø</a>
				<a class="type__link">Butterflies</a>
				<a class="type__link">Hot Stuff</a>
				<a class="type__link">Mr. Chekhov</a>
				<a class="type__link">Modern Man</a>
				<a class="type__link">Vedic Pi</a>
				<a class="type__link">Search of Soul</a>
				<a class="type__link">Nidanakatha</a>
				<a class="type__link">Sankhya Dub</a>
				<a class="type__link">Good Heart</a>
				<a class="type__link">Good Mind</a>
				<a class="type__link">The Skanda Purana</a>
				<a class="type__link">Mio</a>
				<a class="type__link">Mèahuasca</a>
				<a class="type__link">Dhammapada</a>
				<a class="type__link">Eternal</a>
			</section>
			<section class="footer">
				<ul class="footer__links">
					<li><a href="http://tympanus.net/Development/DistortedPixels/">Prev demo</a></li>
					<li><a href="https://tympanus.net/codrops/?p=58511">Article</a></li>
					<li><a href="https://github.com/codrops/BackgroundShift">GitHub</a></li>
					<li><a>About me</a></li>
					<li><a>Projects</a></li>
					<li><a>Writing</a></li>
					<li><a>Mind Lab</a></li>
					<li><a>Reading list</a></li>
				</ul>
				<h3 class="footer__author">Mia Farkas</h3>
				<div class="footer__year">2022</div>
				<div class="footer__img" style="background-image:url(img/2.jpg);"></div>
			</section>
		</main>
		<script type="module" src="js/index.js"></script>
	</body>
</html>

src/index3.html

파일 저장

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Background Shift with CSS Blend Modes | Demo 3 | Codrops</title>
		<!-- Generate Meta Tags via https://www.opengraph.xyz -->
		<meta name="description" content="A background color shift animation using CSS Blend Modes" />
		<meta name="keywords" content="mix-blend-mode, css blend modes, animation, background, animation, gsap" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="https://use.typekit.net/goy3tuq.css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
	</head>
	<body class="demo-3 loading">
		<div class="bg"></div>
		<div class="shift shift--rotated">
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
			<div class="shift__layer"><div class="shift__layer-inner"></div></div>
		</div>
		<main data-scroll-container class="blend">
			<section class="intro frame">
				<div class="intro__title">
					<div class="intro__title-links">
						<div>
							<a href="http://tympanus.net/Development/DistortedPixels/">Previous demo</a>
							<a href="https://tympanus.net/codrops/?p=58511">Article</a>
							<a href="https://github.com/codrops/BackgroundShift">GitHub</a>
						</div>
						<div class="demos">
							<a href="index.html">Demo 1</a>
							<a href="index2.html">Demo 2</a>
							<a class="current" href="index3.html">Demo 3</a>
						</div>
					</div>
					<h1 class="intro__title-main">Mia Farkas</h1>
					<p class="intro__title-sub">Designer &amp; Visual Story Teller</p>
				</div>
				<div class="intro__gallery">
					<div style="background-image: url(img/1.jpg)" class="intro__gallery-item invert"></div>
					<div style="background-image: url(img/3.jpg)" class="intro__gallery-item intro__gallery-item--top invert"></div>
					<div style="background-image: url(img/2.jpg)" class="intro__gallery-item invert"></div>
				</div>
				<button class="intro__menu-button invert" aria-label="Open Menu">
					<svg width="100%" height="100%" viewBox="0 0 105 105">
						<circle fill="#25282a" cx="52.5" cy="52.5" r="52.5"/>
						<path class="lines" d="M40.5 46.208h25M40.5 52.208h25M40.5 58.208h25" stroke="#B7B7B7"/>
					</svg>
				</button>
			</section>
			<section class="present">
				<p class="present__text present__text--large">Mia is a multi-disciplinary designer who creates artful web experiences with a focus on interactive blissfulness and organic motion integration.</p>
				<p class="present__text present__text--small">According to this mystic interpretation, the legend of the three men in the fiery furnace appears as a magic fire ceremony by means of which the Son of God reveals himself. The Trinity is brought together with the unity, or, in other words, through coitus a child is produced. </p>
			</section>
			<section class="projects">
				<div class="project__latest">Latest</div>
				<h2 class="projects__title">
					<span class="projects__title-main">Phœbus</span>
					<span class="projects__title-sub">Hearken</span>
				</h2>
				<div class="projects__img projects__img--left invert" style="background-image: url(img/4.jpg);"></div>
				<div class="projects__img projects__img--right invert" style="background-image: url(img/5.jpg);"></div>
				<a class="projects__more" href="#">See all projects</a>
			</section>
			<section class="present">
				<p class="present__text present__text--large">Of all passions, that which is least known to ourselves is indolence: it is the most ardent and malignant of them all, although its violence may be insensible, and the injuries it causes may be hidden.</p>
				<div class="present__text present__text--small">
					<p>This amazing growth has proceeded steadily in an ever-widening fashion despite opposition as violent as any of which we have knowledge in the past. The criticism originally directed towards the little understood and viiimuch disliked sexual conception now includes the further teachings of a psychology which by the application to it of such damning phrases as mystical, metaphysical and sacrilegious, is condemned as unscientific.</p>
					<p>It is not a simple matter to come out boldly and state that every individual is to a large extent the determiner of his own destiny, for only by poets and philosophers has this idea been put forth—not by science; and it is a brave act to make this statement with full consciousness of all its meaning, and to stand ready to prove it by scientific reasoning and procedure.</p>
				</div>
				<div id="trigger" class="present__visual" style="background-image:url(img/6.jpg)"></div>
			</section>
			<section class="type">
				<a class="type__link">Astrø</a>
				<a class="type__link">Butterflies</a>
				<a class="type__link">Hot Stuff</a>
				<a class="type__link">Mr. Chekhov</a>
				<a class="type__link">Modern Man</a>
				<a class="type__link">Vedic Pi</a>
				<a class="type__link">Search of Soul</a>
				<a class="type__link">Nidanakatha</a>
				<a class="type__link">Sankhya Dub</a>
				<a class="type__link">Good Heart</a>
				<a class="type__link">Good Mind</a>
				<a class="type__link">The Skanda Purana</a>
				<a class="type__link">Mio</a>
				<a class="type__link">Mèahuasca</a>
				<a class="type__link">Dhammapada</a>
				<a class="type__link">Eternal</a>
			</section>
			<section class="footer">
				<ul class="footer__links">
					<li><a href="http://tympanus.net/Development/DistortedPixels/">Prev demo</a></li>
					<li><a href="https://tympanus.net/codrops/?p=58511">Article</a></li>
					<li><a href="https://github.com/codrops/BackgroundShift">GitHub</a></li>
					<li><a>About me</a></li>
					<li><a>Projects</a></li>
					<li><a>Writing</a></li>
					<li><a>Mind Lab</a></li>
					<li><a>Reading list</a></li>
				</ul>
				<h3 class="footer__author">Mia Farkas</h3>
				<div class="footer__year">2022</div>
				<div class="footer__img" style="background-image:url(img/2.jpg);"></div>
			</section>
		</main>
		<script type="module" src="js/index.js"></script>
	</body>
</html>

src/js/index.js

파일 저장

import { map, calcWinsize, preloadImages, deepEqual } from './utils';
import LocomotiveScroll from 'locomotive-scroll';

const MAX_SCROLL_DISTANCE = 400;
const LAYER_BOUNDS = {min: 0, max: 101}; // percentage values
const shiftEl = document.querySelector('.shift');
let shiftDirection = 'h';
if ( shiftEl.classList.contains('shift--vertical') ) {
    shiftDirection = 'v';
}
else if ( shiftEl.classList.contains('shift--rotated') ) {
    shiftDirection = 'r';    
}
const layers = [...shiftEl.querySelectorAll('.shift__layer-inner')];
const triggerEl = document.querySelector('#trigger');

let currentScroll = 0;
let winsize;
let triggerTop;
let cache = {};
let layersTranslation = {x: 0, y: 0};

const calcTriggerTop = () => triggerEl.getBoundingClientRect()['top']+currentScroll;

const init = () => {
    winsize = calcWinsize(); 
    triggerTop = calcTriggerTop();
};

// Preload images then remove loader (loading class) from body
preloadImages('.projects__img, .footer__img, .intro__gallery-item').then(() => {
    document.body.classList.remove('loading');

    const lscroll = new LocomotiveScroll({
        el: document.querySelector('[data-scroll-container]'),
        smooth: true,
        smartphone: {smooth: true},
        tablet: {smooth: true}
    });
    
    init();

    // Locomotive Scroll event
    lscroll.on('scroll', obj => {
        currentScroll = obj.scroll.y;
        layersTranslation.x = shiftDirection !== 'v' ? 0 : map(((currentScroll+winsize.height)-triggerTop), 0, MAX_SCROLL_DISTANCE, -1*LAYER_BOUNDS.max, LAYER_BOUNDS.min);
        layersTranslation.y = shiftDirection === 'v' ? 0 : map(((currentScroll+winsize.height)-triggerTop), 0, MAX_SCROLL_DISTANCE, shiftDirection === 'h' ? LAYER_BOUNDS.max : -1*LAYER_BOUNDS.max, LAYER_BOUNDS.min);

        // only update for different values
        if ( cache.layersTranslation && deepEqual(layersTranslation, cache.layersTranslation) ) {
            layers.forEach(layer => layer.style.transform = `translate3d(${layersTranslation.x}%, ${layersTranslation.y}%, 0)`);
        }
        // cache the last translation
        cache.layersTranslation = layersTranslation;
    });

    window.addEventListener('resize', init);

});

src/js/utils.js

파일 저장

const imagesLoaded = require('imagesloaded');

// Clamps a value between an upper and lower bound
const clamp = (num, min, max) => num <= min ? min : num >= max ? max : num;

// Map number x from range [a, b] to [c, d]
const map = (x, a, b, c, d) => clamp((x - a) * (d - c) / (b - a) + c, Math.min(c,d), Math.max(c,d));

// Viewport size
const calcWinsize = () => {
    return { width: window.innerWidth, height: window.innerHeight };
};

// Preload images
const preloadImages = (selector = 'img') => {
    return new Promise((resolve) => {
        imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve);
    });
};

// from https://dmitripavlutin.com/how-to-compare-objects-in-javascript/
const isObject = (object) => object != null && typeof object === 'object';
const deepEqual = (object1, object2) => {
    const keys1 = Object.keys(object1);
    const keys2 = Object.keys(object2);
    if (keys1.length !== keys2.length) {
        return false;
    }
    for (const key of keys1) {
        const val1 = object1[key];
        const val2 = object2[key];
        const areObjects = isObject(val1) && isObject(val2);
        if ( areObjects && !deepEqual(val1, val2) || !areObjects && val1 !== val2 ) {
            return false;
        }
    }
    return true;
} 

export {
    clamp,
    map,
    calcWinsize,
    preloadImages,
    deepEqual
};

Media credits and license evidence실행 안내·자료

파일 저장

README.md
## Credits

- Images from [Unsplash](https://unsplash.com/)


## License
[MIT](LICENSE)

Made with :blue_heart:  by [Codrops](http://www.codrops.com)

LICENSE실행 안내·자료

파일 저장

MIT License

Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Bundled dependency licenses실행 안내·자료

파일 저장

locomotive-scroll@4.1.4 — LICENSE
The MIT License (MIT)

Copyright (c) Locomotive, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

BEHIND THE EXAMPLE

이 장면을 만드는 원리

Motion
블렌드 레이어의 스크롤 기준점
화면 크기·입력·동시 작업을 고정하고 실제 렌더링 실패와 비용을 관찰합니다.
이 예제에서는
calcTriggerTop은 화면 좌표에 Locomotive의 currentScroll을 더해 기준점을 잡습니다. 400px 구간을 백분율 이동량으로 바꾸고 방향별로 다른 축을 사용합니다.
코드와 함께 확인하기
코드에서 찾기
- calcTriggerTopindex.js
  변환된 화면 좌표와 별도 스크롤 값을 합치는 측정 지점입니다.
전체 코드로 이동
직접 해보기
1. 스크롤 중 크기를 바꾸고 같은 위치를 앞으로·뒤로 방문합니다.
  살펴볼 변화기준점 재계산 후 같은 위치가 같은 레이어 배치를 만드는지 확인해야 합니다.

블렌드 레이어의 스크롤 기준점↗

코드에서 찾기

직접 해보기

블렌드 레이어의 스크롤 기준점