Эффект песка на фотографии

HTML:

<div id="sand">
	<img id="sand-bg" src="sand-bg.webp">
</div>

</div>

CSS:

#sand {
	position: relative;
	height: 580px;
	margin: 20px 0;
    overflow: hidden;	
	border-radius: 18px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.15), 0 12px 18px rgba(0,0,0,0.1);
}
#sand-bg {
	display: none;
}

#sand {

position: relative;

height: 580px;

margin: 20px 0;

overflow: hidden;

border-radius: 18px;

box-shadow: 0 4px 8px rgba(0,0,0,0.15), 0 12px 18px rgba(0,0,0,0.1);

}

#sand-bg {

display: none;

}

JS:

Скачиваем файлы:

Все файлы должны находиться в одной папке

Подключаем скрипт эффекта:

<script type="module" src="sand.js"></script>

1	<script type="module" src="sand.js"></script>

Кол-во песчинок для разных экранов можно изменить в самом низу этого файла:

let numParticles = 500000;
if (window.innerWidth < 768) { 
	numParticles = 120000; 
	} else if (window.innerWidth < 1024) { 
	numParticles = 300000; 
}

let numParticles = 500000;

if (window.innerWidth < 768) {

numParticles = 120000;

} else if (window.innerWidth < 1024) {

numParticles = 300000;

}

За основу взято решение, найденное на codepen.io у пользователя Liam Egan

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий: