Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #27

Merged
merged 7 commits into from
Nov 23, 2023
Merged

Fixes #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
df24471
deleted projects
Sisir2311 Nov 23, 2023
8a97303
uploaded deleted projects
Sisir2311 Nov 23, 2023
d735f80
deleted projects
Sisir2311 Nov 23, 2023
f9db7af
uploaded projects
Sisir2311 Nov 23, 2023
703bb16
deleted projects
Sisir2311 Nov 23, 2023
0ec9d68
uploaded deleted projects
Sisir2311 Nov 23, 2023
039e694
Update formula.js
iamwatchdogs Nov 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 174 additions & 0 deletions Anim-web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="cursor">
</div>
<!-- <div id="big-curs">

</div> -->

<div id="page1">
<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">
<source src="https://sidcupfamilygolf.com/wp-content/uploads/2023/02/hero.mp4" type="video/mp4">
</video>
<div id="nav">
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/logo-white.svg">
<h3>TOPTRACER RANGE</h3>
<h3>GOLF LESSONS</h3>
<h3>ADVENTURE GOLF</h3>
<h3>CAFÉ</h3>
<h3>EVENTS</h3>
</div>
<button class="btn"><span>BOOK NOW!</span></button>
<div id="page1-a">
<h1>EAT. DRINK. PLAY.</h1>
<h3>WELCOME TO SIDCUP FAMILY GOLF!</h3>
<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>
</div>
</div>
<div id="page2">
<div id="scroller">
<div id="scroller-in-1">
<h4>TOPTRACER RANGE</h4>
<h4>GOLF LESSONS</h4>
<h4>ADVENTURE GOLF</h4>
<h4>COFFEE SHOP</h4>
<h4>LEAGUES</h4>
</div>
<div id="scroller-in-2">
<h4>TOPTRACER RANGE</h4>
<h4>GOLF LESSONS</h4>
<h4>ADVENTURE GOLF</h4>
<h4>COFFEE SHOP</h4>
<h4>LEAGUES</h4>
</div>
</div>
<div id="about">
<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" />
<div id="ab1">
<h2>ABOUT US</h2>
<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.
<br><br>
Please note: we are a cashless venue. The range closes at 10pm with last balls at 9pm.</p>
</div>
<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" />
</div>
<div id="cards">
<div class="card" id="card1">
<div class="overlay">
<h4>TOPTRACER RANGE</h4>
<p>Our range dclivcrs the same ball-
tracking tcchnology that traces the
shots of the game's best players on
Toptracer Range technology offers a
fun, engaging, tech-drivcn
that appeals to seasoned
players, range rivals, friends, family
members, and even first-time golfers.</p>
</div>
</div>
<div class="card" id="card2">
<div class="overlay">
<h4>ADVENTURE GOLF</h4>
<p>Our range dclivcrs the same ball-
tracking tcchnology that traces the
shots of the game's best players on
Toptracer Range technology offers a
fun, engaging, tech-drivcn
that appeals to seasoned
players, range rivals, friends, family
members, and even first-time golfers.</p>
</div>
</div>
<div class="card" id="card3">
<div class="overlay">
<h4>GOLF LESSONS</h4>
<p>Our range dclivcrs the same ball-
tracking tcchnology that traces the
shots of the game's best players on
Toptracer Range technology offers a
fun, engaging, tech-drivcn
that appeals to seasoned
players, range rivals, friends, family
members, and even first-time golfers.</p>
</div>
</div>
</div>
</div>
<div id="page3">
<div id="bar">
<img src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/dots-side.svg">
<h2>SIGN UP FOR SIDCUP NEWS AND SPECIAL OFFERS <br>
STRAIGHT TO YOUR INBOX</h2>
<img src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/dots-side.svg">
</div>
<div id="para">
<img id = "img1" src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/quote-left.svg">
<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>
<img id = "img2" src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/quote-right.svg">
</div>
</div>
<div id="page4">
<h1>WHAT ARE YOU WAITING FOR?</h1>
<div class="elem">
<h2>TOPTRACER RANGE</h2>
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/page-toptracer-1024x683.jpg?strip=all&lossy=1&sharp=1&ssl=1">
</div>
<div class="elem">
<h2>GOLF LESSONS</h2>
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/page-lessons-1024x683.jpg?strip=all&lossy=1&sharp=1&ssl=1">
</div>
<div class="elem">
<h2>ADVENTURE GOLF</h2>
<img src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/page-ag-1024x682.jpg?strip=all&lossy=1&sharp=1&ssl=1">
</div>
</div>
<div id="footer">
<img
src="https://eiwgew27fhz.exactdn.com/wp-content/themes/puttosaurus/img/dots-footer.svg"
alt=""
/>
<div id="f1">
<img
src="https://eiwgew27fhz.exactdn.com/wp-content/uploads/2023/02/logo-white.svg"
alt=""
/>
</div>
<div id="f2">
<h3>TOPTRACER Ranges</h3>
<h3>Golf Lessons</h3>
<h3>Adventure Golf</h3>
</div>
<div id="f3">
<h3>coffee shop</h3>
<h3>LEAGUES</h3>
<h3>Contact us</h3>
</div>
<div id="f4">
<h4>
A20, SIDCUP BYPASS <br />
CHISLEHURST <br />
KENT <br />
BR7 6RP <br />
TEL: 0208 309 0181 <br />
GET DIRECTIONS <br />
</h4>
</div>
</div>
</div>




<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>
<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>
<script src="script.js"></script>
</body>
</html>
Binary file added Anim-web/montserrat-latin-400-normal.ttf
View file
Open in desktop
Binary file not shown.
Binary file added Anim-web/montserrat-latin-900-normal.ttf
View file
Open in desktop
Binary file not shown.
108 changes: 108 additions & 0 deletions Anim-web/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
var crsr = document.querySelector("#cursor")
var big = document.querySelector("#big-curs")

document.addEventListener("mousemove",function(dets){
crsr.style.left = dets.x+ "px"
crsr.style.top = dets.y + "px"
big.style.left = dets.x - 150 + "px"
big.style.top = dets.y - 150 + "px"
})

var h3all = document.querySelectorAll("#nav h3")
h3all.forEach(function(elem){
elem.addEventListener("mouseenter",function(){
crsr.style.scale = 3
crsr.style.border = "1px solid #fff"
crsr.style.backgroundColor = "transparent"
})
elem.addEventListener("mouseleave",function(){
crsr.style.scale = 1
crsr.style.border = "0px solid #95C11E"
crsr.style.backgroundColor = "#95C11E"
})
})


gsap.to("#nav",{
backgroundColor: "#000",
height: "100px",
duration:0.5,
scrollTrigger:{
trigger: "#nav",
scroller:"body",
// markers: true,
start: "top 0%",
end: "top -5%",
scrub: 1,
}
})
gsap.to("#main",{
backgroundColor: "#000",
scrollTrigger:{
trigger: "#main",
scroller: "body",
// markers: true,
start: "top -20%",
end: "top -90%",
scrub: 1,
}
})
gsap.from("#about img, #about #ab1 ",{
y:30,
opacity: 0,
duration: 0.1,
stagger: 0.4,
scrollTrigger:{
trigger:"#about",
scroller:"body",
// markers: true,
start: "top 88%",
end: " top 85%"
}
})
gsap.from("#page2 #cards .card",{
scale: 0.5,
opacity: 0,
duration: 1,
stagger: 0.4,
scrollTrigger:{
trigger:"#cards",
scroller:"body",
// markers: true,
start: "top 88%",
end: " top 85%"
}
})
gsap.from("#page3 #para #img1",{
x:-30,
y:-30,
opacity: 0,
duration: 0.5,
scrollTrigger:{
trigger:"#para",
scroller: " body",
start: "top 88%",
end: "top 85%",
}
})
gsap.from("#page3 #para #img2",{
x:30,
y:30,
opacity: 0,
duration: 0.5,
scrollTrigger:{
trigger:"#para",
scroller: " body",
start: "top 88%",
end: "top 85%",
}
})
gsap.from("#page4 h1",{
y:50,
scrollTrigger:{
trigger:"#page4 h1",
scroller: "body",
start: "top 88%",
end: "top 85%",
}
})
Loading
Loading