Stemkfas

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.

Platforms

    Languages

    • CSS3
    • Drupal
    • HTML5
    • JavaScript
    • UI/UX
    • Web
    Privacy Preference Center
    Your Privacy

    When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

    Strictly Necessary Cookies Always Active

    These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.

    You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.

    Performance Cookies

    These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site.

    All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.

    Cookies used

    Google Analytics
    Functional Cookies

    When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

    Cookies used

    Test Second Test
    Targeting Cookies

    When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

    More Information

    When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.