diff --git a/html/css/main.css b/css/main.css similarity index 95% rename from html/css/main.css rename to css/main.css index 940df92..53c78b6 100644 --- a/html/css/main.css +++ b/css/main.css @@ -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; +} diff --git a/html/fonts/kamerik205-heavy.woff2 b/html/fonts/kamerik205-heavy.woff2 deleted file mode 100644 index c1bd3f5..0000000 Binary files a/html/fonts/kamerik205-heavy.woff2 and /dev/null differ diff --git a/html/fonts/merriweather-regular-italic.woff2 b/html/fonts/merriweather-regular-italic.woff2 deleted file mode 100644 index 38bfa01..0000000 Binary files a/html/fonts/merriweather-regular-italic.woff2 and /dev/null differ diff --git a/html/img/layer-1.jpg b/html/img/layer-1.jpg deleted file mode 100644 index b2687e8..0000000 Binary files a/html/img/layer-1.jpg and /dev/null differ diff --git a/html/img/layer-2.png b/html/img/layer-2.png deleted file mode 100644 index 71824e2..0000000 Binary files a/html/img/layer-2.png and /dev/null differ diff --git a/html/img/layer-5.png b/html/img/layer-5.png deleted file mode 100644 index 98d07e3..0000000 Binary files a/html/img/layer-5.png and /dev/null differ diff --git a/html/img/layer-6.png b/html/img/layer-6.png deleted file mode 100644 index a3627be..0000000 Binary files a/html/img/layer-6.png and /dev/null differ diff --git a/html/img/logo.svg b/html/img/logo.svg deleted file mode 100644 index 5f4cb62..0000000 --- a/html/img/logo.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/html/js/app.js b/html/js/app.js deleted file mode 100644 index e69de29..0000000 diff --git a/html/libs/rain.js b/html/libs/rain.js deleted file mode 100644 index c32f9b0..0000000 --- a/html/libs/rain.js +++ /dev/null @@ -1,62 +0,0 @@ -let canvas = document.getElementsByClassName('rain')[0]; -canvas.width = window.innerWidth; -canvas.height = window.innerHeight; - -let c = canvas.getContext('2d'); - -function randomNum(max, min) { - return Math.floor(Math.random() * max) + min; -} - -function RainDrops(x, y, endy, velocity, opacity) { - - this.x = x; - this.y = y; - this.endy = endy; - this.velocity = velocity; - this.opacity = opacity; - - this.draw = function() { - c.beginPath(); - c.moveTo(this.x, this.y); - c.lineTo(this.x, this.y - this.endy); - c.lineWidth = 1; - c.strokeStyle= "rgba(255, 255, 255, " + this.opacity + ")"; - c.stroke(); - } - - this.update = function() { - let rainEnd = window.innerHeight + 100; - if (this.y >= rainEnd) { - this.y = this.endy - 100; - } else { - this.y = this.y + this.velocity; - } - this.draw(); - } - -} - -let rainArray = []; - -for (let i = 0; i < 140; i++) { - let rainXLocation = Math.floor(Math.random() * window.innerWidth) + 1; - let rainYLocation = Math.random() * -500; - let randomRainHeight = randomNum(10, 2); - let randomSpeed = randomNum(20, .2); - let randomOpacity = Math.random() * .55; - rainArray.push(new RainDrops(rainXLocation, rainYLocation, randomRainHeight, randomSpeed, randomOpacity)); -} - -function animateRain() { - - requestAnimationFrame(animateRain); - c.clearRect(0,0, window.innerWidth, window.innerHeight); - - for (let i = 0; i < rainArray.length; i++) { - rainArray[i].update(); - } - -} - -animateRain(); diff --git a/html/index.html b/index.html similarity index 97% rename from html/index.html rename to index.html index 876dae6..e613bd8 100644 --- a/html/index.html +++ b/index.html @@ -1,47 +1,47 @@ - - - - - - paralax-3d - - - - - - -
-
-
-
-
-
-

Natural Forest HTML / CSS

-
- Creating a beautiful 3Dwebsite with a 'lens effect' -
- -
-
-
- -
-
-
-
-
-
- - + + + + + + paralax-3d + + + + + + +
+
+
+
+
+
+

Natural Forest HTML / CSS

+
+ Creating a beautiful 3Dwebsite with a 'lens effect' +
+ +
+
+
+ +
+
+
+
+
+
+ + diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..f53c573 --- /dev/null +++ b/js/app.js @@ -0,0 +1,8 @@ +document.addEventListener("mousemove", (e) => { + Object.assign(document.documentElement, { + style: ` + --move-x:${e.clientX}; + --move-y:${e.clientY}; + `, + }); +}); diff --git a/libs/rain.js b/libs/rain.js index e69de29..2ccf04f 100644 --- a/libs/rain.js +++ b/libs/rain.js @@ -0,0 +1,62 @@ +let canvas = document.getElementsByClassName('rain')[0]; +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +let c = canvas.getContext('2d'); + +function randomNum(max, min) { + return Math.floor(Math.random() * max) + min; +} + +function RainDrops(x, y, endy, velocity, opacity) { + + this.x = x; + this.y = y; + this.endy = endy; + this.velocity = velocity; + this.opacity = opacity; + + this.draw = function() { + c.beginPath(); + c.moveTo(this.x, this.y); + c.lineTo(this.x, this.y - this.endy); + c.lineWidth = 1; + c.strokeStyle= "rgba(255, 255, 255, " + this.opacity + ")"; + c.stroke(); + } + + this.update = function() { + let rainEnd = window.innerHeight + 100; + if (this.y >= rainEnd) { + this.y = this.endy - 100; + } else { + this.y = this.y + this.velocity; + } + this.draw(); + } + +} + +let rainArray = []; + +for (let i = 0; i < 140; i++) { + let rainXLocation = Math.floor(Math.random() * window.innerWidth) + 1; + let rainYLocation = Math.random() * -500; + let randomRainHeight = randomNum(10, 2); + let randomSpeed = randomNum(20, .2); + let randomOpacity = Math.random() * .55; + rainArray.push(new RainDrops(rainXLocation, rainYLocation, randomRainHeight, randomSpeed, randomOpacity)); +} + +function animateRain() { + + requestAnimationFrame(animateRain); + c.clearRect(0,0, window.innerWidth, window.innerHeight); + + for (let i = 0; i < rainArray.length; i++) { + rainArray[i].update(); + } + +} + +animateRain();