-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprojec.html
113 lines (98 loc) · 3.99 KB
/
projec.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> About- Aniruddha khedekar | Portfolio by UK</title>
<meta name="author" content="UDBHV @studio_21:4281:22">
<!-- stylesheet -->
<link rel="stylesheet" href="css/styles.css" />
<!-- greensock -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<!-- locomotive-scroll -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
</head>
<body id="js-scroll">
<div class="wrapper">
<!-- menu -->
<nav class="menu">
<div class="menu__logo">
<a href="index.html">AK</a>
</div>
<div class="menu__items">
<div class="menu__items-link"><a href="index.html">Projects</a></div>
<div class="menu__items-link"><a href="about.html">About</a></div>
</div>
</nav>
<!-- project section -->
<div class="project__container" data-scroll-section>
<div class="project__container-title" data-scroll>
<h1 class="anime-js-title">Creative mix</h1>
</div>
<div class="project__container-subtitle" data-scroll>
<p>Visual design</p>
</div>
<div class="project__container-images">
<div class="project__image project__image-one" data-scroll data-scroll-speed="1">
</div>
<div class="project__image project__image-two" data-scroll data-scroll-speed="4">
</div>
<div class="project__image project__image-three" data-scrol data-scroll-speed="2">
</div>
<div class="project__image project__image-four" data-scroll data-scroll-speed="4">
</div>
<div class="project__image project__image-five" data-scroll data-scroll-speed="5" >
</div>
<div class="project__image project__image-six" data-scrol data-scroll-speed="" >
</div>
<div class="project__image project__image-seven" >
</div>
<div class="project__image project__image-eight" >
</div>
<div class="project__image project__image-nine" >
</div>
<div class="project__image project__image-ten" >
</div>
</div>
<div class="project-next-link" data-scroll>
<a href="project.html">Next</a>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
// smooth scroll
const scroll = new LocomotiveScroll({
el: document.querySelector('#js-scroll'),
smooth: true,
smoothMobile: true,
inertia: 0.75
});
// project title animation
var textWrapper = document.querySelector('.anime-js-title');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline()
.add({
targets: '.anime-js-title .letter',
translateY: [60, 0],
translateZ: 0,
opacity: [0, 1],
easing: "easeOutExpo",
duration: 1200,
delay: (el, i) => 600 + 30 * i
});
// project subtitle animation
TweenMax.from(".project__container-subtitle", 2, {
y: 10,
opacity: 0,
ease: Expo.easeInOut
});
// project image fade
TweenMax.from(".project__image-one", 2, {
opacity: 0,
ease: Expo.easeInOut
});
</script>
</body>
</html>