front-end
the goal
create a responsive, 3-page website to introduce beginners to the vast world of espresso utilizing 5 JavaScript/jQuery plugins.
why espresso?
the first step in creating this website was to decide on its topic. knowing that i had to utilize 5 JavaScript/jQuery plugins, i wanted to create a website on a subject that i was knowledgeable about, and thus showcased information in an interactive and entertaining way.
with this goal in mind, i decided to focus on one of my passions: espresso.
this choice allowed me to delve into its complexities and present its extensive information in an
engaging manner for newcomers.
animations and interactivity
the first plugin i implemented was the jQuery Background Video plugin, likely the simplest of the five. this plugin enabled me to add visually communicate the topic of each page as soon as the user lands on the website.
// when document loads...
$(document).ready(function(){
// apply these options to the element with ".my-background-video" class
$(".my-background-video").bgVideo({
// continually plays
pauseAfter: 0,
// fades video in
fadeIn: true,
// removes pause/play functionality
showPausePlay: false
});
});
next, i implemented the Isotope plugin to add filtering and sorting functionality to a list of recommended espresso tools. users can sort the list by name and pricing, and filter the products by priority.
this feature was designed with beginner baristas in mind, as they would likely frequent this page to determine which equipment they should purchase next. by integrating this functionality, i aimed to create a more user-friendly experience, allowing users to quickly find the most useful tools.
this plugin proved to be more complex than the others, as my initial HTML setup did not align with Isotope’s recommended markup. as a result, the setup took longer than anticipated so, as a result, i’ve learned to research about what resources i plan to utilize before i begin coding.
// when document loads...
$(document).ready(function() {
// create a variable called "$cards"
// element with ID "#cards" is assigned to variable
// apply following options to the variable
var $cards = $("#cards").isotope({
// defines the items in the collection
// this allows for Isotope to properly organize the cards
itemSelector: ".card",
// lays out cards in a vertical column
layoutMode: "vertical",
getSortData: {
// sort cards by data-category defined in each card's attribute
category: "[data-category]",
// sort cards by ".name" class defined in each card's attribute
name: ".name",
number: ".number"
}
});
// when a button is clicked in the ".button-group" div...
$(".button-group").on("click", "button", function() {
// creates a variable called filterValue
// assigns the data-filter attribute to filterValue according to the button clicked
var filterValue = $(this).attr("data-filter");
// filters the cards by the data-filter attribute
$cards.isotope({ filter: filterValue });
});
// when a button is clicked in the ".sort-by-button-group" div...
$(".sort-by-button-group").on("click", "button", function() {
// creates a variable called sortByValue
// assigns the data-sort-by attribute to sortByValue according to the button clicked
var sortByValue = $(this).attr("data-sort-by");
// filters the cards by the data-sort-by attribute
$cards.isotope({ sortBy: sortByValue });
});
});
i then added the ScrollReveal.js plugin, another simple and intuitive tool that animates elements as they enter the viewport. i utilized this plugin on the homepage to capture the user’s attention and, paired with tasteful comments, guide them to the CTA and ease them to the explore rest of the website.
// creates a variable called slideUp
// assigns following options
const slideUp = {
// sets element's distance from original position to 125% when revealed
distance: "125%",
// sets where element to originate from the bottom when revealed
origin: "bottom",
// sets opacity to 0 prior to being revealed
opacity: 0,
// sets animation duration to 1000ms
duration: 1000,
// sets time between each animation to 600ms
interval: 600
};
// when an element with class ".show" enters the viewport, apply the slideUp animation
ScrollReveal().reveal(".show", slideUp);
following that, i integrated the Swiper.js plugin, a powerful and versatile tool for creating responsive sliders. i designed the brew page to utilize this plugin as it showcases the instructions to pull a shot of espresso step-by-step, making it easier for the user to digest and follow along.
// creates a variable called swiper
// assigns element with class ".swiper" to variable
// applies following options to variable
const swiper = new Swiper(".swiper", {
// sets the direction which slides move on the x axis
direction: "horizontal",
// allows the last slide to loop back to the first slide on swipe
loop: true,
// applies the pagination functionality to the element with the class ".swiper-pagination"
pagination: {
el: ".swiper-pagination",
},
// applies the navigation functionality to the following elements
navigation: {
// sets the nextEl functionality to the element with the class ".swiper-button-next"
nextEl: ".swiper-button-next",
// sets the prevEl functionality to the element with the class ".swiper-button-prev"
prevEl: ".swiper-button-prev",
},
});
finally, i implemented the GSAP ScrollTrigger plugin to add dynamic animations to the brew page. i used ScrollTrigger to rotate coffee beans as the user scrolled, making for a delightful interaction with minimal code.
// sets elements with ".beans" class to transform: translateX(50%)
gsap.set(".beans", {xPercent:-50});
// creates a timeline called rotate
var rotate = gsap.timeline({
// when scrolling, scrub through the animation
// allows for animation to play forward when scrolled down, or play backward when scrolled up
scrollTrigger:{
scrub: 5
}
});
// sets end point of animation for elements with ".beans" class
.to(".beans", {
// sets end state of animation to a 720deg rotation
// allows for the elements to spin depending on scroll/scrub position
rotation: 720
});
