[data-gsap-slider-init] { --slider-status: on; /* Turn slider on/off */ --slider-spv: 3; /* Slides per view */ --slider-gap: 1.5em; /* Slides Gap */ } @media screen and (max-width: 991px) { [data-gsap-slider-init] { --slider-status: on; /* Turn slider on/off */ --slider-spv: 2.25; /* Slides per view */ --slider-gap: 1.5em; /* Slides Gap */ } } @media screen and (max-width: 767px) { [data-gsap-slider-init] { --slider-status: on; /* Turn slider on/off */ --slider-spv: 1.15; /* Slides per view */ --slider-gap: 1em; /* Gap */ } } [data-gsap-slider-item]:last-child { margin-right: 0; } /* Controls */ [data-gsap-slider-status="not-active"] [data-gsap-slider-controls] { display: none; } [data-gsap-slider-control-status="not-active"] { opacity: 0.2; pointer-events: none; } /* Customization */ .gsap-slider__control { transition: opacity 0.3s ease; } .demo-card { transition: all 0.3s ease; } [data-gsap-slider-item-status="not-active"] .demo-card { background-color: #131313; } .demo-card__tag { transition: all 0.3s ease; } [data-gsap-slider-item-status="not-active"] .demo-card__tag { opacity: 0; } // css voor grain .grain-overlay{ pointer-events: none; animation: grain 12s steps(10) infinite; will-change: transform; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 20% { transform: translate(-15%, 5%); } 30% { transform: translate(7%, -25%); } 40% { transform: translate(-5%, 25%); } 50% { transform: translate(-15%, 10%); } 60% { transform: translate(15%, 0%); } 70% { transform: translate(0%, 15%); } 80% { transform: translate(3%, 35%); } 90% { transform: translate(-10%, 10%); } } .grain-overlay{ position: fixed; width: 400%; height: 400%; left: -150%; top: -150%; pointer-events: none; background-repeat: repeat; will-change: transform; animation: grain 12s steps(10) infinite; } // CSS voor hover button effect .btn .btn__text { transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1); } .btn .btn__circle { transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1); transform: translate(-50%, -50%) scale(0) rotate(0.001deg); background-color: #D1FD88; } .btn:hover .btn__circle { transform: translate(-50%, -50%) scale(1) rotate(0.001deg); } /* Dark */ .btn[data-theme="dark"] .btn__circle { background-color: #D1FD88; } .btn[data-theme="dark"]:hover .btn__text { color: #031819; } /* Light */ .btn[data-theme="light"] .btn__bg { background-color: #EFEDE3 } .btn[data-theme="light"] .btn__text { color: #031819; } .btn[data-theme="light"] .btn__circle { background-color: #9FCCC8; } /* Primary */ .btn[data-theme="primary"] .btn__bg { background-color: #B7FF41; } .btn[data-theme="primary"] .btn__text { color: #031819; } .btn[data-theme="primary"] .btn__circle { background-color: #77C000; }