Skip to content

Commit f19eed5

Browse files
persephonepunchpersephonepunch
committed
new files
0 parents  commit f19eed5

File tree

82 files changed

+2434
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+2434
-0
lines changed

‎.DS_Store

8 KB
Binary file not shown.

‎app.js

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
function init() {
2+
const slides = document.querySelectorAll(".slide");
3+
const pages = document.querySelectorAll(".page");
4+
const backgrounds = [
5+
`radial-gradient(#2B3760, #0B1023)`,
6+
`radial-gradient(#4E3022, #161616)`,
7+
`radial-gradient(#4E4342, #161616)`,
8+
`radial-gradient(#222222, #161616)`
9+
];
10+
//Tracker
11+
let current = 0;
12+
let scrollSlide = 0;
13+
14+
slides.forEach((slide, index) => {
15+
slide.addEventListener("click", function() {
16+
changeDots(this);
17+
nextSlide(index);
18+
scrollSlide = index;
19+
});
20+
});
21+
22+
function changeDots(dot) {
23+
slides.forEach(slide => {
24+
slide.classList.remove("active");
25+
});
26+
dot.classList.add("active");
27+
}
28+
29+
function nextSlide(pageNumber) {
30+
const nextPage = pages[pageNumber];
31+
const currentPage = pages[current];
32+
const nextLeft = nextPage.querySelector(".hero .model-left");
33+
const nextRight = nextPage.querySelector(".hero .model-right");
34+
const currentLeft = currentPage.querySelector(".hero .model-left");
35+
const currentRight = currentPage.querySelector(".hero .model-right");
36+
const nextText = nextPage.querySelector(".details");
37+
const portofolio = document.querySelector(".portofolio");
38+
39+
const tl = new TimelineMax({
40+
onStart: function() {
41+
slides.forEach(slide => {
42+
slide.style.pointerEvents = "none";
43+
});
44+
},
45+
onComplete: function() {
46+
slides.forEach(slide => {
47+
slide.style.pointerEvents = "all";
48+
});
49+
}
50+
});
51+
52+
tl.fromTo(currentLeft, 0.4, { y: "-10%" }, { y: "-100%" })
53+
.fromTo(currentRight, 0.4, { y: "10%" }, { y: "-100%" }, "-=0.2")
54+
.to(portofolio, 0.4, { backgroundImage: backgrounds[pageNumber] })
55+
.fromTo(
56+
currentPage,
57+
0.4,
58+
{ opacity: 1, pointerEvents: "all" },
59+
{ opacity: 0, pointerEvents: "none" }
60+
)
61+
.fromTo(
62+
nextPage,
63+
0.4,
64+
{ opacity: 0, pointerEvents: "none" },
65+
{ opacity: 1, pointerEvents: "all" },
66+
"-=0.6"
67+
)
68+
.fromTo(nextLeft, 0.1, { y: "-100%" }, { y: "-10%" }, "-=0.6")
69+
.fromTo(nextRight, 0.1, { y: "-100%" }, { y: "10%" }, "-=0.8")
70+
.fromTo(nextText, 0.1, { opacity: 0, y: 0 }, { opacity: 1, y: 0 })
71+
.set(nextLeft, { clearProps: "all" })
72+
.set(nextRight, { clearProps: "all" });
73+
74+
current = pageNumber;
75+
}
76+
77+
//OPTIONAL
78+
document.addEventListener("wheel", throttle(scrollChange, 1500));
79+
document.addEventListener("touchmove", throttle(scrollChange, 1500));
80+
81+
function switchDots(dotNumber) {
82+
const activeDot = document.querySelectorAll(".slide")[dotNumber];
83+
slides.forEach(slide => {
84+
slide.classList.remove("active");
85+
});
86+
activeDot.classList.add("active");
87+
}
88+
89+
function scrollChange(e) {
90+
if (e.deltaY > 0) {
91+
scrollSlide += 1;
92+
} else {
93+
scrollSlide -= 1;
94+
}
95+
96+
if (scrollSlide > 3) {
97+
scrollSlide = 0;
98+
}
99+
if (scrollSlide < 0) {
100+
scrollSlide = 3;
101+
}
102+
switchDots(scrollSlide);
103+
nextSlide(scrollSlide);
104+
console.log(scrollSlide);
105+
}
106+
107+
const hamburger = document.querySelector(".menu");
108+
const hamburgerLines = document.querySelectorAll(".menu line");
109+
const navOpen = document.querySelector(".nav-open");
110+
const contact = document.querySelector(".contact");
111+
const social = document.querySelector(".social");
112+
const logo = document.querySelector(".logo");
113+
114+
const tl = new TimelineMax({ paused: true, reversed: true });
115+
116+
tl.to(navOpen, 0.5, { y: 0 })
117+
.fromTo(contact, 0.5, { opacity: 0, y: 10 }, { opacity: 1, y: 0 }, "-=0.1")
118+
.fromTo(social, 0.5, { opacity: 0, y: 10 }, { opacity: 1, y: 0 }, "-=0.5")
119+
.fromTo(logo, 0.2, { color: "white" }, { color: "black" }, "-=1")
120+
.fromTo(
121+
hamburgerLines,
122+
0.2,
123+
{ stroke: "white" },
124+
{ stroke: "black" },
125+
"-=1"
126+
);
127+
128+
hamburger.addEventListener("click", () => {
129+
tl.reversed() ? tl.play() : tl.reverse();
130+
});
131+
}
132+
133+
function throttle(func, limit) {
134+
let inThrottle;
135+
return function() {
136+
const args = arguments;
137+
const context = this;
138+
if (!inThrottle) {
139+
func.apply(context, args);
140+
inThrottle = true;
141+
setTimeout(() => (inThrottle = false), limit);
142+
}
143+
};
144+
}
145+
146+
init();

‎app2.js

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
function init() {
2+
const slides = document.querySelectorAll(".slide");
3+
const pages = document.querySelectorAll(".page");
4+
const backgrounds = [
5+
`radial-gradient(#2B3760, #0B1023)`,
6+
`radial-gradient(#4E3022, #161616)`,
7+
`radial-gradient(#4E4342, #161616)`,
8+
`radial-gradient(#222222, #161616)`
9+
];
10+
//Tracker
11+
let current = 0;
12+
let scrollSlide = 0;
13+
14+
slides.forEach((slide, index) => {
15+
slide.addEventListener("click", function() {
16+
changeDots(this);
17+
nextSlide(index);
18+
scrollSlide = index;
19+
});
20+
});
21+
22+
function changeDots(dot) {
23+
slides.forEach(slide => {
24+
slide.classList.remove("active");
25+
});
26+
dot.classList.add("active");
27+
}
28+
29+
function nextSlide(pageNumber) {
30+
const nextPage = pages[pageNumber];
31+
const currentPage = pages[current];
32+
const nextLeft = nextPage.querySelector(".hero .model-left");
33+
const nextRight = nextPage.querySelector(".hero .model-right");
34+
const currentLeft = currentPage.querySelector(".hero .model-left");
35+
const currentRight = currentPage.querySelector(".hero .model-right");
36+
const nextText = nextPage.querySelector(".details");
37+
const portofolio = document.querySelector(".portofolio");
38+
39+
const tl = new TimelineMax({
40+
onStart: function() {
41+
slides.forEach(slide => {
42+
slide.style.pointerEvents = "none";
43+
});
44+
},
45+
onComplete: function() {
46+
slides.forEach(slide => {
47+
slide.style.pointerEvents = "all";
48+
});
49+
}
50+
});
51+
52+
tl.fromTo(currentLeft, 0.4, { y: "-10%" }, { y: "-100%" })
53+
.fromTo(currentRight, 0.4, { y: "10%" }, { y: "-100%" }, "-=0.2")
54+
.to(portofolio, 0.4, { backgroundImage: backgrounds[pageNumber] })
55+
.fromTo(
56+
currentPage,
57+
0.4,
58+
{ opacity: 1, pointerEvents: "all" },
59+
{ opacity: 0, pointerEvents: "none" }
60+
)
61+
.fromTo(
62+
nextPage,
63+
0.4,
64+
{ opacity: 0, pointerEvents: "none" },
65+
{ opacity: 1, pointerEvents: "all" },
66+
"-=0.6"
67+
)
68+
.fromTo(nextLeft, 0.3, { y: "-100%" }, { y: "-10%" }, "-=0.6")
69+
.fromTo(nextRight, 0.3, { y: "-100%" }, { y: "10%" }, "-=0.8")
70+
.fromTo(nextText, 0.3, { opacity: 0, y: 0 }, { opacity: 1, y: 0 })
71+
.set(nextLeft, { clearProps: "all" })
72+
.set(nextRight, { clearProps: "all" });
73+
74+
current = pageNumber;
75+
}
76+
77+
//OPTIONAL
78+
document.addEventListener("wheel", throttle(scrollChange, 1500));
79+
document.addEventListener("touchmove", throttle(scrollChange, 1500));
80+
81+
function switchDots(dotNumber) {
82+
const activeDot = document.querySelectorAll(".slide")[dotNumber];
83+
slides.forEach(slide => {
84+
slide.classList.remove("active");
85+
});
86+
activeDot.classList.add("active");
87+
}
88+
89+
function scrollChange(e) {
90+
if (e.deltaY > 0) {
91+
scrollSlide += 1;
92+
} else {
93+
scrollSlide -= 1;
94+
}
95+
96+
if (scrollSlide > 2) {
97+
scrollSlide = 0;
98+
}
99+
if (scrollSlide < 0) {
100+
scrollSlide = 2;
101+
}
102+
switchDots(scrollSlide);
103+
nextSlide(scrollSlide);
104+
console.log(scrollSlide);
105+
}
106+
107+
const hamburger = document.querySelector(".menu");
108+
const hamburgerLines = document.querySelectorAll(".menu line");
109+
const navOpen = document.querySelector(".nav-open");
110+
const contact = document.querySelector(".contact");
111+
const social = document.querySelector(".social");
112+
const logo = document.querySelector(".logo");
113+
114+
const tl = new TimelineMax({ paused: true, reversed: true });
115+
116+
tl.to(navOpen, 0.5, { y: 0 })
117+
.fromTo(contact, 0.5, { opacity: 0, y: 10 }, { opacity: 1, y: 0 }, "-=0.1")
118+
.fromTo(social, 0.5, { opacity: 0, y: 10 }, { opacity: 1, y: 0 }, "-=0.5")
119+
.fromTo(logo, 0.2, { color: "white" }, { color: "black" }, "-=1")
120+
.fromTo(
121+
hamburgerLines,
122+
0.2,
123+
{ stroke: "white" },
124+
{ stroke: "black" },
125+
"-=1"
126+
);
127+
128+
hamburger.addEventListener("click", () => {
129+
tl.reversed() ? tl.play() : tl.reverse();
130+
});
131+
}
132+
133+
function throttle(func, limit) {
134+
let inThrottle;
135+
return function() {
136+
const args = arguments;
137+
const context = this;
138+
if (!inThrottle) {
139+
func.apply(context, args);
140+
inThrottle = true;
141+
setTimeout(() => (inThrottle = false), limit);
142+
}
143+
};
144+
}
145+
146+
init();

