Skip to content

Commit db31120

Browse files
iamwatchdogsiamwatchdogs
authored
PR#27
Fixes Merge pull request #27 from Sisir2311/fixes
2 parents 64c1d81 + 039e694 commit db31120

22 files changed

+2328
-6
lines changed

‎Anim-web/index.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
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+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div id="main">
11+
<div id="cursor">
12+
</div>
13+
<!-- <div id="big-curs">
14+
15+
</div> -->
16+
17+
<div id="page1">
18+
<video autoplay muted loop playsinline poster="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/video-bg.jpg?strip=all&lossy=1&sharp=1&ssl=1">
19+
<source src="https://sidcupfamilygolf.com/wp-content/uploads/2023/02/hero.mp4" type="video/mp4">
20+
</video>
21+
<div id="nav">
22+
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/logo-white.svg">
23+
<h3>TOPTRACER RANGE</h3>
24+
<h3>GOLF LESSONS</h3>
25+
<h3>ADVENTURE GOLF</h3>
26+
<h3>CAFÉ</h3>
27+
<h3>EVENTS</h3>
28+
</div>
29+
<button class="btn"><span>BOOK NOW!</span></button>
30+
<div id="page1-a">
31+
<h1>EAT. DRINK. PLAY.</h1>
32+
<h3>WELCOME TO SIDCUP FAMILY GOLF!</h3>
33+
<p>Sidcup Family Golf is a Toptracer driving range and crazy golf venue in Sidcup, South East London. Passionate about technology, player development and making golf fun and accessible to everyone.</p>
34+
</div>
35+
</div>
36+
<div id="page2">
37+
<div id="scroller">
38+
<div id="scroller-in-1">
39+
<h4>TOPTRACER RANGE</h4>
40+
<h4>GOLF LESSONS</h4>
41+
<h4>ADVENTURE GOLF</h4>
42+
<h4>COFFEE SHOP</h4>
43+
<h4>LEAGUES</h4>
44+
</div>
45+
<div id="scroller-in-2">
46+
<h4>TOPTRACER RANGE</h4>
47+
<h4>GOLF LESSONS</h4>
48+
<h4>ADVENTURE GOLF</h4>
49+
<h4>COFFEE SHOP</h4>
50+
<h4>LEAGUES</h4>
51+
</div>
52+
</div>
53+
<div id="about">
54+
<img width="300" height="200" src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-1.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;fit=300%2C200&amp;ssl=1" class="attachment-medium size-medium" alt="" decoding="async" loading="lazy" srcset="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-1.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;ssl=1 1280w, https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-1-300x200.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;ssl=1 300w, https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-1-1024x682.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;ssl=1 1024w, https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-1-768x511.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;ssl=1 768w, https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-1.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;w=384&amp;ssl=1 384w, https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-1.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;w=1152&amp;ssl=1 1152w" sizes="(max-width: 300px) 100vw, 300px" />
55+
<div id="ab1">
56+
<h2>ABOUT US</h2>
57+
<p>Home to a 46-bay, multi-tier, floodlit driving range, powered by Toptracer Range technology. Complimented by a practice green and bunker, coffee shop and American Golf Store. There truly is something for everyone as we also boast two outdoor 18-hole dinosaur themed crazy golf courses.
58+
<br><br>
59+
Please note: we are a cashless venue. The range closes at 10pm with last balls at 9pm.</p>
60+
</div>
61+
<img width="300" height="200" src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-2.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;fit=300%2C200&amp;ssl=1" class="attachment-medium size-medium" alt="" decoding="async" loading="lazy" srcset="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-2.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;ssl=1 1280w, https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-2-300x200.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;ssl=1 300w, https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-2-1024x682.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;ssl=1 1024w, https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-2-768x511.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;ssl=1 768w, https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-2.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;w=384&amp;ssl=1 384w, https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/home-about-2.jpg?strip=all&amp;lossy=1&amp;sharp=1&amp;w=1152&amp;ssl=1 1152w" sizes="(max-width: 300px) 100vw, 300px" />
62+
</div>
63+
<div id="cards">
64+
<div class="card" id="card1">
65+
<div class="overlay">
66+
<h4>TOPTRACER RANGE</h4>
67+
<p>Our range dclivcrs the same ball-
68+
tracking tcchnology that traces the
69+
shots of the game's best players on
70+
Toptracer Range technology offers a
71+
fun, engaging, tech-drivcn
72+
that appeals to seasoned
73+
players, range rivals, friends, family
74+
members, and even first-time golfers.</p>
75+
</div>
76+
</div>
77+
<div class="card" id="card2">
78+
<div class="overlay">
79+
<h4>ADVENTURE GOLF</h4>
80+
<p>Our range dclivcrs the same ball-
81+
tracking tcchnology that traces the
82+
shots of the game's best players on
83+
Toptracer Range technology offers a
84+
fun, engaging, tech-drivcn
85+
that appeals to seasoned
86+
players, range rivals, friends, family
87+
members, and even first-time golfers.</p>
88+
</div>
89+
</div>
90+
<div class="card" id="card3">
91+
<div class="overlay">
92+
<h4>GOLF LESSONS</h4>
93+
<p>Our range dclivcrs the same ball-
94+
tracking tcchnology that traces the
95+
shots of the game's best players on
96+
Toptracer Range technology offers a
97+
fun, engaging, tech-drivcn
98+
that appeals to seasoned
99+
players, range rivals, friends, family
100+
members, and even first-time golfers.</p>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
<div id="page3">
106+
<div id="bar">
107+
<img src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/dots-side.svg">
108+
<h2>SIGN UP FOR SIDCUP NEWS AND SPECIAL OFFERS <br>
109+
STRAIGHT TO YOUR INBOX</h2>
110+
<img src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/dots-side.svg">
111+
</div>
112+
<div id="para">
113+
<img id = "img1" src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/quote-left.svg">
114+
<p>DEFINITELY ONE OF THE BEST PLACES TO HIT SOME GOLF BALLS, THE TOPTRACER IN MOST OF THE BAYS IS A FANTASTIC ADDITION FOR THE PRICE! I’M YET TO TRY THE MINI GOLF BUT EVERYONE SEEMS TO BE HAVING FUN OVER THERE!</p>
115+
<img id = "img2" src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/quote-right.svg">
116+
</div>
117+
</div>
118+
<div id="page4">
119+
<h1>WHAT ARE YOU WAITING FOR?</h1>
120+
<div class="elem">
121+
<h2>TOPTRACER RANGE</h2>
122+
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/page-toptracer-1024x683.jpg?strip=all&lossy=1&sharp=1&ssl=1">
123+
</div>
124+
<div class="elem">
125+
<h2>GOLF LESSONS</h2>
126+
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/page-lessons-1024x683.jpg?strip=all&lossy=1&sharp=1&ssl=1">
127+
</div>
128+
<div class="elem">
129+
<h2>ADVENTURE GOLF</h2>
130+
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/page-ag-1024x682.jpg?strip=all&lossy=1&sharp=1&ssl=1">
131+
</div>
132+
</div>
133+
<div id="footer">
134+
<img
135+
src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/dots-footer.svg"
136+
alt=""
137+
/>
138+
<div id="f1">
139+
<img
140+
src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/logo-white.svg"
141+
alt=""
142+
/>
143+
</div>
144+
<div id="f2">
145+
<h3>TOPTRACER Ranges</h3>
146+
<h3>Golf Lessons</h3>
147+
<h3>Adventure Golf</h3>
148+
</div>
149+
<div id="f3">
150+
<h3>coffee shop</h3>
151+
<h3>LEAGUES</h3>
152+
<h3>Contact us</h3>
153+
</div>
154+
<div id="f4">
155+
<h4>
156+
A20, SIDCUP BYPASS <br />
157+
CHISLEHURST <br />
158+
KENT <br />
159+
BR7 6RP <br />
160+
TEL: 0208 309 0181 <br />
161+
GET DIRECTIONS <br />
162+
</h4>
163+
</div>
164+
</div>
165+
</div>
166+
167+
168+
169+
170+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
171+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
172+
<script src="script.js"></script>
173+
</body>
174+
</html>

‎Anim-web/montserrat-latin-400-normal.ttf‎

32.3 KB
Binary file not shown.

‎Anim-web/montserrat-latin-900-normal.ttf‎

32.4 KB
Binary file not shown.

‎Anim-web/script.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
var crsr = document.querySelector("#cursor")
2+
var big = document.querySelector("#big-curs")
3+
4+
document.addEventListener("mousemove",function(dets){
5+
crsr.style.left = dets.x+ "px"
6+
crsr.style.top = dets.y + "px"
7+
big.style.left = dets.x - 150 + "px"
8+
big.style.top = dets.y - 150 + "px"
9+
})
10+
11+
var h3all = document.querySelectorAll("#nav h3")
12+
h3all.forEach(function(elem){
13+
elem.addEventListener("mouseenter",function(){
14+
crsr.style.scale = 3
15+
crsr.style.border = "1px solid #fff"
16+
crsr.style.backgroundColor = "transparent"
17+
})
18+
elem.addEventListener("mouseleave",function(){
19+
crsr.style.scale = 1
20+
crsr.style.border = "0px solid #95C11E"
21+
crsr.style.backgroundColor = "#95C11E"
22+
})
23+
})
24+
25+
26+
gsap.to("#nav",{
27+
backgroundColor: "#000",
28+
height: "100px",
29+
duration:0.5,
30+
scrollTrigger:{
31+
trigger: "#nav",
32+
scroller:"body",
33+
// markers: true,
34+
start: "top 0%",
35+
end: "top -5%",
36+
scrub: 1,
37+
}
38+
})
39+
gsap.to("#main",{
40+
backgroundColor: "#000",
41+
scrollTrigger:{
42+
trigger: "#main",
43+
scroller: "body",
44+
// markers: true,
45+
start: "top -20%",
46+
end: "top -90%",
47+
scrub: 1,
48+
}
49+
})
50+
gsap.from("#about img, #about #ab1 ",{
51+
y:30,
52+
opacity: 0,
53+
duration: 0.1,
54+
stagger: 0.4,
55+
scrollTrigger:{
56+
trigger:"#about",
57+
scroller:"body",
58+
// markers: true,
59+
start: "top 88%",
60+
end: " top 85%"
61+
}
62+
})
63+
gsap.from("#page2 #cards .card",{
64+
scale: 0.5,
65+
opacity: 0,
66+
duration: 1,
67+
stagger: 0.4,
68+
scrollTrigger:{
69+
trigger:"#cards",
70+
scroller:"body",
71+
// markers: true,
72+
start: "top 88%",
73+
end: " top 85%"
74+
}
75+
})
76+
gsap.from("#page3 #para #img1",{
77+
x:-30,
78+
y:-30,
79+
opacity: 0,
80+
duration: 0.5,
81+
scrollTrigger:{
82+
trigger:"#para",
83+
scroller: " body",
84+
start: "top 88%",
85+
end: "top 85%",
86+
}
87+
})
88+
gsap.from("#page3 #para #img2",{
89+
x:30,
90+
y:30,
91+
opacity: 0,
92+
duration: 0.5,
93+
scrollTrigger:{
94+
trigger:"#para",
95+
scroller: " body",
96+
start: "top 88%",
97+
end: "top 85%",
98+
}
99+
})
100+
gsap.from("#page4 h1",{
101+
y:50,
102+
scrollTrigger:{
103+
trigger:"#page4 h1",
104+
scroller: "body",
105+
start: "top 88%",
106+
end: "top 85%",
107+
}
108+
})

0 commit comments

Comments
 (0)