.scrollable-container {
padding: 20px;
display: flex;
gap: 20px;
/* REAL CODE */
overflow-x: scroll;
scroll-snap-type: x proximity;
scrollbar-width: none;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
}
.scrollable-container::-webkit-scrollbar {
display: none;
}
.scrollable-container > div {
padding: 20px;
min-width: 200px;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}Personnaliser le style d’un selecteur avec un peu de JS et de CSS.
const selectsContainers = document.querySelectorAll('.select-container');
const selects = document.querySelectorAll('select');
const change = new Event("change");
// create the links & anchors
if(selects.length > 0) {
document.addEventListener("DOMContentLoaded", function() {
for (var i = 0; i < selectsContainers.length; i++) {
let childrens = selects[i].children;
let dropdown = document.createElement('div');
dropdown.setAttribute('id', 'select-' + selects[i].getAttribute('id'));
dropdown.setAttribute('class', 'select-stylized');
let dropdownSelected = document.createElement('span');
dropdownSelected.setAttribute('id', 'selected-' + selects[i].getAttribute('id'));
dropdownSelected.setAttribute('class', 'empty');
dropdownSelected.innerText = childrens[0].innerText;
dropdown.appendChild(dropdownSelected);
let dropdownUl = document.createElement('ul');
for (var j = 1; j < childrens.length; j++) {
let option = document.createElement('li');
option.innerText = childrens[j].innerText;
option.setAttribute('data-value', childrens[j].getAttribute('value'));
option.setAttribute('data-select', selects[i].getAttribute('id'));
option.addEventListener("click", function() {
document.getElementById(option.getAttribute('data-select')).value = option.getAttribute('data-value');
document.getElementById(option.getAttribute('data-select')).dispatchEvent(change);
document.getElementById('selected-' + option.getAttribute('data-select')).innerText = option.getAttribute('data-value');
document.getElementById('selected-' + option.getAttribute('data-select')).classList.remove("empty");
})
dropdownUl.appendChild(option);
}
dropdown.appendChild(dropdownUl);
dropdown.addEventListener("click", function() {
dropdown.classList.toggle('open');
let selectsOpen = document.querySelectorAll('.select-stylized.open');
for (var h = 0; h < selectsOpen.length; h++) {
if(selectsOpen[h] != dropdown ) {
selectsOpen[h].classList.remove('open');
}
}
})
selectsContainers[i].insertBefore(dropdown, selects[i]);
}
});
}Un accordéon tout simple avec du JS sans library.
function accordionToggler(el) {
let checkeds = document.querySelectorAll(`input[name="${el.target.name}"]`);
for (var i = 0; i < checkeds.length; i++) {
if(checkeds[i].id != el.target.id) {
checkeds[i].checked = false;
}
}
}.accordion {
position: relative;
}
.accordion input {
position: absolute;
top: 0;
opacity: 0;
z-index: -1;
}
.accordion label {
display: block;
margin-bottom: 10px;
padding-bottom: 6px;
font-weight: bold;
border-bottom: 1px solid var(--purple-light);
}
.accordion div p {
margin-top: 20px;
}
.accordion div p span {
text-transform: uppercase;
display: inline-block;
padding-top: 9px;
}
.accordion div {
max-height: 0px;
overflow: hidden;
transition: max-height ease-in 0.6s;
}
.accordion input:checked + label + div {
max-height: 600px;
}Petit code qui permet de faire en sorte de faire avancer (ou reculer) une animation CSS en fonction du scroll.
.animate .animation {
animation: 1s linear;
animation-play-state: paused;
animation-delay: calc(0 * -1s);
animation-iteration-count: 1;
animation-fill-mode: both;
}
.animate.fadeIn .animation {
opacity: 0;
animation-name: fadeIn;
}
.animate.zommScrollImg .animation {
transform: scale(1);
animation-name: zommScrollImg;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes zommScrollImg {
to {
transform: scale(1.3);
}
}<script>
function elementInView(elem){
return elem.getBoundingClientRect().top > 0 && elem.getBoundingClientRect().top < window.innerHeight;
}
// L'animation se délenche quand le haut de l'élément est à 0% de la hauteur de la fenêtre et se termine quand le bas de l'élément atteint 50% de la hauteur de la fenêtre
function getScrollPercentage(element) {
const rect = element.getBoundingClientRect();
const viewportHeight = window.innerHeight;
if (rect.bottom <= viewportHeight * 0.5) {
return 1;
}
if (rect.top >= viewportHeight) {
return 0;
}
const distanceFromBottom = viewportHeight - rect.top;
const totalScrollableDistance = viewportHeight + rect.height - (viewportHeight * 0.5);
const percentage = distanceFromBottom / totalScrollableDistance;
return Math.min(1, Math.max(0, percentage));
}
const animate = document.querySelectorAll('.animate');
window.addEventListener('scroll', scrollAnimate);
function scrollAnimate() {
for(var i = 0; i < animate.length; i++) {
if( elementInView(animate[i]) ) {
let offsetY = animate[i].getBoundingClientRect().top + window.scrollY;
var stateAnimation = getScrollPercentage(animate[i]);
animate[i].querySelector(".animation").style.animationDelay = 'calc('+stateAnimation+' * -1s)';
}
}
}
</script>