dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-08-02 17:50:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: simplex explained graphics animation (#2713)

Browse Source 
* website: animate simplex explained graphics

* website: update simplex network animation

* website: add lottie.min.js through node_modules

* website: update lottie.min.js copy command location
This commit is contained in:
M. Sarmad Qadeer
2023-07-29 14:20:51 +01:00
committed by GitHub
parent 18c802159b
commit f69c842ba6
6 changed files with 52 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/_includes/simplex_explained.html
+47 -3
View File
@@ -34,6 +34,8 @@
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
</div>
<div class="simplex-explained-lottie h-[340px] mb-[74px] hidden md:block"></div>
<!-- Tab content -->
<div class="swiper simplex-explained-swiper">
<div class="swiper-wrapper h-[inherit] mb-20 md:mb-0">
@@ -41,7 +43,7 @@
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-1-text" | i18n({}, lang ) | safe }}</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] mb-[74px]" src="/img/new/explained-1.svg" alt="" />
<img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-1.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center">
{{ "simplex-explained-tab-1-p-1" | i18n({}, lang ) | safe }}
</p>
@@ -54,7 +56,7 @@
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-2-text" | i18n({}, lang ) | safe }}</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] mb-[74px]" src="/img/new/explained-2.svg" alt="" />
<img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-2.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center">
{{ "simplex-explained-tab-2-p-1" | i18n({}, lang ) | safe }}
</p>
@@ -67,7 +69,7 @@
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] mb-[74px]" src="/img/new/explained-3.svg" alt="" />
<img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-3.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center">
{{ "simplex-explained-tab-3-p-1" | i18n({}, lang ) | safe }}
</p>
@@ -83,17 +85,59 @@
</div>
</section>
<script src="/js/lottie.min.js"></script>
<script>
window.addEventListener("load", function () {
const simplexExplainedSwiper__bullets = document.querySelectorAll(".simplex-explained-swiper .swiper-pagination > span");
const simplexExplainedSwiper__tabs = document.querySelectorAll("#simplex-explained .tabs .tab-button");
const simplexExplainedLottie = document.querySelector('.simplex-explained-lottie');
const simplexExplainedLottieAnimation = lottie.loadAnimation({
container: simplexExplainedLottie,
renderer: 'svg',
loop: false,
autoplay: false,
path: '/lottie_file/SimpleXExplainedLottie.json'
})
let targetFrame = null;
function animateToTarget() {
if (targetFrame !== null) {
const currentFrame = Math.round(simplexExplainedLottieAnimation.currentRawFrame);
if (currentFrame !== targetFrame) {
const direction = currentFrame < targetFrame ? 1 : -1;
simplexExplainedLottieAnimation.goToAndStop(currentFrame + direction, true);
setTimeout(animateToTarget, 22); // Add delay here
}
}
}
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === "attributes" && mutation.attributeName === "class" && mutation.target.classList.contains("swiper-pagination")) {
simplexExplainedSwiper__bullets.forEach((el,index) => {
if (el.classList.contains("swiper-pagination-bullet-active")) {
simplexExplainedSwiper__tabs[index].classList.add("active");
const currentFrame = Math.round(simplexExplainedLottieAnimation.currentRawFrame);
if(index === 0){
if (currentFrame > 0) {
targetFrame = 0;
animateToTarget();
}
}else if(index === 1){
if (currentFrame !== 35) {
targetFrame = 35;
animateToTarget();
}
}else if(index === 2){
if (currentFrame < 68) {
targetFrame = 68;
animateToTarget();
}
}
} else {
simplexExplainedSwiper__tabs[index].classList.remove("active");
}