Installations

npm install svelte-c-reveal

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.18.3

NPM Version

6.14.8 Pull Requests

Open

6

Total

6

Closed

0

Issues

Open

1

Total

1

Closed

0

Releases

Unable to fetch releases

Contributors

1

Unable to fetch Contributors

View all 1 contributors

Languages

2

Svelte

JavaScript

Svelte (89.78%)

JavaScript (10.22%)

Developer

andrusenn

Download Statistics

Total Downloads

765

Last Day

1

Last Week

1

Last Month

1

Last Year

89

GitHub Statistics

4 Stars

8 Commits

2 Watching

7 Branches

1 Contributors

Bundle Size

7.84 kB

Minified

2.71 kB

Minified + Gzipped

Bundlephobia

Maintainers

1

Package Meta Information

Latest Version

2.0.1

Package Id

svelte-c-reveal@2.0.1

Unpacked Size

41.71 kB

Size

6.56 kB

File Count

7

NPM Version

6.14.8

Node Version

12.18.3

Total Downloads

Cumulative downloads

Total Downloads

765

Last day

0%

1

Compared to previous day

Last week

0%

1

Compared to previous week

Last month

-50%

1

Compared to previous month

Last year

-11%

89

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

4

rollup rollup-plugin-node-resolve rollup-plugin-svelte svelte

Versions

Reveal

Simple Svelte (<3) component for reveal on scroll

Usage

1<script>
2    import Reveal from "svelte-c-reveal";
3</script>
4
5<Reveal> Content to be revealed </Reveal>
6
7<Reveal trigger="0.1" reveal="fadeInUp">
8    Trigger when 10% is in viewport
9</Reveal>
10
11<Reveal trigger="0.5" reveal="fadeInUp">
12    Trigger in center of viweport (50%)
13</Reveal>

Reveal and Hide

1<script>
2    import Reveal from "svelte-c-reveal";
3</script>
4
5<Reveal trigger="0.5" reveal="fadeInUp" hide="fadeOutDown">
6    <h1>My revealed content</h1>
7    <p>Hello I'm here!</p>
8</Reveal>

Props

Name	Value	Desc
`reveal`	String	Reveal effect
`hide`	String	Reveal out (hide) effect
`trigger`	Float	(0.0 to 1.0) When the reveal will trigger -> (viewport height * trigger)
`duration`	Css value	(number) Duration of the transition in seconds without "s"
`delay`	Css value	(number) Time delayed in seconds without "s"

Effects availables

Name
`fadeIn`
`fadeOut`
`fadeInUp` [default]
`fadeOutUp`
`fadeInDown`
`fadeOutDown`
`fadeInRotateX`
`fadeOutRotateX`
`fadeInRotateY`
`fadeOutRotateY`
`fadeInLeft`
`fadeOutLeft`
`fadeInRight`
`fadeOutRight`

Custom effects

1<script>
2    import Reveal from "svelte-c-reveal";
3</script>
4<style>
5    .myfx {
6        animation-name: myanimation;
7    }
8    @keyframes myanimation {
9        0% {
10            opacity: 0;
11            transform: rotate(90deg) scale(0);
12        }
13        100% {
14            opacity: 1;
15            transform: rotate(0deg) scale(1);
16        }
17    }
18</style>
19
20<Reveal trigger="0.5" reveal="myfx"> The center of viweport </Reveal>

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

2.5

/10

Last Scanned on 2024-12-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More