Skip to content

Instantly share code, notes, and snippets.

<script>
(function () {
var sliderId = 'MultiImageSlider';
var collectionListWrapperId = 'MultiImageCollectionWrapper';
var slideClass = 'w-slide';
var leftArrowClass = 'w-slider-arrow-left';
var rightArrowClass = 'w-slider-arrow-right';
var slideNavClass = 'w-slider-nav';
var collectionItemClass = 'w-dyn-item';
@Eli-Shmerler
Eli-Shmerler / blur_filter.html
Created March 30, 2020 03:56
Create a blur effect to elements scrolled behind navigation bar
<style>
.nav {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js" integrity="sha256-uckMYBvIGtce2L5Vf/mwld5arpR5JuhAEeJyjPZSUKY=" crossorigin="anonymous"></script>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 15,
stretch: 0,
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" integrity="sha256-XwfUNXGiAjWyUGBhyXKdkRedMrizx1Ejqo/NReYNdUE=" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script type="text/javascript">
particlesJS("particles-js",
REPLACE THIS LINE WITH THE CODE YOU HAVE DOWNLOADED
);var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script type="text/javascript">
particlesJS("particles-js",
REPLACE THIS LINE WITH THE CODE YOU HAVE DOWNLOADED
);var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>