Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>ARK SHELTER | Premium Yaşam Alanları</title>

<style>

:root {

--text-color: #fff;

--bg-color: #fff;

--text-color-alt: #000;

--grey: #808080;

--text-color-4: #211f1f;

--preview-text: #fff;

--glass-bg: rgba(255, 255, 255, 0.1);

--glass-border: rgba(255, 255, 255, 0.2);

--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

}

[data-theme="dark"] {

--bg-color: #211f1f;

--text-color-alt: #FFF;

--glass-bg: rgba(0, 0, 0, 0.2);

--glass-border: rgba(255, 255, 255, 0.1);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

font-size: 16px;

scroll-behavior: smooth;

}

html, body {

height: 100%;

overflow-x: hidden;

}

body {

font-family: "Roboto", sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

background: var(--bg-color);

color: #fff;

transition: background-color 0.3s ease;

}

#app {

height: 100%;

}

/* Hide scrollbar */

body {

scrollbar-width: none;

-ms-overflow-style: none;

}

body::-webkit-scrollbar {

width: 0;

height: 0;

}

/* Typography */

h1, h2, h3, h4, h5, h6 {

font-weight: 700;

line-height: 1.2;

}

h3 {

font-size: 1.5rem;

}

a {

text-decoration: none;

color: var(--text-color);

display: inline-block;

transition: all 0.3s ease;

}

a:hover {

color: inherit;

}

ul {

list-style-type: none;

padding-left: 0;

margin: 0;

}

li {

display: inline-block;

margin: 0 15px;

}

li a {

margin: 0px 15px;

}

/* Navbar */

.navbar {

display: flex;

justify-content: space-between;

padding: 35px 50px;

position: absolute;

width: calc(100% - 100px);

top: 0;

left: 0;

z-index: 10;

height: auto;

backdrop-filter: blur(10px);

background: var(--glass-bg);

border-bottom: 1px solid var(--glass-border);

}

.brand a {

letter-spacing: 6px;

font-weight: bold;

font-size: 1.2rem;

}

/* Nav Links */

.nav-item {

position: relative;

overflow: hidden;

padding: 15px 0px 10px 0px;

margin: 0 15px;

letter-spacing: 1px;

font-weight: bold;

}

.nav-item:after {

content: "";

position: absolute;

bottom: 4px;

right: 0;

width: 0%;

height: 2px;

background: var(--text-color);

transition: all 0.32s ease-out;

}

.nav-item:hover {

color: var(--text-color);

}

.nav-item:hover:after {

left: 0;

width: 100%;

}

.navbar-toggle {

position: absolute;

display: none;

right: 35px;

top: 16px;

width: 30px;

height: 30px;

z-index: 1;

background: transparent;

border: none;

cursor: pointer;

}

.toggle-bar {

width: 20px;

height: 2px;

background: var(--text-color);

top: 10px;

right: 5px;

position: absolute;

transition: 0.26s ease all;

}

.toggle-bar:nth-child(2) {

top: 15px;

}

.toggle-bar:nth-child(3) {

top: 20px;

}

/* Mobile Nav */

