WHERE EDUCATION MEETS INNOVATION

WebfLow designer page
EDUCATOR ICON

Educators

Instructors

Contributors

PLATFORM WHERE EDUCATION LIVES...

kOKOKAH...

PROVIDES A PLATFORM FOR EDUCATORS TO PUBLISH, VIEW AND SHARE EDUCATIONAL CONTENT TO VARIOUS AUDIENCES.  

STUDENTS

PLATFORM PROVIDES STUDENTS AN EXTERNAL CLASSROOM FOR STUDENTS TO ENROLL FOR EXTRA CURRICULAR STUDIES ONLINE

What’s a Rich Text element?

EDUCATORS

PLATFORM PROVIDES EDUCATORS AN ONLINE CLASSROOM TO TEACH STUDENTS FROM REGARDLESS OF THEIR VARIOUS LOCATIONS. 

<style>
/* CSS Vertical Parallax */
* { -moz-box-sizing: border-box; box-sizing: border-box; }
.parallax-e3 {-webkit-perspective: 100px; perspective: 100px; height: 100vh; overflow-x: hidden; overflow-y: auto; position: absolute; top: 0; left: 50%; right: 0; bottom: 0; margin-left: -50%; }

.layer-p1-e3 { -webkit-transform: translateY(-1000px) translateZ(-600px) scale(7); transform: translateY(-1000px) translateZ(-600px) scale(7); }
.layer-p2-e3 { -webkit-transform: translateY(-1200px) translateZ(-500px) scale(6); transform: translateY(-1200px) translateZ(-500px) scale(6); }
.layer-p3-e3 { -webkit-transform: translateY(-50px) translateZ(-200px) scale(3); transform: translateY(-50px) translateZ(-200px) scale(3); }
.layer-p4-e3 { -webkit-transform: translateY(210px) translateZ(-150px) scale(2.5); transform: translateY(210px) translateZ(-150px) scale(2.5); }
.layer-p5-e3 { -webkit-transform: translateY(240px) translateZ(-100px) scale(2); transform: translateY(240px) translateZ(-100px) scale(2); }
.layer-p6-e3 { -webkit-transform: translateY(54px) translateZ(-50px) scale(1.5); transform: translateY(54px) translateZ(-50px) scale(1.5); }
.layer-p7-e3 { -webkit-transform: translateY(38px) translateZ(-25px) scale(1.25); transform: translateY(38px) translateZ(-25px) scale(1.25); }
</style>

The structure in Webflow is as follow:

CERTIFICATION
ON
STERIODS
parallax layer 1
SVG image
×
parallax layer n
SVG image
×
parallax layer front
SVG image
×
parallax
body

This code and structure comes from an experiment on CodePen by Jim Thornton

Parallax with CSS only

Made with Webflow (sorry not tweaked for mobile yet)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.