Initial commit: Fortune Teller project

README.md

@@ -0,0 +1,33 @@
+# FortuneTeller
+
+## Description
+
+FortuneTeller is a mystical and engaging application inspired by the Magic 8 Ball. It provides answers to your questions through an enchanting interface. The project uses parallax effects and the GSAP library to create an immersive experience, enhanced with AI-generated images.
+
+## Features
+
+- Mystical interface with parallax effects.
+- Provides answers to user's questions in a captivating manner.
+- Utilizes GSAP library for smooth animations.
+- AI-generated images for a visually appealing experience.
+
+## Demo
+
+You can try the FortuneTeller [here](https://anastacodes.github.io/FortuneTeller/).
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+- GSAP (GreenSock Animation Platform)
+- AI-generated images
+
+## Acknowledgments
+
+- Inspired by the classic Magic 8 Ball toy.
+- Images created using AI tools.
+
+## Contact
+
+If you have any questions or suggestions, please feel free to reach out.

css/styles.css

@@ -0,0 +1,189 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+  }
+
+  :root {
+	--index: calc(1vw + 1vh);
+	--text: #e0e7e6;
+	--transition: transform 0.75s cubic-bezier(0.075, 0.5, 0, 1);
+  }
+
+  @font-face {
+	font-family: Neucha-Regular;
+	src: url(../fonts/Neucha-Regular.ttf);
+  }
+
+  body {
+	background-color: #000;
+	font-family: Neucha-Regular, sans-serif;
+	line-height: 1.5;
+  }
+
+  button, input {
+	font-family: Neucha-Regular, sans-serif;
+  }
+
+  .main-header {
+	position: relative;
+  }
+
+  .main-header::after {
+	content: '';
+	position: absolute;
+	z-index: 100;
+	width: 100%;
+	height: 450px;
+	background-image: url(../img/ground.png);
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	bottom: -225px;
+  }
+
+  .layers {
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+  }
+
+  .layer {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	background-size: cover;
+	background-position: center;
+	will-change: transform;
+	z-index: 2;
+	transition: var(--transition);
+  }
+
+  .layers__base {
+	transform: translate3d(0, calc(var(--scrollTop) / 1.6), 0);
+	z-index: 0;
+  }
+
+  .layers__middle {
+	transform: translate3d(0, calc(var(--scrollTop) / 2.5), 0);
+  }
+
+  .layers__front {
+	transform: translate3d(0, calc(var(--scrollTop) / 5.7), 0);
+  }
+
+  .layer__header {
+	z-index: 1;
+	transform: translate3d(0, calc(var(--scrollTop) / 2), 0);
+	transition: var(--transition);
+	will-change: transform;
+	text-transform: uppercase;
+	font-weight: 900;
+	color: var(--text);
+	text-shadow: 0 0 15px #2b929d;
+	max-width: 1200px;
+	padding: 0 45px;
+  }
+
+  .layers__title {
+	font-size: calc(var(--index) * 2);
+	letter-spacing: calc(var(--index) / 2.25);
+  }
+
+  .layers__caption {
+	font-size: calc(var(--index) / 1);
+	letter-spacing: calc(var(--index) / 3.5);
+	margin-top: calc(var(--index) * -0.75);
+	margin-bottom: 0.5rem;
+  }
+
+  .main-article {
+	--main-article-transform: translate3d(0, calc(var(--scrollTop) / -7.5), 0);
+	min-height: 100vh;
+	background-size: cover;
+	background-position: center;
+	color: var(--text);
+	display: flex;
+	align-items: center;
+	position: relative;
+	text-align: center;
+	top: -1px;
+	z-index: 10;
+  }
+
+  .main-article__content {
+	width: 100%;
+  }
+
+  .main-article__header {
+	font-size: calc(var(--index) * 1.25);
+	letter-spacing: calc(var(--index) / 3);
+	max-width: 40vw;
+	text-transform: uppercase;
+	transform: var(--main-article-transform);
+	transition: var(--transition);
+	will-change: transform;
+	text-shadow: 0 0 15px #2b929d;
+  }
+
+  .main-article__header:first-of-type {
+	text-align: start;
+	margin-left: 1vw;
+  }
+
+  .main-article__header:not(:first-of-type) {
+	position: absolute;
+	right: 0;
+	text-align: end;
+	margin-right: 1vw;
+  }
+
+  .main-article__paragraph {
+	padding-top: 5rem;
+	padding-left: 5rem;
+	margin: 0 auto;
+	max-width: calc(var(--index) * 20);
+	font-size: calc(var(--index) * 0.9);
+	margin-top: calc(var(--index) / 1.25);
+	transform: var(--main-article-transform);
+	transition: var(--transition);
+	will-change: transform;
+  }
+
+  .main-article__paragraph button {
+	background: transparent;
+	border: none;
+	color: white;
+	font-size: 1.25rem;
+	cursor: pointer;
+	margin-top: 1rem;
+  }
+
+  .content {
+	will-change: transform;
+  }
+
+  .copy {
+	position: absolute;
+	bottom: calc(var(--index) * 2.5);
+	opacity: 0.45;
+	font-size: calc(var(--index) * 0.75);
+	letter-spacing: calc(var(--index) / 37.5);
+  }
+
+  #question {
+	border: none;
+	background: transparent;
+	color: white;
+	font-size: 1.25rem;
+	border-bottom: 1px solid white;
+  }
+
+  #answer {
+	height: 20px;
+  }
+

