Witam, chciałbym dodać do projektu przycisk ze strony https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/, niestety nie wiem jak zabrać się do personalizacji przycisku za pomocą options. Proszę o pomoc.
0
2
https://github.com/codrops/ParticleEffectsButtons/
Wydaje mi się, że jest to ładnie opisane.
Ewentualnie daj swój kod, pokaż co już zrobiłeś i z czym masz problem.
0
Jest tam napisane aby użyć konstruktora. Mógłbyś napisać jak ma wyglądać np. zmiana typu na triangle?. Nie znam dobrze js, a chciałbym skorzystać akurat z tego rozwiązania.
0
Tak na szybko (brzydko napisane, chodzi jedynie o pokazanie zasady działania, nie miałem czasu żeby się z tym pieścić).
1) sam kod:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/particles.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<script>
function schowaj() {
particles.disintegrate();
}
</script>
<div style="text-align: center; padding-top: 100px;">
<button class="button" onclick="schowaj()" style="margin: auto;">Button</button>
</div>
<script src='js/anime.min.js'></script>
<script src='js/particles.js'></script>
<script src='js/demo.js'></script>
<script>
let opcje = {
direction: 'right',
size: 4,
speed: 1,
color: '#e85577',
particlesAmountCoefficient: 1.5,
oscillationCoefficient: 1,
type: 'triangle'
};
var particles = new Particles('.button', opcje);//{direction: 'bottom', type: 'triangle', duration: 7777});
</script>
</body>
</html>
**2) **co do konstruktora - chodzi o to, że przekazujesz parametry w linii 31, jako parametr wywołania new Particles
3) Możesz to zrobić na dwa sposoby - albo tak, jak jest na przykładzie, czyli najpierw sobie tworzysz tablicę, a potem ją przekazujesz jako argument podczas wywołania konstruktora, albo możesz wywalić słowo "opcje" i wstawić to, co jest dalej wykomentowane. Obie wersje są poprawne i działają, kwestia preferencji/co kto woli. W drugiej opcji nie przekazujesz odwołania do tablicy z parametrami, ale wstawiasz ją inline.
4) To co wkleiłem (przykładowy styl podany jako zawartość zmiennej opcje) jest pobrany stąd - https://github.com/codrops/ParticleEffectsButtons/blob/master/js/demo.js
0
Już rozumiem, wielkie dzięki za pomoc :) a jeszcze mam pytanie, jeśli chciałbym aby na stronie były dwa takie przyciski to jak to powinno wyglądać?
1
Dobra, jeszcze raz Ci pomogę. Ale potem to kombinuj sam. Bo jakoś za bardzo nie wyczuwam z Twojej strony oznak samodzielności, raczej rzucasz hasło, nie próbujesz sam powalczyć, tylko czekasz na gotowca :P
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/particles.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<script>
function schowaj() {
particles.disintegrate();
}
function schowaj_dwa() {
particles_dwa.disintegrate();
}
</script>
<div style="text-align: center; padding-top: 100px;">
<button class="button" id="pierwszy" onclick="schowaj()" style="margin: auto;">Button</button>
<br><br><br>
<button class="button" id="drugi" onclick="schowaj_dwa()" style="margin: auto;">Button</button>
</div>
<script src='js/anime.min.js'></script>
<script src='js/particles.js'></script>
<script src='js/demo.js'></script>
<script>
let opcje = {
direction: 'right',
size: 4,
speed: 1,
color: '#e85577',
particlesAmountCoefficient: 1.5,
oscillationCoefficient: 1,
type: 'triangle'
};
var particles = new Particles('#pierwszy', opcje);//{direction: 'bottom', type: 'triangle', duration: 7777});
var particles_dwa = new Particles('#drugi', {direction: 'bottom', type: 'triangle', duration: 7777});
</script>
</body>
</html>