RanchiMall/projectb
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding animations

Browse Source
This commit is contained in:
sairaj mote 2023-06-27 19:21:19 +05:30
parent f3a90e3e11
commit 7d1e60cbfd
4 changed files with 86 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -210,6 +210,10 @@ button,
transform-origin: left bottom; transform-origin: left bottom;
} }
.move-in {
opacity: 0;
}
article > * { article > * {
padding: max(1rem, 2vw) var(--inline-padding); padding: max(1rem, 2vw) var(--inline-padding);
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
css/main.scss
View File

@ -172,6 +172,9 @@ button,
transform-origin: left bottom; transform-origin: left bottom;
} }
} }
.move-in {
opacity: 0;
}
article { article {
& > * { & > * {
padding: max(1rem, 2vw) var(--inline-padding); padding: max(1rem, 2vw) var(--inline-padding);

112
index.html
View File

@ -35,13 +35,13 @@
</h2> </h2>
<!-- <img id="hero_illustration" src="assets/svg/cityscape.svg" alt=""> --> <!-- <img id="hero_illustration" src="assets/svg/cityscape.svg" alt=""> -->
<div class="grid" style="gap: 8rem;"> <div class="grid" style="gap: 8rem;">
<div class="grid gap-2 above_fold__section"> <div class="grid gap-2 above_fold__section move-in">
<h3>What is Project B</h3> <h3>What is Project B</h3>
<p> <p>
Project B executes tokenization projects based on blockchain technology. Project B executes tokenization projects based on blockchain technology.
</p> </p>
</div> </div>
<div class="grid gap-2 above_fold__section"> <div class="grid gap-2 above_fold__section move-in">
<h3> <h3>
What is tokenization What is tokenization
</h3> </h3>
@ -80,7 +80,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="grid gap-2 above_fold__section"> <div class="grid gap-2 above_fold__section move-in">
<h3>Why Project B for tokenization</h3> <h3>Why Project B for tokenization</h3>
<ul class="milestones milestones--description-only"> <ul class="milestones milestones--description-only">
<li class="milestone"> <li class="milestone">
@ -129,7 +129,7 @@
<h2 class="reveal"> <h2 class="reveal">
<span>Services</span> <span>Services</span>
</h2> </h2>
<ul> <ul class="move-in">
<li style="--delay: 0s"> <li style="--delay: 0s">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000"> viewBox="0 0 24 24" width="24px" fill="#000000">
@ -209,8 +209,8 @@
</section> </section>
<section id="projectb_milestones_section"> <section id="projectb_milestones_section">
<h2 class="reveal"><span>Milestones</span></h2> <h2 class="reveal"><span>Milestones</span></h2>
<ul id="projectb_milestones_wrapper" class="carousel"> </ul> <ul id="projectb_milestones_wrapper" class="carousel move-in"> </ul>
<div class="carousel-controls flex gap-0-3"> <div class="carousel-controls flex gap-0-3 move-in">
<button class="carousel-control" onclick="scrollCarousel('projectb_milestones_wrapper', 'left')"> <button class="carousel-control" onclick="scrollCarousel('projectb_milestones_wrapper', 'left')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000"> fill="#000000">
@ -229,7 +229,7 @@
</section> </section>
<section> <section>
<h2 class="reveal"><span>Blockchain Partners</span></h2> <h2 class="reveal"><span>Blockchain Partners</span></h2>
<ul id="partners"> <ul id="partners" class="move-in">
<li> <li>
<a class="partner" href="https://www.ranchimall.net/" target="_blank"> <a class="partner" href="https://www.ranchimall.net/" target="_blank">
<svg class="icon" viewBox="0 0 96 108" xml:space="preserve"> <svg class="icon" viewBox="0 0 96 108" xml:space="preserve">
@ -349,7 +349,7 @@
<h4 class="reveal"><span>International Payments</span></h4> <h4 class="reveal"><span>International Payments</span></h4>
<h2 class="reveal"><span>Pay with Bitcoin</span></h2> <h2 class="reveal"><span>Pay with Bitcoin</span></h2>
</div> </div>
<p> <p class="move-in">
Explore the world with seamless property rentals, Explore the world with seamless property rentals,
powered by Bitcoin payments from anywhere on the globe! powered by Bitcoin payments from anywhere on the globe!
</p> </p>
@ -363,7 +363,7 @@
<h2 class="reveal"><span>El Salvador?</span></h2> <h2 class="reveal"><span>El Salvador?</span></h2>
</div> </div>
<ul class="grid"> <ul class="grid">
<li class="milestone"> <li class="milestone move-in">
<div class="milestone__label">1</div> <div class="milestone__label">1</div>
<h3 class="milestone__title">Bitcoin legalized</h3> <h3 class="milestone__title">Bitcoin legalized</h3>
<p class="milestone__description"> <p class="milestone__description">
@ -372,7 +372,7 @@
protections. protections.
</p> </p>
</li> </li>
<li class="milestone"> <li class="milestone move-in">
<div class="milestone__label">2</div> <div class="milestone__label">2</div>
<h3 class="milestone__title">No capital gains tax</h3> <h3 class="milestone__title">No capital gains tax</h3>
<p class="milestone__description"> <p class="milestone__description">
@ -381,14 +381,14 @@
leverage the power of new technologies. leverage the power of new technologies.
</p> </p>
</li> </li>
<li class="milestone"> <li class="milestone move-in">
<div class="milestone__label">3</div> <div class="milestone__label">3</div>
<h3 class="milestone__title">Digital assets regulation</h3> <h3 class="milestone__title">Digital assets regulation</h3>
<p class="milestone__description"> <p class="milestone__description">
El Salvador has created Comprehensive Digital Assets regulatory system. El Salvador has created Comprehensive Digital Assets regulatory system.
</p> </p>
</li> </li>
<li class="milestone"> <li class="milestone move-in">
<div class="milestone__label">4</div> <div class="milestone__label">4</div>
<h3 class="milestone__title">Best physical launchpad</h3> <h3 class="milestone__title">Best physical launchpad</h3>
<p class="milestone__description"> <p class="milestone__description">
@ -397,7 +397,7 @@
up all over the world using blockchain dynamics. up all over the world using blockchain dynamics.
</p> </p>
</li> </li>
<li class="milestone"> <li class="milestone move-in">
<div class="milestone__label">5</div> <div class="milestone__label">5</div>
<h3 class="milestone__title">First mover advantage for new ideas</h3> <h3 class="milestone__title">First mover advantage for new ideas</h3>
<p class="milestone__description"> <p class="milestone__description">
@ -407,7 +407,7 @@
advantage is often a permanent advantage in Crypto space. advantage is often a permanent advantage in Crypto space.
</p> </p>
</li> </li>
<li class="milestone"> <li class="milestone move-in">
<div class="milestone__label">6</div> <div class="milestone__label">6</div>
<h3 class="milestone__title">Emerging focal point of crypto community</h3> <h3 class="milestone__title">Emerging focal point of crypto community</h3>
<p class="milestone__description"> <p class="milestone__description">
@ -421,7 +421,7 @@
<section id="projects_section"> <section id="projects_section">
<h2 class="reveal"><span>Projects</span></h2> <h2 class="reveal"><span>Projects</span></h2>
<div class="grid gap-2"> <div class="grid gap-2">
<div class="project"> <div class="project move-in">
<div class="project__images grid"> <div class="project__images grid">
<div class="project__image"> <div class="project__image">
<img loading="lazy" src="assets/poc/poc3.jpg" alt=""> <img loading="lazy" src="assets/poc/poc3.jpg" alt="">
@ -474,7 +474,7 @@
<h4>Details</h4> <h4>Details</h4>
</div> --> </div> -->
</div> </div>
<div class="project"> <div class="project move-in">
<div class="project__images grid"> <div class="project__images grid">
<div class="project__image"> <div class="project__image">
<img loading="lazy" src="assets/bitsindri/bitsindri-1.webp" alt=""> <img loading="lazy" src="assets/bitsindri/bitsindri-1.webp" alt="">
@ -527,7 +527,7 @@
<h4>Details</h4> <h4>Details</h4>
</div> --> </div> -->
</div> </div>
<div class="project"> <div class="project move-in">
<div class="project__images grid"> <div class="project__images grid">
<div class="project__image"> <div class="project__image">
<img loading="lazy" src="assets/representational/taxi.jpg" alt=""> <img loading="lazy" src="assets/representational/taxi.jpg" alt="">
@ -565,7 +565,7 @@
<section class="grid gap-3"> <section class="grid gap-3">
<h2 class="reveal"><span>Project team structure</span> </h2> <h2 class="reveal"><span>Project team structure</span> </h2>
<ul id="project_team__components"> <ul id="project_team__components">
<li class="grid gap-1 milestone"> <li class="grid gap-1 milestone move-in">
<div class="milestone__label">1</div> <div class="milestone__label">1</div>
<h3 class="milestone__title"> <h3 class="milestone__title">
Create client-side steering team Create client-side steering team
@ -587,7 +587,7 @@
</ol> </ol>
</div> </div>
</li> </li>
<li class="grid gap-1 milestone"> <li class="grid gap-1 milestone move-in">
<div class="milestone__label">2</div> <div class="milestone__label">2</div>
<h3 class="milestone__title"> <h3 class="milestone__title">
Approval from the board or higher management Approval from the board or higher management
@ -608,7 +608,7 @@
</p> </p>
</div> </div>
</li> </li>
<li class="grid gap-1 milestone"> <li class="grid gap-1 milestone move-in">
<div class="milestone__label">3</div> <div class="milestone__label">3</div>
<h3 class="milestone__title">Project B team role</h3> <h3 class="milestone__title">Project B team role</h3>
<div class="grid milestone__description gap-1"> <div class="grid milestone__description gap-1">
@ -622,7 +622,7 @@
</p> </p>
</div> </div>
</li> </li>
<li class="grid gap-1 milestone"> <li class="grid gap-1 milestone move-in">
<div class="milestone__label">4</div> <div class="milestone__label">4</div>
<h3 class="milestone__title"> <h3 class="milestone__title">
Regulatory team role Regulatory team role
@ -637,8 +637,8 @@
</ul> </ul>
</section> </section>
<section> <section>
<h2 class="reveal"><span>Team</span></h4> <h2 class="reveal"><span>Team</span></h2>
<ul id="team_members"></ul> <ul id="team_members" class="move-in"></ul>
</section> </section>
<section id="media_coverage_section"> <section id="media_coverage_section">
<h2 class="reveal"><span>Media coverage</span></h2> <h2 class="reveal"><span>Media coverage</span></h2>
@ -694,7 +694,7 @@
</section> </section>
<section id="socials_section"> <section id="socials_section">
<h2 class="reveal"><span>Socials</span></h2> <h2 class="reveal"><span>Socials</span></h2>
<ul id="social_links"> <ul id="social_links" class="move-in">
<li> <li>
<a href="https://twitter.com/ProjectBSV" target="_blank"> <a href="https://twitter.com/ProjectBSV" target="_blank">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 248 204"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 248 204">
@ -826,10 +826,18 @@
</section> </section>
</article> </article>
<article id="economic_framework" class="page hidden"> <article id="economic_framework" class="page hidden">
<h2 class="tagline">Tokenization = Blockchain Technology + Economic Framework</h2> <h2 class="tagline reveal">
<span>
Tokenization = Blockchain Technology + Economic Framework
</span>
</h2>
<div class="grid gap-2"> <div class="grid gap-2">
<h3>Blockchain technology that Project B will implement</h3> <h3 class="reveal">
<ul id="technologies_needed"> <span>
Blockchain technology that Project B will implement
</span>
</h3>
<ul id="technologies_needed" class="move-in">
<li style="--delay: 0s"> <li style="--delay: 0s">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000"> fill="#000000">
@ -890,7 +898,7 @@
</ul> </ul>
<h3 class="reveal"><span>Why is economic framework needed</span></h3> <h3 class="reveal"><span>Why is economic framework needed</span></h3>
<ul class="milestones milestones--description-only"> <ul class="milestones milestones--description-only move-in">
<li class="milestone"> <li class="milestone">
<div class="milestone__label">1</div> <div class="milestone__label">1</div>
<p class="milestone__description"> <p class="milestone__description">
@ -925,8 +933,12 @@
</li> </li>
</ul> </ul>
<div class="grid gap-2"> <div class="grid gap-2">
<h3>Economic framework that Project B will follow</h3> <h3 class="reveal">
<ul class="milestones milestones--title-only"> <span>
Economic framework that Project B will follow
</span>
</h3>
<ul class="milestones milestones--title-only move-in">
<li class="milestone"> <li class="milestone">
<div class="milestone__label">1</div> <div class="milestone__label">1</div>
<h4 class="milestone__description"> <h4 class="milestone__description">
@ -1011,8 +1023,12 @@
details</a> details</a>
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
<h3>Key definitions in economic framework</h3> <h3 class="reveal">
<ul> <span>
Key definitions in economic framework
</span>
</h3>
<ul class="move-in">
<li> <li>
<strong>Production Valuation</strong> <strong>Production Valuation</strong>
<p> <p>
@ -1160,7 +1176,7 @@
const renderedTeamMembers = teamMembers.map((member, index) => { const renderedTeamMembers = teamMembers.map((member, index) => {
const { image, name, title, bio } = member const { image, name, title, bio } = member
return html` return html`
<li data-index=${index} class="team-member"> <li data-index=${index} class="team-member move-in">
<img src="${image}" alt=${`${name} profile picture`} loading="lazy"> <img src="${image}" alt=${`${name} profile picture`} loading="lazy">
<div class="flex flex-direction-column"> <div class="flex flex-direction-column">
<p class="team-member__name">${name}</p> <p class="team-member__name">${name}</p>
@ -1185,7 +1201,7 @@
const renderedMethodology = methodology.map((step, index) => { const renderedMethodology = methodology.map((step, index) => {
const { title, content } = step const { title, content } = step
return html` return html`
<li class="milestone"> <li class="milestone move-in">
<div class="milestone__label">${index + 1}</div> <div class="milestone__label">${index + 1}</div>
<h3 class="milestone__title">${title}</h3> <h3 class="milestone__title">${title}</h3>
<p class="milestone__description">${content}</p> <p class="milestone__description">${content}</p>
@ -1338,6 +1354,34 @@
document.querySelectorAll('.reveal').forEach(heading => { document.querySelectorAll('.reveal').forEach(heading => {
headingObserver.observe(heading) headingObserver.observe(heading)
}) })
const sectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.animate([
{
transform: 'translateX(-0.5em)',
opacity: 0
},
{
transform: 'none',
opacity: 1
},
], {
duration: 300,
easing: 'ease',
fill: 'forwards',
delay: 100
})
observer.unobserve(entry.target)
}
})
}, {
threshold: 0.1
})
document.querySelectorAll('.move-in').forEach(section => {
sectionObserver.observe(section)
})
} }
function scrollCarousel(containerId, direction) { function scrollCarousel(containerId, direction) {