brechtdr / for-love-element

A fun little web component that brings some love to your page

for-love-element

A fun little web component that brings some love to your page

All you need is love, love for the web. You can express your love for your pages with this little component.

Basic usage

npm install --save-dev for-love-element

<for-love>
  Add anything you want here
</for-love>

You have already created some love on your page!

Customization

Some basic customization can be crated by using CSS custom properties (a.k.a CSS variables)

CSS Custom Property	Description	Type or example	Default
--fl-heart-color	Color of the hearts (unless multicolor option is active)	any <color>	#F8C8DC
--fl-heart-size	Size of the heart	20px, 5vw, 10ch, ...	3vw
--fl-sway	The amount swaying from left to right	<integer>	5
--fl-iteration	The amount of times the animation should play	positive <integer> or infinite	infinite
--fl-ease	Easing of the animation	ease-in, linear, cubic-bezier(.17,.67,.83,.67), ...	ease-in-out

Options

There are 3 options available

Attribute	Behaviour
amount	Specify the amount of hearts being shown (max: 400)
multicolor	Set a bunch of multi color hearts (overrides the default color setting)
contained	Use it for non-full page hearts where the parent element is set to position: relative

Example of the options usage:

<for-love amount="10" multicolor contained>
    Add anything you want here
</for-love>

Examples

I might set up a page with examples later on. For now, you can check out these CodePen links:

• Basic example
• Multicolor example
• Contained example