New Jarallax Release (version 0.2.3)
New Jarallax Release
The new version of Jarallax supports Apple’s mobile devices. You can also determine which animations work on which browsers and platforms.
Mobile Jarallax
Apple devices handle scroll events in another way, different from most browsers. Eventually a decent solution was made. unfortunately this was implemented at the expense of the swipe functionality. We are going to add the swipe functionality in future releases of Jarallax.
Browser based animations
Jarallax leans heavily on Javascript engines and Layout engines. This results in big performance differences on different devices and browsers. With browser based animations it is possible to add animations only in certain browsers. This way you can reduce the amount of animations for mobile devices to increase the framerate.
Updated documentation
The Browser based animations are described in the updated Jarallax
documentation. The new mobile controller is implemented automatically.
Support Jarallax on GitHub
Jarallax is finally available on
GitHub. This makes it possible to join the Jarallax team and contribute to Jarallax. If you have any questions, are interested in joining us or have a feature request, please mail us at info[at]jarallax.com.
Pipeline
Jarallax is constantly improving itself. The Jarallax team did get some great feedback from its users. This helped greatly in resolving bugs and created some new feature requests. Please keep mailing us!
For the future, we’re looking at implementing the following features:
- Image sequences - For 2d/3d animations in Jarallax
- Linking stylesheets in keys - This brings the designer back to CSS instead of styling in Javascript
Have fun with Jarallax,
CodeHunger
jhemsley30 asked: Hello. First of all, thank you for this great script. Is there a way to use all of your tutorial techniques on one page? I want to be able to use jumpTo tutorial and the planet tutorial on the same page. Also, with jumpto, are you able to use a selector or go to lateral position off the screen? Maybe a quick written tutorial on what is needed to this. Thank you for your time. -James
Hello jhemsley30,
First of all, sorry for my late reaction. It is possible to merge all pages in just one page. This requires mutiple jarallax instances and disabling the inactive jarallax object. Sadly i haven’t implemented this feature yet. Its on my TODO list for version 0.2.4.
Currently you aren’t able to jump to a selector of lateral position off the screen. This would be a good feature for jarallax 0.2.4.
If you’re in a hurry to use these features (for a deadline) i could send you a patched version next week with these functionalities. Please tell me if you are.
-CodeHunger
robertrr asked: Hi! Is there a way to make the scrollbar follow/synchronize "jumpToProgress"-method?
Hello Robertrr
Jarallax should synchronize the scroll bar automatically.
I’ve checked and somehow this doesn’t work in Firefox.
In google chome this works perfectly.
I’m going to fix this bug tomorrow and link you a pached version of Jarallax when its ready.
Cheers,
CodeHunger
UPDATE: I’ve made a patched version of jarallax 0.2.2 (version 0.2.2b) it’s downloadable at http://jarallax.com/?page=download
New version Jarallax (version 0.2.2)
New Jarallax features include:
Smoothed scrolling.
The jarallax scrolling controller now accepts some extra arguments. A lot of browsers dont smooth out scrolling. With the smoothed scrolling the jarallax animation easesout to the new scrollbar position.
animation cloning.
This feature helps you to duplicate a animation and slichtly ajust it for other elements. This prevents many almost identical lines of code.
Jump to progress
This method animates Jarallax smoothly over time to its new position.
Go to the
download page to get the newest version of jarallax
Jarallax examples
There is a new demo on the
demo page demonstrating all the new features.
The source code of this demo if availible on the
download page
Website update
Jarallax.com has been updated. Documentation is now available on the website. Also a contact page is added to the website, where you can ask for support, request features and report bugs
Website update: new tutorials
Watch the new Jarallax video tutorials at http://jarallax.com/tutorial.html
Jarallax Public Beta release!
Today is the day, Jarallax finally goes public!
Designers
Jarallax can be downloaded at jarallax.com/download
On the download page you can find the new and old versions of Jarallax as well as the source code of the demo pages.
Documentation
Currently Jarallax doesn’t have a lot of documentation. In fact, at the time of writing this mail/post the documentation pages are empty. There is though one tutorial explaining the basics of Jarallax to get you started. For more examples, download the examples at the download page.
Developers
Contribute
Currently there’s a Github being set up and plans are made for what should be in the repository.
Follow jarallax on github.
Pipeline
The first priority is to set up the basics for web designers so they can start with Jarallax:
The pipeline of jarallax is as follows:
-
Create Jarallax tutorials and documentation
-
Github release
-
Implement feature requests / bug fixes
-
Release new documentation and tutorials
-
1.0 release Jarallax
-
Implement feature requests, Release new documentation and tutorials, etc.
Follow Jarallax
In the near future Jarallax will have a lot of small updates and to prevent the Jarallax mailing list from getting spammy, Jarallax news wil only be mailed every 2 weeks.
Minor updates can be found at the Jarallax blog, Facebook, Twitter, and Google+.
Minor updates are:
-
New tutorials
-
New documentation
-
Future features
-
Website updates
Have a lot of fun with Jarallax!
Bugs and feature requests can be mailed at bugs@jarallax.com.
Feel free to send your jarallax creation to info@jarallax.com.
Sending a link of a website using the Jarallax library may get your website listed on the Jarallax site or mailing list.
- CodeHunger -
Jarallax controllers - introduction
What are Jarallax controllers?
Jarallax is an animation library you can use with custom controllers. Instead of timebased animations you can control the animations with everything you want. Jarallax controllers tell Jarallax at what position the current animation is and updates the CSS accordingly.
How do you use it?
Every Jarallax animation uses an animation controller. By default Jarallax uses a Scroll controller. Jarallax controllers are defined when constructing the Jarallax instance.
var jarallax = new Jarallax();
or
var jarallax = new Jarallax(new ControllerScroll());
building a custom controller
Each Jarallax controller has an “activate” Method, “deactivate” Method and a custom method for updating.
activate: this method is initiated when the Jarallax instance is created.
deactivate: this method is optional, it usually removes event listeners which where created using the Activate method.
ControllerDemo = function(/* Enter required arguments here */){
//Define default variables and store arguments here.
}
ControllerDemo.prototype.activate = function(jarallax){
this.jarallax = jarallax;
//Contruct your controller here.
}
ControllerDemo.prototype.deactivate = function(){
//Destruct your controller here.
}
//Your method
ControllerDemo.prototype.myMethod = function(){
//Assign jarallax with the new animation position.
this.jarallax.setProgress(position)
}
To attach this controller to Jarallax you run this code.
var jarallax = new Jarallax(new ControllerDemo());
Jarallax.com
Website has been updated & Alpha subscriptions are open!
Jarallax.com has finally been updated! For the few people who know, these last 2 months there was only an ugly placeholder here, but now you can view a demo of Jarallax and subscribe to the Jarallax mailing list for updates.
People who subscribe to the mailing list get access to Jarallax before its public release. Consider yourselves members of the Alpha team (though you don’t have to view this as a commitment).
Currently the project could use any feedback to help development.
What is Jarallax?
Jarallax is an open source JavaScript library enabling you to manipulate CSS using keyframes.
Unlike other Javascript libraries Jarallax supports custom controllers and where traditional animations are time-based Jarallax allows you to decide what animations react to. For example: Scrolling, mouse gestures, webcam, tablets, etc.
Everything is possible!
www.jarallax.com
