vin-ni / Pixelwave
Fully customizable pixel wave animation for seamless page transitions.
Stars: ✭ 119
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Pixelwave
Easytransitions
A simple way to create custom interactive UIViewController transitions
Stars: ✭ 1,592 (+1237.82%)
Mutual labels: ux, transition
Splarkcontroller
Custom transition between controllers. Settings controller for your iOS app.
Stars: ✭ 693 (+482.35%)
Mutual labels: ux, transition
SPLarkController
Custom transition between controllers. Settings controller for your iOS app.
Stars: ✭ 967 (+712.61%)
Mutual labels: ux, transition
Use Web Animations
😎 🍿 React hook for highly-performant and manipulable animations using Web Animations API.
Stars: ✭ 802 (+573.95%)
Mutual labels: ux, transition
Fileuploader
Beautiful and powerful HTML file uploading tool. A jQuery, PHP and Node.js plugin that transforms the standard input into a revolutionary and fancy field on your page.
Stars: ✭ 111 (-6.72%)
Mutual labels: ajax
Redux Idle Monitor
A Redux component to schedule events at stages of user idleness across multiple browser tabs.
Stars: ✭ 105 (-11.76%)
Mutual labels: transition
Vue Api Request
Control your API calls by using an amazing component which supports axios and vue-resource
Stars: ✭ 116 (-2.52%)
Mutual labels: ajax
Panels
Panels is a framework to easily add sliding panels to your application
Stars: ✭ 1,457 (+1124.37%)
Mutual labels: ux
Overrideit Sketchplugin
Overrideit is sketch plugin that allow designers to search in overridelist and overrides dropdowns, and with many other features.
Stars: ✭ 113 (-5.04%)
Mutual labels: ux
Web Client
Generic Linked Data browser and UX component framework. Apache license.
Stars: ✭ 105 (-11.76%)
Mutual labels: ux
Fetch Plus
🐕 Fetch+ is a convenient Fetch API replacement with first-class middleware support.
Stars: ✭ 116 (-2.52%)
Mutual labels: ajax
Laravel Like Comment
Ajax based site wide like and commenting system for laravel.
Stars: ✭ 105 (-11.76%)
Mutual labels: ajax
Sketchmine
Tools to validate, generate and analyse sketch files from web pages
Stars: ✭ 114 (-4.2%)
Mutual labels: ux
Reel Search Android
Reel Search for Android is a UI/UX design for autocomplete action. It is a beautiful minimalistic addition to any use case.
Stars: ✭ 110 (-7.56%)
Mutual labels: ux
Twittercompose
TwitterCompose is an Android application 📱 for showcasing Jetpack Compose for building declarative UI in Android.
Stars: ✭ 109 (-8.4%)
Mutual labels: ux
Pixel Wave Page Transition
Install
At the bottom of your body:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="js/PixelWave-min.js"></script>
var pixelwave = new PixelWave({
// options like:
// canvasTop: 0
});
Run Animation
pixelwave.start();
Options
When starting the wave you can add callback functions to get executed at certain times:
pixelwave.start([runsAtStart], [runsAtMiddle], [runsAtEnd]);
You can pass these options while you init the wave:
Description | Name | Default |
---|---|---|
Set width of Pixel | xSize | 48 |
Set height of Pixel | ySize | 48 |
How many steps there are between full fill and the beginning of the wave. Add as many as you like. | steps | [0.1, 0.1, 0.3, 0.5, 0.5, 1] |
Color of the wave | color | #305EFF |
Time in s the screen needs to fill. | speedIn | 0.7 |
Time in s the screen needs to empty. | speedOut | 0.7 |
Position top of the canvas element | canvasTop | 0 |
Position left of the canvas element | canvasLeft | 0 |
Sets the z-Index for the canvas element | zIndex | 99999 |
This is a function that sets a given size for different devices. (*add values) | autoCalculateSquaresSize | false |
Add a delay in s before animation out runs. | delayMiddle | 0 |
Full Example with options
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="js/PixelWave-min.js"></script>
var pixelwave = new PixelWave({
canvasTop: 50, //for a header
speedIn: 3,
speedOut: 1,
autoCalculateSquaresSize: true,
color: '#000000'
});
function start () {console.log('start')}
function middle () {console.log('middle')}
function end () {console.log('end')}
document.getElementById('startImage').addEventListener('click', function() {
pixelwave.start(start, middle, end);
})
Dependencies
Greensockets amazing gsap.
Contribution
If anyone wants to contribute, just fork the project or write me at [email protected] :)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].