‎barber.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="../style.css" />
8+
<title>John Mayer</title>
9+
</head>
10+
<body>
11+
<main>
12+
<div class="banner">
13+
<img src="./img/barber-bg.jpg" alt="photo" />
14+
<div class="author">
15+
<h1>John Mayer</h1>
16+
<h3>Pro Hairstyleist</h3>
17+
</div>
18+
</div>
19+
<div class="story">
20+
<div class="story-description">
21+
<h3>My Story</h3>
22+
<p>
23+
Lorem Ipsum is simply dummy text of the printing and typesetting
24+
industry. Lorem Ipsum has been the industry's standard dummy text
25+
ever since the 1500s, when an unknown printer took a galley of type
26+
and scrambled it to make a type specimen book. It has survived not
27+
only five centuries, but also the leap into electronic typesetting,
28+
</p>
29+
<p>
30+
remaining essentially unchanged. It was popularised in the 1960s
31+
with the release of Letraset sheets containing Lorem Ipsum passages,
32+
and more recently with desktop publishing software like Aldus
33+
PageMaker including versions of Lorem Ipsum
34+
</p>
35+
</div>
36+
<div class="profile">
37+
<img src="./img/barber-profile.jpg" alt="" />
38+
</div>
39+
</div>
40+
<div class="my-work">
41+
<div class="work-description">
42+
<h3>My Work</h3>
43+
<p>
44+
Lorem Ipsum is simply dummy text of the printing and typesetting
45+
industry. Lorem Ipsum has been the industry's standard dummy text
46+
ever since the 1500s, when an unknown printer took a galley of type
47+
and scrambled it to make a type specimen book. It has survived not
48+
only five centuries, but also the leap into electronic typesetting,
49+
</p>
50+
<p>
51+
Lorem Ipsum is simply dummy text of the printing and typesetting
52+
industry.
53+
</p>
54+
</div>
55+
<div class="work-gallery">
56+
<img src="./img/barber-gallery-1.jpg" alt="" />
57+
<img src="./img/barber-gallery-2.jpg" alt="" />
58+
<img src="./img/barber-gallery-3.jpg" alt="" />
59+
<img src="./img/barber-gallery-4.jpg" alt="" />
60+
<img src="./img/barber-gallery-5.jpg" alt="" />
61+
<img src="./img/barber-gallery-6.jpg" alt="" />
62+
</div>
63+
</div>
64+
</main>
65+
</body>
66+
</html>

0 commit comments

Comments
 (0)