Stemkfas is an Arabic e-learning catalog storing free educational games categorized according to grade and course. A user plays + studies online in fields of maths, physics, chemistry, etc. Experts state that such a mix is the most potent way to deliver knowledge to our children.
Since the client requested lavish interaction and entertainment, we got to launch gifted custom animations, fast navigation, and responsive design as an organic whole. To arrange animated work seamlessly - that was the challenge.
Painting ingenious images were just a half (and a really important half) of the deal. Our illustrators coped with it smartly. The other part of the workflow, tech background and basis, made our developers seize each other by the hands.
At the top of the home page 12 islands, one for each grade, are parallaxing in the web space. We took the best from Parallax.js and Velocity.js libraries, knitting heavily animated elements together, so web page elements rigorously react to the lesser mouse moves.
You scroll down and see pleasing relevant images for each course. They contain few tricks to amuse school-age users. Following a sudden insight, we added, for instance, a the Newton’s swing for physics and the magnifying glass for biology. Can there be more fun for children than to craft art freely by themselves?
On the left hand, there’s the navigation circle. Looks cool and allows well-coordinated switching between categories. However, if we look behind the scenes, we can detect a comprehensive logic implemented into circling.
The theme is completely responsive.
Once you shoot a glance at the front page on your phone or tablet, the animations are still performing sweetly - just compressed in a line.
Barba.js helped us a lot to build a fast system, binding front page with each category of the game storage. We completed our goal for top possible fastness fitting flawlessly both desktop and mobile screens.
The website may appear in two fully applicable versions: English and Arabic, depending on user’s preferences.
We applied robust animations, making maximum use of cutting-edge Drupal features.
Cute visual appeal combined with rapidness ends in a decent e-learning website, and it’s a key factor of success for the project.
Hala Al-Faisal, Programmer