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.

Stemkfas catalog called for a website, which corresponds with an amusing atmosphere of gamification in education. We were ready to develop а lovely design with engaging navigation, including SVG, CSS, and JS animations. Keeping in mind Drupal 8 for the backend and HTML 5, CSS, JavaScript for the frontend, we started the project.

Challenge

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.

Solution

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.

Using Drupal 8 for backend and HTML 5, CSS, Javascript for Frontend, we applied SVG, CSS, and JS animations.

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 client requested a circular navigation and our team decided to repose on the expert’s article. Fulfilling this feature on the original website, our JavaScript developer did the hard math to calculate proper algorithms. Our specialist accomplished the task as a tough pro: the round rolls right away with no flaws and holds.

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.

Result

We applied robust animations, making maximum use of cutting-edge Drupal features.

Our master-level at multiple JavaScript libraries was the main reason to choose and build up the right support for our coding. Despite the actual tech difficulty, we launched a heavily animated website as a fast and firmly tied unit. Interactive images and built-in apps (i.e. painting board) involve schoolchildren into action, offering swift access to a handy catalog of educational games.

Cute visual appeal combined with rapidness ends in a decent e-learning website, and it’s a key factor of success for the project.

Screenshots

No photo

Hala Al-Faisal, Programmer

“QArea’s team has shown a great dedication and professionalism in delivering the requirements of our educational project. They have shown a high level of adaptivity to changes, while delivering a high end product. It is to be mentioned that their relatively fast responses is one of their many great qualities. I can confidently recommend their services.”

Other projects