@media screen and (max-width: 1191px) {

.navbar {

padding: 35px 32px;

width: calc(100% - 64px);

}

@media screen and (max-width: 768px) {

.navbar {

flex-direction: column;

justify-content: normal;

background: var(--glass-bg);

backdrop-filter: blur(10px);

padding: 10px 32px;

height: 40px;

overflow: hidden;

}

li {

display: block;

margin: 0;

}

.brand a {

margin: 15px 0px;

}

.brand a, .nav-item {

color: var(--text-color);

}

.nav-item {

margin: 0px;

}

.nav-item:after, .nav-item:hover:after {

background: var(--text-color);

}

.navbar-toggle {

display: block;

}

.navbar[data-expanded="false"] li > .nav-item,

.navbar[data-expanded="false"] .nav-right > .nav-item {

clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);

visibility: hidden;

opacity: 0;

transition: opacity 0.16s ease 0.16s, visibility 0.01s ease 0.16s, clip-path 0.16s ease;

}

.navbar[data-expanded="true"] li > .nav-item,

.navbar[data-expanded="true"] .nav-right > .nav-item {

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

visibility: visible;

opacity: 1;

}

.navbar[data-expanded="true"] li:first-child > .nav-item {

transition: opacity 0.16s ease 0.16s, visibility 0.01s ease, clip-path 0.16s ease 0.16s;

}

.navbar[data-expanded="true"] li:nth-child(2) > .nav-item {

transition: opacity 0.16s ease 0.2s, visibility 0.01s ease, clip-path 0.16s ease 0.2s;

}

.navbar[data-expanded="true"] li:nth-child(3) > .nav-item {

transition: opacity 0.16s ease 0.24s, visibility 0.01s ease, clip-path 0.16s ease 0.24s;

}

.navbar[data-expanded="true"] li:nth-child(4) > .nav-item {

transition: opacity 0.16s ease 0.28s, visibility 0.01s ease, clip-path 0.16s ease 0.28s;

}

.navbar[data-expanded="true"] li:nth-child(5) > .nav-item {

transition: opacity 0.16s ease 0.32s, visibility 0.01s ease, clip-path 0.16s ease 0.32s;

}

.navbar[data-expanded="true"] li:nth-child(6) > .nav-item {

transition: opacity 0.16s ease 0.36s, visibility 0.01s ease, clip-path 0.16s ease 0.36s;

}

.navbar[data-expanded="true"] .nav-right > .nav-item {

transition: opacity 0.16s ease 0.4s, visibility 0.01s ease, clip-path 0.16s ease 0.4s;

}

.navbar[data-expanded="true"] {

height: 100%;

}

.navbar[data-expanded="true"] .navbar-toggle > .toggle-bar:first-child {

transform: rotate(135deg);

top: 15px;

}

.navbar[data-expanded="true"] .navbar-toggle > .toggle-bar:nth-child(2) {

opacity: 0;

}

.navbar[data-expanded="true"] .navbar-toggle > .toggle-bar:nth-child(3) {

transform: rotate(-135deg);

top: 15px;

}

/* App Container */

.App {

height: 100%;

}

.img-hidden {

display: none;

}

/* Slider */

.slider-container {

position: absolute;

width: 100vw;

height: 100vh;

display: flex;

justify-content: center;

flex-direction: column;

}

.slider-text-container {

width: 1170px;

margin: auto;

}

.slide-title {

font-size: 4.375rem;

margin: 0;

clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);

font-weight: 900;

text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

}

.title-wrap {

line-height: 4.375rem;

height: 4.375rem;

overflow: hidden;

}

.slide-number-container {

position: relative;

overflow: hidden;

height: 2.125rem;

display: block;

opacity: 0;

}

.number-wrap {

height: 2.25rem;

width: 100%;

position: relative;

}

.slide-number {

font-size: 2rem;

position: relative;

display: block;

width: 80px;

font-weight: 700;

}

.slide-number-small {

font-size: 1.25rem;

position: absolute;

top: 0px;

left: 40px;

}

.slide-title-container {

position: relative;

overflow: hidden;

height: 4.375rem;

margin: 30px 0;

}

/* Glassmorphism Info Box */

.slide-info-box {

position: absolute;

bottom: 0;

right: 0;

background: var(--glass-bg);

backdrop-filter: blur(10px);

padding: 30px 100px;

clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);

border-top: 1px solid var(--glass-border);

border-left: 1px solid var(--glass-border);

box-shadow: var(--glass-shadow);

}

.slide-info-box a {

position: relative;

color: var(--text-color-alt);

font-size: 1.5rem;

margin: 0;

font-weight: bold;

padding: 0px 0px 10px 0px;

opacity: 0;

}

.slide-info-box a:after {

content: "";

position: absolute;

bottom: 4px;

right: 0;

width: 0%;

height: 2px;

background: var(--text-color-alt);

transition: all 0.32s ease-out;

}

.slide-info-box a:hover:after {

left: 0;

width: 100%;

}

.slide-info-box h4 {

color: var(--grey);

margin-top: 15px;

opacity: 0;

}

.slide-info-container {

width: 100%;

max-width: 1170px;

margin: 0 auto;

display: inline-block;

position: relative;

opacity: 0;

}

.slide-info-text {

position: absolute;

bottom: 32px;

left: 0;

}

.slide-info-container h4 {

color: #cccccc;

}

.slide-info-wrap {

height: 1.875rem;

overflow-y: hidden;

line-height: 21px;

}

.slide-info {

margin: 0;

padding: 5px 0px;

}

/* Responsive Adjustments */

