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;
}
.move-in {
opacity: 0;
}
article > * {
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;
}
}
.move-in {
opacity: 0;
}
article {
& > * {
padding: max(1rem, 2vw) var(--inline-padding);

112
index.html
View File

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