Scaffolding of the website created with Bootstrap. Using Bootstrap allowed to have
responsive website. One of the most used bootstrap functionalities was the data modals
which allowed me to display the 3 content on full screen. Having default modals windows
were bit dull so I ended up utilising Bootstrap modals with the “ekko-lightbox”
This allowed to have smoother transitions and displaying attributes like data title on the data modal.
Once the layout skeleton was created, I then added CSS3 to polish the website.
CSS3 allowed to use font face animations etc.
This was used in order to ease document traversing, event handling, animating, Ajax interactions and similar
operations. Here are jQuery functions created:
Animating the witdth ant the positon of the header when scrolling
When scrolling to create parallax effect for the header background image
Scroll Spy function used to animate the active links as when scrolling
Default bootstrap toggle navigation doesn’t closes, so I used to close it when a link is clicked on the responsive menu in order to avoid having little space on mobile screens.
Tooltip function used to display tooltips which where assigned buttons as attributes
It was used in order to send an AJAX send request, code from lab class.
used to change X3D element XML attributes such as changing texture, camera views, render mode, animating etc. Lightbox.js was used in order to create image modals for the gallery section.
PHP was used to create a like button and storing the amount of the likes in a json file.
Php open, read an encode function were used to communicate with the .json file.
Additionally php includes were used to control the components/parts of the site from one location.
(see the screen shot). These components were injected in to HTML with <?php include "/includes/"; ?>
This animation library was used for the logo and the header elements to fade in
Font library was used in order to display icons for the buttons which took placed on the X3D element container.