@media screen and (max-width: 1191px) {

.slide-info-container, .slider-text-container {

width: calc(100% - 64px);

}

@media screen and (max-width: 768px) {

.slide-title {

font-size: 3rem;

}

.slide-info-box {

padding: 30px 50px;

}

.slide-info-box a {

font-size: 1.25rem;

}

@media screen and (max-width: 414px) {

.slide-title {

font-size: 2.5rem;

}

.slide-info-box {

padding: 15px 25px;

}

/* Overlay */

.overlay {

display: flex;

align-items: center;

justify-content: flex-start;

width: 100%;

height: 100%;

margin: 0;

overflow: hidden;

opacity: 0;

visibility: hidden;

position: fixed;

top: 0;

left: 0;

z-index: 20;

}

.overlay-bg {

position: absolute;

background: var(--bg-color);

width: 100%;

height: 100%;

top: 0;

left: 0;

bottom: 0;

right: 0;

z-index: 0;

}

.overlay-navigation {

position: absolute;

z-index: 1;

top: 0;

left: 0;

display: flex;

justify-content: space-between;

width: calc(100% - 300px);

padding: 25px 150px;

}

.overlay-title {

color: var(--text-color-alt);

margin-block-end: 10px;

}

.overlay-sub {

color: var(--grey);

margin-block-start: 0px;

}

.overlay-close {

position: relative;

color: var(--text-color-alt);

font-weight: bold;

padding: 15px 0px 10px 0px;

margin: 0 5px;

background: none;

border: none;

cursor: pointer;

font-size: 1rem;

}

.overlay-close:after {

content: "";

position: absolute;

bottom: 4px;

right: 0;

width: 0%;

height: 2px;

background: var(--text-color-alt);

transition: all 0.32s ease-out;

}

.overlay-close:hover:after {

left: 0;

width: 100%;

}

.overlay-preview-wrap {

display: flex;

flex-direction: row;

width: 200%;

position: absolute;

padding-left: 135px;

}

.overlay-slide-container {

position: relative;

width: 100%;

height: 100%;

display: flex;

align-items: center;

width: calc(100% - 150px);

}

.overlay-nav-buttons {

display: flex;

align-items: center;

clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);

}

.overlay-nav-heading, .overlay-nav-buttons {

clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);

user-select: none;

}

.overlay-slide-preview {

position: relative;

width: 100%;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

height: 500px;

margin: 0px 15px;

clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);

cursor: pointer;

border-radius: 12px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.overlay-slide-preview:hover {

transform: translateY(-10px);

box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);

}

.overlay-slide-preview > img {

width: 100%;

height: 100%;

object-fit: cover;

cursor: pointer;

}

.overlay-preview-title {

position: absolute;

top: 45%;

left: 50%;

transform: translate(-50%, -50%);

color: var(--preview-text);

user-select: none;

text-align: center;

}

.overlay-preview-title-text {

clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);

display: inline-block;

font-size: 4em;

font-weight: 900;

text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

}

.overlay-preview-title-number {

font-size: 1.5em;

position: absolute;

bottom: 25px;

left: -60px;

opacity: 0;

font-weight: 700;

}

/* Responsive Overlay */

