ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-10 23:05:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

adds silky smooth animation to carousel

Browse Source
This commit is contained in:
akcodez
2023-11-06 09:33:42 -08:00
parent fecdb5d1ab
commit ca53c6e7d1
4 changed files with 129 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/devportal2022-v25.css
View File

File diff suppressed because one or more lines are too long

66
assets/js/contribute-carousel.js
View File

@@ -54,27 +54,55 @@ const events = [
let currentIndex = 1;
let isFirstLoad = true; // Add a flag to determine if it's the initial load
function updateCarousel() {
if(!!events[currentIndex - 1]) {
document.getElementById('prev-btn').style = 'opacity:1;'
document.getElementById('left-image').style = 'visibility:visible;'
document.getElementById('left-image').src = `assets/img/events/${events[currentIndex - 1].image}`;
} else {
document.getElementById('prev-btn').style = 'opacity:0.5;'
document.getElementById('left-image').style = 'visibility:hidden;'
const centerImage = document.getElementById('center-image');
const leftImage = document.getElementById('left-image');
const rightImage = document.getElementById('right-image');
if (!isFirstLoad) {
// Only run the exit animation if it's not the first load
centerImage.classList.add('exit');
leftImage.classList.add('exit');
rightImage.classList.add('exit');
}
document.getElementById('center-image').src = `assets/img/events/${events[currentIndex].image}`;
if(!!events[currentIndex + 1] ) {
document.getElementById('next-btn').style = 'opacity:1;'
document.getElementById('right-image').style = 'visibility:visible;'
document.getElementById('right-image').src = `assets/img/events/${events[currentIndex + 1].image}`;
} else {
document.getElementById('next-btn').style = 'opacity:0.5;'
document.getElementById('right-image').style = 'visibility:hidden;'
}
document.getElementById('event-name').textContent = events[currentIndex].name;
document.getElementById('event-location').textContent = events[currentIndex].location;
document.getElementById('event-date').textContent = events[currentIndex].date;
setTimeout(() => {
if (events[currentIndex - 1]) {
document.getElementById('prev-btn').style.opacity = 1;
leftImage.style.visibility = 'visible';
leftImage.src = `assets/img/events/${events[currentIndex - 1].image}`;
} else {
document.getElementById('prev-btn').style.opacity = 0.5;
leftImage.style.visibility = 'hidden';
}
centerImage.src = `assets/img/events/${events[currentIndex].image}`;
if (events[currentIndex + 1]) {
document.getElementById('next-btn').style.opacity = 1;
rightImage.style.visibility = 'visible';
rightImage.src = `assets/img/events/${events[currentIndex + 1].image}`;
} else {
document.getElementById('next-btn').style.opacity = 0.5;
rightImage.style.visibility = 'hidden';
}
document.getElementById('event-name').textContent = events[currentIndex].name;
document.getElementById('event-location').textContent = events[currentIndex].location;
document.getElementById('event-date').textContent = events[currentIndex].date;
if (!isFirstLoad) {
// Only run the enter animation if it's not the first load
centerImage.classList.remove('exit');
leftImage.classList.remove('exit');
rightImage.classList.remove('exit');
}
}, isFirstLoad ? 0 : 700); // If it's the first load, update immediately; otherwise, wait for the transition
// After the initial setup, set isFirstLoad to false
isFirstLoad = false;
}
document.getElementById('prev-btn').addEventListener('click', function() {

65
styles/_contribute.scss
View File

@@ -98,12 +98,39 @@
}
#community-table td {
overflow: hidden; // Hide the overflow
max-width: 34vw; // Your current max width
position: relative; // To position the pseudo-element
white-space: nowrap;
overflow: auto;
max-width: 65vw;
padding-left: 10px;
&::after {
// Pseudo-element for gradient fade effect
content: '';
position: absolute;
right: 0;
top: 0;
width: 100px; // Width of the fade effect
height: 100%;
}
}
@keyframes scroll-text {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.scrolling-text {
display: inline-block;
white-space: nowrap;
animation: scroll-text 30s linear infinite; // Adjust time as needed
}
#community-table img {
width: 52px;
height: 29px;
@@ -451,11 +478,13 @@
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
/* Hide overflow to keep the sliding effect clean */
}
img {
.image-container img {
max-width: 100%;
transition: all 0.3s ease-in-out;
transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
}
#center-image {
@@ -475,6 +504,31 @@
}
}
/* Additional styles for animating the left and right images off-screen */
#left-image.exit,
#right-image.exit {
transform: translateX(-100%);
opacity: 0;
}
#left-image.enter,
#right-image.enter {
transform: translateX(100%);
opacity: 0;
}
#center-image.exit {
transform: scale(0.8);
/* Shrink the center image a bit when exiting */
opacity: 0;
}
#center-image.enter {
transform: scale(1);
/* Return to normal size when entering */
opacity: 1;
}
.nav-btn {
position: absolute;
top: 50%;
@@ -562,6 +616,7 @@
position: absolute;
width: 205px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
@media (max-width: 768px) {
width: 99%;
}

32
template/page-community.html.jinja
View File

@@ -142,44 +142,42 @@
<table>
<tr>
<td class="td-img"><img class="discord-icon" alt="discord icon"></td>
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis
</td>
<td>Prepare for an evening of XRPL Toronto Meetup – a celebration of discovery and connection. Join enthusiasts, innovators, and developers for inspiring talks, conversations, and learning. All are welcome, from seasoned developers to curious newcomers.</td>
<td>
<a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
</td>
</tr>
<tr>
<td class="td-img"><img class="twitter-icon" alt="twitter icon"></td>
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis
</td>
<td>
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis 1 Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis 2 Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis </td>
<td>
<a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
</td>
</tr>
<tr>
<td class="td-img"><img class="youtube-icon" alt="youtube icon"></td>
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis </td>
<td>We are excited to introduce the XRP Ledger XCCESS - an exclusive meetup bringing together the brightest minds, innovators, and enthusiasts from South Korea's blockchain industry. Join us for an engaging experience during the Korea Blockchain Week. </td>
<td>
<a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
</td>
</tr>
<tr>
<td class="td-img"><img class="github-icon" alt="xrpl icon"></td>
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis </td>
<td>Watch the recorded information session and Q&A on applying to XRPL Grants Wave 7. This session will provide a general overview of the XRPL Grants application for Wave 7, with a focus on Decentralized Exchange (DEX) projects.</td>
<td>
<a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
</td>
</tr>
<tr>
<tr>
<td class="td-img"><img class="stackoverflow-icon" alt="xrpl icon"></td>
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis </td>
<td>Watch the recorded information session and Q&A on applying to XRPL Grants Wave 7. This session will provide a general overview of the XRPL Grants application for Wave 7, with a focus on Decentralized Exchange (DEX) projects. </td>
<td>
<a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
</td>
</tr>
<tr>
<td class="td-img"><img class="xrpl-icon" alt="xrpl icon"></td>
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis </td>
<td>Watch the recorded information session and Q&A on applying to XRPL Grants Wave 7. This session will provide a general overview of the XRPL Grants application for Wave 7, with a focus on Decentralized Exchange (DEX) projects.</td>
<td>
<a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
</td>
@@ -330,9 +328,19 @@
{% endblock %}
{% block endbody %}
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const cells = document.querySelectorAll("#community-table td");
cells.forEach(function(cell) {
if (cell.scrollWidth > cell.clientWidth) { // If the text overflows
const text = cell.innerText;
cell.innerHTML = '<div class="scrolling-text">' + text + '</div>';
}
});
});
</script>
<!-- TypeFrom for blog -->
<script src="//embed.typeform.com/next/embed.js"></script>