Barba v1 + jQuery + Lazyload scripts
Budget: $30 – $250 USD
WEBSITE TECHNOLOGY:
Just plain HTML5, CSS3 and javascript (jQuery).
The website has a PHP CMS called CouchCMS to get images and texts;
WEBSITE STRUCTURE:
1 — Homepage (with multiple projects)
2— About
3 — Project page
WEBSITE LINK:
https://experimental.com.pt/hidden/
WEBSITE NAVIGATION:
Navigation between pages works by clicking on the black circle logotype on top.
HOW WEBSITE WORKS:
All pages transition are running with BARBA js v1 (https://barba.js.org/v1/);
All BARBA configurations are inside the file js/main.js (for example: onEnter, onEnterCompleted, onLeave, onLeaveCompleted for EACH page with a data-attribute namespace so BARBA know what scripts to load specifically on each page and phase of transition: “homepage”, “project”, “about”.)
All JS scripts/functions have to be loaded trough BARBA.js. If not, they will not work while transition between pages.
We are using js/barba.transition.js to animate elements when they show up. It’s only necessary to add data-transition=“FadeinUp” and the effect works. But it doesn’t look so good and doesn’t work in some sections. We would prefer to use a lightweight animation library like https://animate.style/ (or any other simple to use FX library) and have multiple variables to set timings on everything: fadeIn, fadeOut, fadeinUp etc. when pages loads, when going back... Etc. Ideally we don't want to keep the barba.transition.js script;
JOB BRIEFING:
We are looking for smooth, fast and simple animated transitions between pages.
This will take some experimentation with the freelancer and me, to make sure everything is perfect.
JOB FOR FREELANCER:
GENERAL:
We want the homepage to load as follow:
— Nothing shows up
— 0.2sec circular Logo fades in
— 0.6sec all the images load (fadeInUp effect)
And between ALL other pages, all content (except for the black dot) fades out / or fadesIn when showing up;
HOMEPAGE:
— When mouse-hover on a project (li.project a img), it displays a number on the left-bottom and a text description on the right-top. We want that, when one of this images is clicked, this elements are FIXED and should they should keep fixed inside each “project” page.
— all images inside ul#grid should display on a RANDOM order every time the page refreshes. But when moving between pages and coming back to homepage, the shuffle result should ALWAYS be the same;
— make sure ALL Homepage images run with lazyload (there will be 40/50 images in the future);
— When clicking on one of the projects on the BOTTOM (li.project a img - scrolling down), the respective project page shows up in the middle of the page and not on top. Both homepage and project page should ALWAYS appear showing up on top;
OTHER NOTES
— PLEASE read “job briefing” above to understand the general vision and objective of this job;
— Before starting the job please MAKE SURE you are able to deliver all of this work. I'll be around for help and questions regarding the job.
Thank you
Just plain HTML5, CSS3 and javascript (jQuery).
The website has a PHP CMS called CouchCMS to get images and texts;
WEBSITE STRUCTURE:
1 — Homepage (with multiple projects)
2— About
3 — Project page
WEBSITE LINK:
https://experimental.com.pt/hidden/
WEBSITE NAVIGATION:
Navigation between pages works by clicking on the black circle logotype on top.
HOW WEBSITE WORKS:
All pages transition are running with BARBA js v1 (https://barba.js.org/v1/);
All BARBA configurations are inside the file js/main.js (for example: onEnter, onEnterCompleted, onLeave, onLeaveCompleted for EACH page with a data-attribute namespace so BARBA know what scripts to load specifically on each page and phase of transition: “homepage”, “project”, “about”.)
All JS scripts/functions have to be loaded trough BARBA.js. If not, they will not work while transition between pages.
We are using js/barba.transition.js to animate elements when they show up. It’s only necessary to add data-transition=“FadeinUp” and the effect works. But it doesn’t look so good and doesn’t work in some sections. We would prefer to use a lightweight animation library like https://animate.style/ (or any other simple to use FX library) and have multiple variables to set timings on everything: fadeIn, fadeOut, fadeinUp etc. when pages loads, when going back... Etc. Ideally we don't want to keep the barba.transition.js script;
JOB BRIEFING:
We are looking for smooth, fast and simple animated transitions between pages.
This will take some experimentation with the freelancer and me, to make sure everything is perfect.
JOB FOR FREELANCER:
GENERAL:
We want the homepage to load as follow:
— Nothing shows up
— 0.2sec circular Logo fades in
— 0.6sec all the images load (fadeInUp effect)
And between ALL other pages, all content (except for the black dot) fades out / or fadesIn when showing up;
HOMEPAGE:
— When mouse-hover on a project (li.project a img), it displays a number on the left-bottom and a text description on the right-top. We want that, when one of this images is clicked, this elements are FIXED and should they should keep fixed inside each “project” page.
— all images inside ul#grid should display on a RANDOM order every time the page refreshes. But when moving between pages and coming back to homepage, the shuffle result should ALWAYS be the same;
— make sure ALL Homepage images run with lazyload (there will be 40/50 images in the future);
— When clicking on one of the projects on the BOTTOM (li.project a img - scrolling down), the respective project page shows up in the middle of the page and not on top. Both homepage and project page should ALWAYS appear showing up on top;
OTHER NOTES
— PLEASE read “job briefing” above to understand the general vision and objective of this job;
— Before starting the job please MAKE SURE you are able to deliver all of this work. I'll be around for help and questions regarding the job.
Thank you