@media screen and (max-width: 1191px) {

.overlay-navigation {

width: calc(100% - 150px);

padding: 25px 75px;

}

.overlay-preview-wrap {

padding-left: 60px;

}

.overlay-preview-title-number {

bottom: 28px;

left: -45px;

}

@media screen and (max-width: 991px) {

.overlay-preview-title-number {

left: -40px;

}

.overlay-preview-title-text {

font-size: 3rem;

}

.overlay-preview-title-number {

bottom: 21px;

}

@media screen and (max-width: 768px) {

.overlay-preview-title-number {

left: -35px;

}

.overlay-preview-title-text {

font-size: 2.75rem;

}

.overlay-preview-title-number {

bottom: 15px;

}

@media screen and (max-width:700px) {

.overlay-preview-title-number {

display:none;

}

@media screen and (max-width: 640px) {

.overlay-preview-title-text {

font-size: 2rem;

}

@media screen and (max-width: 414px) {

.overlay-preview-title-text {

font-size: 1.5rem;

}

.overlay-navigation {

width: calc(100% - 100px);

padding: 25px 50px;

}

.overlay-preview-wrap {

padding-left: 35px;

}

@media screen and (max-height: 700px) {

.overlay-slide-preview {

height: 350px;

}

@media screen and (max-height: 600px) {

.overlay-slide-preview {

height: 300px;

margin:0px 5px;

}

/* Preloader */

.preloader {

width: 100vw;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: var(--bg-color);

z-index: 30;

position: fixed;

bottom: 0;

top: 0;

left: 0;

right: 0;

}

.box {

height: 40px;

position: relative;

padding: 15px;

}

.box-clip {

clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);

}

.box-clip, .box-clip2 {

background: var(--bg-color);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border: 1;

}

.box-clip2 {

background: var(--text-color-alt);

clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);

}

.preloader p {

font-size: 2rem;

margin: 0;

color: var(--text-color-alt);

}

/* Slider Controls */

.slider-controls {

position: relative;

opacity: 0;

display: flex;

align-items: center;

margin-top: 30px;

}

button {

background: none;

border: none;

cursor: pointer;

padding: 0px;

}

.slide-prev-btn, .slide-next-btn {

position: relative;

width: 30px;

height: 20px;

}

.slide-prev-btn {

margin: 0px 10px 0px 0px;

}

.slide-next-btn {

margin: 0px 10px;

}

.slide-prev-btn:before, .slide-next-btn:before,

.slide-prev-btn:after, .slide-next-btn:after {

position: absolute;

content: "";

}

.slide-prev-btn:before, .slide-next-btn:before {

width: 10px;

height: 10px;

border-style: solid;

border-color: #fff;

border-right: 2px;

border-bottom: 2px;

border-radius: 2px;

background: transparent;

top: 5px;

}

.slide-prev-btn:before {

left: 0px;

transform: rotate(-45deg);

}

.slide-next-btn:before {

right: 0px;

transform: rotate(135deg);

}

.slide-prev-btn:after, .slide-next-btn:after {

width: 30px;

height: 3px;

background: #fff;

left: 0;

}

.slide-overlay-btn {

position: relative;

width: 20px;

height: 20px;

margin-left: 10px;

}

.slide-overlay-btn:after, .slide-overlay-btn:before {

position: absolute;

content: "";

width: 8px;

height: 18px;

top: 2px;

left: 0;

background: linear-gradient(

#fff 0%,

#fff 42%,

transparent 43%,

transparent 53%,

#fff 54%,

#fff 100%

);

}

.slide-overlay-btn:after {

left: 10px;

}

.slide-footer-text {

display: block;

}

.slide-image {

position: fixed;

width: 100%;

height: 100%;

z-index: -1;

top: 0;

left: 0;

bottom: 0;

right: 0;

object-fit: cover;

}

/* Theme Toggle */

.theme-toggle {

position: relative;

z-index: 100;

width: 32px;

height: 20px;

background: var(--text-color-alt);

border-radius: 10px;

margin: 5px 10px 2px 5px;

cursor: pointer;

border: none;

}

.theme-toggle span {

position: absolute;

background: var(--bg-color);

width: 12px;

height: 12px;

border-radius: 50%;

top: 4px;

left: 4px;

transition: all 0.3s ease;

}

</style>

</head>

<body>

const { useRef, useState, useEffect, createRef, forwardRef, Component } = React;

// Animasyon fonksiyonları

const onloadAnimation = (controls) => {

const tl = gsap.timeline();

tl.fromTo(".slide-number-container", { x: "3%" }, { opacity: 1, x: 0, duration: 0.32 }, "in+=0.56")

.fromTo(".slide-title", { y: "200%" }, { y: 0, duration: 0.64 }, "in")

.to(".slide-info-container", { opacity: 1 }, "in+=0.64")

.to(".slide-info-box", { "clip-path": "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)" }, "in+=0.64")

.to(".slide-info-box a", { opacity: 1 }, "in+=0.82")

.to(".slide-info-box h4", { opacity: 1 }, "in+=0.82")

.to(controls, { opacity: 1, duration: 0.32 }, "in+=0.64");

};

const animateSlide = (titleWrap, numberWrap, setSlidingState, wrapTransform) => {

const tl = gsap.timeline();

tl.to(".slide-title", { "clip-path": "polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%)", duration: 0.32 }, "in")

.to(titleWrap, { y: wrapTransform, duration: 0.44, ease: "power2" }, "in+=0.32")

.to(numberWrap, { y: wrapTransform, duration: 0.4, ease: "power2" }, "in+=0.32")

.to(".slide-number", { opacity: 0, duration: 0.32 }, "in")

.set(".slide-number", { opacity: 1 }, "in+=0.32")

.to(".slide-title", { "clip-path": "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)", duration: 0.64 })

.to(".slide-info", { y: wrapTransform, duration: 0.32, ease: "power2" }, "in+=0.32")

.to(".slide-info", { opacity: 0, duration: 0.32 }, "in")

.to(".slide-info", { opacity: 1, duration: 0.32 }, "in+=0.32")

.add(setSlidingState, 1.1);

};

const animateSliderOut = () => {

const tl = gsap.timeline();

tl.to(".slide-title", { "clip-path": "polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%)", duration: 0.4 }, "out")

.to(".slide-number", { y: "+=100%" }, "out")

.fromTo(".slide-number", { "clip-path": "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)" },

{ "clip-path": "polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%)", duration: 0.08 }, "out")

.to(".slide-info-box", { opacity: 0 }, "out");

};

const animateOverlayIn = (overlay, navbar, setExpandingState) => {

const tl = gsap.timeline({ delay: 0.4 });

tl.to(navbar, { y: "-100%" }, "in")

.to(overlay, { autoAlpha: 1 }, "in+=0.08")

.fromTo(".overlay-nav-heading", { "clip-path": "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" },

{ "clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 0.48, ease: "power1.inOut" }, "in")

.fromTo(".overlay-nav-buttons", { "clip-path": "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" },

{ "clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 0.48, ease: "power1.inOut" }, "in")

.fromTo(".overlay-slide-preview", { "clip-path": "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" },

{ "clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", stagger: 0.32, duration: 0.8, ease: "expo.inOut" }, "in+=0.1")

.fromTo(".overlay-preview-title-text", { "clip-path": "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)" },

{ "clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", stagger: 0.32, duration: 0.56, ease: "sine" }, "in+=0.48")

.fromTo(".overlay-preview-title-number", { opacity: 0 },

{ opacity: 1, stagger: 0.32, duration: 0.48 }, "in+=0.48")

.add(setExpandingState, 1);

};

const animateOverlayOut = (overlay, navbar, callback) => {

const tl = gsap.timeline({

onComplete: () => {

gsap.set(overlay, { visibility: "hidden" });

}

});

tl.to(".slide-title", { "clip-path": "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)", duration: 0.64 }, "in+=0.32")

.to(".slide-info-box", { opacity: 1 }, "in+=0.32")

.to(".slide-number", { "clip-path": "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)", y: "-=100%" }, "in+=0.32")

.to(overlay, { opacity: 0 }, "in")

.to(navbar, { y: 0, duration: 0.64 }, "in")

.add(callback, 0.96);

};

const animateImg = (overlay, callback, navbar) => {

const tl = gsap.timeline({

defaults: { duration: 0.4 },

onComplete: () => {

gsap.set(".overlay-preview-wrap", { clearProps: "width,x,padding" });

gsap.set(".overlay-slide-preview", { clearProps: "margin,width,height" });

gsap.set(".overlay-slide-container", { clearProps: "padding-left,height,overflow,width" });

gsap.set(".overlay-slide-container", { clearProps: "height,overflow,width" });

gsap.set(".overlay-preview-title-text", { clearProps: "clip-path,y" });

gsap.set(".overlay-preview-title-number", { clearProps: "opacity" });

}

});

tl.set(".overlay-slide-container", { width: "100%" }, "animate")

.to(".overlay-slide-container", { height: "100%", overflow: "hidden", width: "100%" }, "animate")

.to(".overlay-slide-preview", { margin: "0", width: "100vw", height: "100vh" }, "animate")

.to(".overlay-preview-title-text", { "clip-path": "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)", duration: 0.24 }, "animate")

.to(".overlay-preview-title-number", { opacity: 0, duration: 0.24 }, "animate")

.to(overlay, { opacity: 0, onComplete: () => { gsap.set(overlay, { visibility: "hidden" }); } }, "animate+=0.32")

.add(callback, 0.72)

.fromTo(".slide-title", { "clip-path": "polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%)" },

{ "clip-path": "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)", duration: 0.64 }, 0.48)

.fromTo(".slide-number", { "clip-path": "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)" },

{ "clip-path": "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)", y: "-=100%" }, 0.48)

.to(".slide-info-box", { opacity: 1 }, 0.48)

.to(navbar, { y: 0 }, 0.4);

};

const animatePreview = (x, slideCount, numberTransform) => {

const tl = gsap.timeline({ defaults: { duration: 0.4 } });

tl.to(".overlay-preview-wrap", { "padding-left": "0px", x: x, width: "400%" })

.set(".slider-container", { background: `url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') center center / cover` })

.set(".number-wrap", { y: numberTransform })

.set(".title-wrap", { y: numberTransform })

.set(".slide-info", { y: numberTransform });

};

// Bileşenler

const SlidePreview = forwardRef((props, ref) => {

return React.createElement("div", {

className: "overlay-slide-preview",

style: props.styles,

onClick: props.click,

ref: ref,

id: props.id

},

React.createElement("h4", { className: "overlay-preview-title" },

React.createElement("span", { className: "overlay-preview-title-number" }, props.number),

React.createElement("span", { className: "overlay-preview-title-text" }, props.category)

)

);

});

const Toggle = () => {

const toggleTheme = () => {

const root = document.documentElement;

const currentTheme = root.getAttribute('data-theme');

const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

root.setAttribute('data-theme', newTheme);

localStorage.setItem('theme', newTheme);

gsap.to(".theme-toggle span", { x: newTheme === 'dark' ? 12 : 0, duration: 0.24 });

};

useEffect(() => {

const savedTheme = localStorage.getItem('theme') || 'light';

document.documentElement.setAttribute('data-theme', savedTheme);

gsap.set(".theme-toggle span", { x: savedTheme === 'dark' ? 12 : 0 });

}, []);

return React.createElement("button", {

role: "switch",

"aria-checked": "true",

className: "theme-toggle",

onClick: toggleTheme

},

React.createElement("span", null)

);

};

const Overlay = forwardRef((props, ref) => {

const [images] = useState([

{ id: "1", category: "Doğa.", number: "01." },

{ id: "2", category: "Ofis.", number: "02." },

{ id: "3", category: "Mimari.", number: "03." },

{ id: "4", category: "Kişiselleştirme.", number: "04." }

]);

const slideRef = useRef([]);

useEffect(() => {

new Draggable(".overlay-preview-wrap", {

type: "x",

bounds: ".overlay-slide-container",

dragResistance: 0.55,

inertia: true,

throwResistance: 3500,

onDrag: () => {

gsap.set(".overlay-slide-preview", { cursor: "grabbing" });

},

onDragEnd: () => {

gsap.set(".overlay-slide-preview", { cursor: "pointer" });

}

});

}, []);

const slides = images.map(item => {

return React.createElement(SlidePreview, {

key: item.id,

styles: {

background: `url(https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80) center center / cover`

},

id: `preview-${item.id}`,

click: props.imgClick,

number: item.number,

category: item.category,

ref: slide => slideRef.current[item.id] = slide

});

return React.createElement(React.Fragment, null,

React.createElement("div", { ref: ref, className: "overlay" },

React.createElement("div", { className: "overlay-bg" }),

React.createElement("div", { className: "overlay-navigation" },

React.createElement("div", { className: "overlay-nav-heading" },

React.createElement("h3", { className: "overlay-title" }, "Amacınızı Seçin"),

React.createElement("h4", { className: "overlay-sub" }, "Seçmek için sürükleyip tıklayabilirsiniz")

),

React.createElement("nav", { className: "overlay-nav-buttons" },

React.createElement(Toggle, null),

React.createElement("button", { className: "overlay-close", onClick: props.close }, "Kapat")

)

),

React.createElement("div", { className: "overlay-slide-container" },

React.createElement("div", { className: "overlay-preview-wrap" }, slides)

)

);

});

const Preloader = forwardRef((props, ref) => {

const boxRef = useRef();

const box2Ref = useRef();

const textRef = useRef();

useEffect(() => {

const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.2 });

tl.to(textRef.current, { opacity: 0, duration: 0.4 }, "o")

.to(boxRef.current, { "clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 0.4 }, "o")

.to(boxRef.current, { "clip-path": "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)", duration: 0.4 })

.to(textRef.current, { opacity: 1, duration: 0.4 }, "n")

.to(box2Ref.current, { "clip-path": "polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%)", duration: 0.4 }, "n")

.to(box2Ref.current, { "clip-path": "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)", duration: 0.4 }, "m");

}, []);

return React.createElement("div", { className: "preloader", ref: ref },

React.createElement("div", { className: "box" },

React.createElement("p", { ref: textRef }, "Yükleniyor..."),

React.createElement("div", { className: "box-clip", ref: boxRef }),

React.createElement("div", { className: "box-clip2", ref: box2Ref })

)

);

});

const Navbar = forwardRef((props, ref) => {

const toggleNav = () => {

const navbar = ref.current;

const isExpanded = navbar.dataset.expanded === "true";

navbar.dataset.expanded = !isExpanded;

if (!isExpanded) {

gsap.fromTo(navbar, { height: "40px" }, { height: "100%", duration: 0.40 });

} else {

gsap.to(navbar, { height: "40px", duration: 0.40 });

}

};

return React.createElement("header", null,

React.createElement("nav", {

className: "navbar",

ref: ref,

"data-theme": "light",

"data-expanded": "false"

},

React.createElement("button", {

className: "navbar-toggle",

type: "button",

"aria-expanded": "false",

"aria-label": "Toggle navigation",

onClick: toggleNav

},

React.createElement("span", { className: "toggle-bar" }),

React.createElement("span", { className: "toggle-bar" })

),

React.createElement("div", { className: "brand" },

React.createElement("a", { href: "/" }, "ARK SHELTER")

),

React.createElement("div", { className: "nav-center" },

React.createElement("ul", null,

React.createElement("li", null, React.createElement("a", { className: "nav-item", href: "#" }, "Ana Sayfa")),

React.createElement("li", null, React.createElement("a", { className: "nav-item", href: "#" }, "Doğa")),

React.createElement("li", null, React.createElement("a", { className: "nav-item", href: "#" }, "Ofisler")),

React.createElement("li", null, React.createElement("a", { className: "nav-item", href: "#" }, "Mimari")),

React.createElement("li", null, React.createElement("a", { className: "nav-item", href: "#" }, "Kişiselleştirme")),

React.createElement("li", null, React.createElement("a", { className: "nav-item", href: "#" }, "Hakkımızda"))

)

),

React.createElement("div", { className: "nav-right" },

React.createElement("a", { className: "nav-item", href: "/#" }, "İletişim")

)

);

});

const SliderControls = forwardRef((props, ref) => {

return React.createElement("div", { className: "slider-controls", ref: ref },

React.createElement("button", { className: "slide-prev-btn", onClick: props.prev }),

React.createElement("button", { className: "slide-next-btn", onClick: props.next }),

React.createElement("button", { onClick: props.expand, className: "slide-overlay-btn" })

);

});

class App extends Component {

constructor(props) {

super(props);

this.state = {

slides: [

{

id: "1",

title: "Doğaya dönüş.",

slideNumber: "01",

text: "Doğayı keşfedin.",

image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"

},

{

id: "2",

title: "Ofiste rahatlayın.",

slideNumber: "02",

text: "Ofisinize adım atın.",

image: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"

},

{

id: "3",

title: "Hayallerden gerçeğe.",

slideNumber: "03",

text: "Büyük düşünün ya da eve gidin.",

image: "https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"

},

{

id: "4",

title: "Bir dilek tutun.",

slideNumber: "04",

text: "Sınırları zorlayın.",

image: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"

}

],

isExpanded: false,

slideCount: 1,

isSliding: false,

isExpanding: false,

isShrinking: false,

imgsLoaded: 0,

isLoaded: false

};

this.titleWrapRef = createRef();

this.numberWrapRef = createRef();

this.navbar = createRef();

this.overlay = createRef();

this.sliderContainer = createRef();

this.controlsRef = createRef();

this.preloaderRef = createRef();

this.imageRef = createRef();

}

loadImages = () => {

this.setState(prevState => ({

imgsLoaded: prevState.imgsLoaded + 1

}));

if (this.state.imgsLoaded === 3) {

gsap.to(this.preloaderRef.current, {

y: "-100%",

duration: 1,

onStart: () => {

onloadAnimation(this.controlsRef.current);

},

onComplete: () => {

gsap.set(this.preloaderRef.current, { display: "none" });

this.setState({ isLoaded: true });

}

});

}

};

expand = () => {

if (!this.state.isExpanded && !this.state.isExpanding && !this.state.isSliding) {

this.setState({ isExpanding: true }, () => {

animateSliderOut();

animateOverlayIn(this.overlay.current, this.navbar.current, () => {

this.setState({ isExpanding: false, isExpanded: true });

});

}

if (this.state.isExpanded && !this.state.isExpanding && !this.state.isSliding) {

this.setState({ isExpanding: true }, () => {

animateOverlayOut(this.overlay.current, this.navbar.current, () => {

this.setState({ isExpanding: false, isExpanded: false });

});

}

};

prevSlide = () => {

if (this.state.slideCount >= 2 && !this.state.isSliding) {

this.setState(

prevState => ({

slideCount: prevState.slideCount - 1,

isSliding: true

}),

() => {

gsap.set(this.sliderContainer.current, {

background: `url(${this.state.slides[this.state.slideCount - 1].image}) center center / cover`

});

animateSlide(

this.titleWrapRef.current,

this.numberWrapRef.current,

() => this.setState({ isSliding: false }),

"+=100%"

);

}

);

}

};

nextSlide = () => {

if (this.state.slideCount <= 3 && !this.state.isSliding) {

this.setState(

prevState => ({

slideCount: prevState.slideCount + 1,

isSliding: true

}),

() => {

gsap.set(this.sliderContainer.current, {

background: `url(${this.state.slides[this.state.slideCount - 1].image}) center center / cover`

});

animateSlide(

this.titleWrapRef.current,

this.numberWrapRef.current,

() => this.setState({ isSliding: false }),

"-=100%"

);

}

);

}

};

animateImgClick = (e) => {

if (!this.state.isShrinking) {

this.setState({ isShrinking: true }, () =>

animateImg(

this.overlay.current,

() =>

this.setState({

isExpanded: !this.state.isExpanded,

isShrinking: false

}),

this.navbar.current

)

);

if (e.currentTarget.id === "preview-1") {

this.setState({ slideCount: 1 }, () => animatePreview(0, 1, "0%"));

}

if (e.currentTarget.id === "preview-2") {

this.setState({ slideCount: 2 }, () => animatePreview("-25%", 2, "-100%"));

}

if (e.currentTarget.id === "preview-3") {

this.setState({ slideCount: 3 }, () => animatePreview("-50%", 3, "-200%"));

}

if (e.currentTarget.id === "preview-4") {

this.setState({ slideCount: 4 }, () => animatePreview("-75%", 4, "-300%"));

}

};

render() {

const slideNumbers = this.state.slides.map(item => {

return React.createElement("span", { className: "slide-number", key: item.id }, item.slideNumber);

});

const slideTitles = this.state.slides.map(item => {

return React.createElement("h1", { className: "slide-title", key: item.id }, item.title);

});

const slideText = this.state.slides.map(item => {

return React.createElement("h3", { className: "slide-info", key: item.id }, item.text);

});

const images = this.state.slides.map(item => {

return React.createElement("img", {

className: "img-hidden",

src: item.image,

key: item.id,

ref: img => this.imageRef = img,

onLoad: this.loadImages,

alt: ""

});

return React.createElement("div", { className: "App" },

!this.state.isLoaded ? React.createElement(Preloader, { ref: this.preloaderRef }) : null,

React.createElement(Navbar, { ref: this.navbar }),

images,

React.createElement("div", {

className: "slider-container",

ref: this.sliderContainer,

style: {

background: `url(${this.state.slides[this.state.slideCount - 1].image}) center center / cover`

}

},

React.createElement("div", { className: "slider-text-container" },

React.createElement("div", { className: "slide-number-container" },

React.createElement("div", { className: "number-wrap", ref: this.numberWrapRef }, slideNumbers),

React.createElement("span", { className: "slide-number-small" }, "/ 04")

),

React.createElement("div", { className: "slide-title-container" },

React.createElement("div", { className: "title-wrap", ref: this.titleWrapRef }, slideTitles)

),

React.createElement(SliderControls, {

prev: this.prevSlide,

next: this.nextSlide,

expand: this.expand,

ref: this.controlsRef

})

),

React.createElement("div", { className: "slide-info-container" },

React.createElement("div", { className: "slide-info-text" },

React.createElement("div", { className: "slide-info-wrap" }, slideText),

React.createElement("h4", null, "Daha fazlası için kaydırın")

)

),

React.createElement("div", { className: "slide-info-box" },

React.createElement("a", { href: "/#" }, "Daha fazla bilgi ve fiyatlar?"),

React.createElement("h4", null, "Broşürümüzü hemen indirin")

)

),

React.createElement(Overlay, {

close: this.expand,

ref: this.overlay,

imgClick: e => this.animateImgClick(e)

})

);

}

ReactDOM.render(React.createElement(App, null), document.getElementById("app"));

</script>

</body>

</html>

Metehan

A Code by Metehan

A Code by Metehan

HTML

CSS

JS

A Code by Metehan

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS