Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@IvanTymoshchuk
IvanTymoshchuk committed Jan 4, 2024
1 parent 6318dc4 commit cadd4bc
Show file tree
Hide file tree
Showing 13 changed files with 225 additions and 225 deletions.
216 changes: 108 additions & 108 deletions html/css/main.css → css/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,108 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--index: calc(1vw + 1vh);
--transition: 1.5s cubic-bezier(.05, .5, 0, 1);
}
@font-face {
font-family: kamerik-3d;
src: url(../fonts/kamerik205-heavy.woff2);
font-weight: 900;
}
@font-face {
font-family: merriweather-italic-3d;
src: url(../fonts/merriweather-regular-italic.woff2);
}
body {
background-color: #000;
color: #fff;
font-family: kamerik-3d;
}
.logo {
--logo-size: calc(var(--index) * 7.8);
width: var(--logo-size);
height: var(--logo-size);
background-repeat: no-repeat;
position: absolute;
left: calc(51% - calc(var(--logo-size) / 2));
top: calc(var(--index) * 2.8);
z-index: 1;
}
.layers {
perspective: 1000px;
overflow: hidden;
}
.layers__container {
height: 100vh;
min-height: 500px;
transform-style: preserve-3d;
transform: rotateX(var(--move-y)) rotateY(var(--move-x));
will-change: transform;
transition: transform var(--transition);
}
.layers__item {
position: absolute;
inset: -5vw;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.layer-1 {
transform: translateZ(-55px) scale(1.06);
}
.layer-2 {
transform: translateZ(80px) scale(.88);
}
.layer-3 {
transform: translateZ(180px) scale(.8);
}
.layer-4 {
transform: translateZ(190px) scale(.9);
}
.layer-5 {
transform: translateZ(300px) scale(.9);
}
.layer-6 {
transform: translateZ(380px);
}
.hero-content {
font-size: calc(var(--index) * 2.9);
text-align: center;
text-transform: uppercase;
letter-spacing: calc(var(--index) * -.15);
line-height: 1.35em;
margin-top: calc(var(--index) * 5.5);
}
.hero-content span {
display: block;
}
.hero-content__p {
text-transform: none;
font-family: merriweather-italic-3d;
letter-spacing: normal;
font-size: calc(var(--index) * .73);
line-height: 3;
}
.button-start {
font-family: Arial;
font-weight: 600;
text-transform: uppercase;
font-size: calc(var(--index) * .71);
letter-spacing: -.02vw;
padding: calc(var(--index) * .7) calc(var(--index) * 1.25);
background-color: transparent;
color: #fff;
border-radius: 10em;
border: rgb(255 255 255 / .4) 3px solid;
outline: none;
cursor: pointer;
margin-top: calc(var(--index) * 2.5);
}
.layer-4, .layer-5, .layer-6 {
pointer-events: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--index: calc(1vw + 1vh);
--transition: 1.5s cubic-bezier(.05, .5, 0, 1);
}
@font-face {
font-family: kamerik-3d;
src: url(../fonts/kamerik205-heavy.woff2);
font-weight: 900;
}
@font-face {
font-family: merriweather-italic-3d;
src: url(../fonts/merriweather-regular-italic.woff2);
}
body {
background-color: #000;
color: #fff;
font-family: kamerik-3d;
}
.logo {
--logo-size: calc(var(--index) * 7.8);
width: var(--logo-size);
height: var(--logo-size);
background-repeat: no-repeat;
position: absolute;
left: calc(51% - calc(var(--logo-size) / 2));
top: calc(var(--index) * 2.8);
z-index: 1;
}
.layers {
perspective: 1000px;
overflow: hidden;
}
.layers__container {
height: 100vh;
min-height: 500px;
transform-style: preserve-3d;
transform: rotateX(var(--move-y)) rotateY(var(--move-x));
will-change: transform;
transition: transform var(--transition);
}
.layers__item {
position: absolute;
inset: -5vw;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.layer-1 {
transform: translateZ(-55px) scale(1.06);
}
.layer-2 {
transform: translateZ(80px) scale(.88);
}
.layer-3 {
transform: translateZ(180px) scale(.8);
}
.layer-4 {
transform: translateZ(190px) scale(.9);
}
.layer-5 {
transform: translateZ(300px) scale(.9);
}
.layer-6 {
transform: translateZ(380px);
}
.hero-content {
font-size: calc(var(--index) * 2.9);
text-align: center;
text-transform: uppercase;
letter-spacing: calc(var(--index) * -.15);
line-height: 1.35em;
margin-top: calc(var(--index) * 5.5);
}
.hero-content span {
display: block;
}
.hero-content__p {
text-transform: none;
font-family: merriweather-italic-3d;
letter-spacing: normal;
font-size: calc(var(--index) * .73);
line-height: 3;
}
.button-start {
font-family: Arial;
font-weight: 600;
text-transform: uppercase;
font-size: calc(var(--index) * .71);
letter-spacing: -.02vw;
padding: calc(var(--index) * .7) calc(var(--index) * 1.25);
background-color: transparent;
color: #fff;
border-radius: 10em;
border: rgb(255 255 255 / .4) 3px solid;
outline: none;
cursor: pointer;
margin-top: calc(var(--index) * 2.5);
}
.layer-4, .layer-5, .layer-6 {
pointer-events: none;
}
Binary file removed html/fonts/kamerik205-heavy.woff2
View file
Binary file not shown.
Binary file removed html/fonts/merriweather-regular-italic.woff2
View file
Binary file not shown.
Binary file removed html/img/layer-1.jpg
View file
Binary file not shown.
Binary file removed html/img/layer-2.png
View file
Binary file not shown.
Binary file removed html/img/layer-5.png
View file
Binary file not shown.
Binary file removed html/img/layer-6.png
View file
Binary file not shown.
8 changes: 0 additions & 8 deletions html/img/logo.svg
View file

This file was deleted.

Empty file removed html/js/app.js
View file
Empty file.
62 changes: 0 additions & 62 deletions html/libs/rain.js
View file

This file was deleted.

94 changes: 47 additions & 47 deletions html/index.html → index.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>paralax-3d</title>
<link rel="stylesheet" href="css/main.css" />
<script src="js/app.js" defer></script>
<script src="libs/rain.js" defer></script>
</head>
<body>
<div class="logo" style="background-image: url(img/logo.svg)"></div>
<section class="layers">
<div class="layers__container">
<div
class="layers__item layer-1"
style="background-image: url(img/layer-1.jpg)"
></div>
<div
class="layers__item layer-2"
style="background-image: url(img/layer-2.png)"
></div>
<div class="layers__item layer-3">
<div class="hero-content">
<h1>Natural Forest <span>HTML / CSS</span></h1>
<div class="hero-content-p">
Creating a beautiful 3Dwebsite with a 'lens effect'
</div>
<button class="button-start">Start learning</button>
</div>
</div>
<div class="layers__item layer-4">
<canvas class="rain"></canvas>
</div>
<div
class="layers__item layer-5"
style="background-image: url(img/layer-5.png)"
></div>
<div
class="layers__item layer-6"
style="background-image: url(img/layer-6.png)"
></div>
</div>
</section>
<div style="height: 100vh"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>paralax-3d</title>
<link rel="stylesheet" href="css/main.css" />
<script src="js/app.js" defer></script>
<script src="libs/rain.js" defer></script>
</head>
<body>
<div class="logo" style="background-image: url(img/logo.svg)"></div>
<section class="layers">
<div class="layers__container">
<div
class="layers__item layer-1"
style="background-image: url(img/layer-1.jpg)"
></div>
<div
class="layers__item layer-2"
style="background-image: url(img/layer-2.png)"
></div>
<div class="layers__item layer-3">
<div class="hero-content">
<h1>Natural Forest <span>HTML / CSS</span></h1>
<div class="hero-content-p">
Creating a beautiful 3Dwebsite with a 'lens effect'
</div>
<button class="button-start">Start learning</button>
</div>
</div>
<div class="layers__item layer-4">
<canvas class="rain"></canvas>
</div>
<div
class="layers__item layer-5"
style="background-image: url(img/layer-5.png)"
></div>
<div
class="layers__item layer-6"
style="background-image: url(img/layer-6.png)"
></div>
</div>
</section>
<div style="height: 100vh"></div>
</body>
</html>
8 changes: 8 additions & 0 deletions js/app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
document.addEventListener("mousemove", (e) => {
Object.assign(document.documentElement, {
style: `
--move-x:${e.clientX};
--move-y:${e.clientY};
`,
});
});
Loading

0 comments on commit cadd4bc

Please sign in to comment.