index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Fortune Teller</title>
+	<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
+  <link rel="stylesheet" href="./css/styles.css">
+</head>
+<body>
+  <div class="wrapper">
+    <div class="content">
+      <header class="main-header">
+        <div class="layers">
+          <div class="layer__header">
+            <div class="layers__caption">Each of us has wanted to know our fate at least once...</div>
+            <div class="layers__title">Deep into the dark forest... there lie the answers you seek...</div>
+          </div>
+          <div class="layer layers__base" style="background-image: url(./img/first-background.png);"></div>
+          <div class="layer layers__middle" style="background-image: url(./img/second-layer.png);"></div>
+          <div class="layer layers__front" style="background-image: url(./img/first-layer.png);"></div>
+        </div>
+      </header>
+      <article class="main-article" style="background-image: url(./img/second-background.png);">
+        <div class="main-article__content">
+          <p class="main-article__header">The whispers of ancient forests and stars lead you here...</p>
+          <p class="main-article__header">What do you wish to know from the sunsets of time?</p>
+          <div class="main-article__paragraph"> 
+            <div><input type="text" id="question" placeholder="Ask a question"></div>
+            <div><button id="getAnswer">Get Answer</button></div>
+            <p id="answer"></p>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+  <script src="./libs/gsap/gsap.min.js" defer></script>
+  <script src="./libs/gsap/ScrollTrigger.min.js" defer></script>
+  <script src="./libs/gsap/ScrollSmoother.min.js" defer></script>
+  <script src="./js/animate.js" defer></script>
+  <script src="./js/magicBall.js"></script>
+</body>
+</html>

js/animate.js

@@ -0,0 +1,8 @@
+window.addEventListener('scroll', e => {
+	document.documentElement.style.setProperty('--scrollTop', `${this.scrollY}px`) // Update method
+})
+gsap.registerPlugin(ScrollTrigger, ScrollSmoother)
+ScrollSmoother.create({
+	wrapper: '.wrapper',
+	content: '.content'
+})

js/magicBall.js

@@ -0,0 +1,53 @@
+const answers = [
+  "Without a doubt",
+  "It is certain",
+  "No doubt about it",
+  "Definitely yes",
+  "You can count on it",
+  "I think so",
+  "Most likely",
+  "Good prospects",
+  "Signs point to yes",
+  "Yes",
+  "Unclear, try again",
+  "Ask later",
+  "Better not tell you now",
+  "Cannot predict now",
+  "Concentrate and ask again",
+  "Don't even think about it",
+  "My answer is no",
+  "Based on my data, no",
+  "Not very good prospects",
+  "Very doubtful",
+];
+
+const questionWords = [
+  "how",
+  "why",
+  "why",
+  "when",
+  "where",
+  "where to",
+  "where from",
+  "how much",
+  "what",
+  "who",
+];
+
+document.querySelector("#getAnswer").addEventListener("click", () => {
+  const question = document.querySelector("#question").value.toLowerCase();
+  let answer = document.querySelector("#answer");
+  answer.innerHTML = "";
+
+  if (question === "") {
+    answer.innerHTML = "The universe does not hear you...";
+    return;
+  } else if (questionWords.some((word) => question.includes(word.toLowerCase()))) {
+    answer.innerHTML = "The universe cannot answer...";
+    return;
+  }
+
+  const randomIndex = Math.floor(Math.random() * answers.length);
+  const randomAnswer = answers[randomIndex];
+  answer.innerHTML = randomAnswer;
+});