Smooth Scroll Plugin:
This plugin adds smooth scrolling functionality to anchor links within the page.
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
Image Lightbox Plugin:
This plugin enables a lightbox effect for images, allowing users to view them in a larger overlay without leaving the page.
document.querySelectorAll('.lightbox-image').forEach(image => {
image.addEventListener('click', function () {
// Open lightbox overlay and display clicked image
});
});
Responsive Navigation Plugin:
This plugin creates a responsive navigation menu that collapses into a hamburger menu on smaller screens.
const menuButton = document.querySelector('.menu-button');
const navigation = document.querySelector('.navigation');
menuButton.addEventListener('click', function () {
navigation.classList.toggle('active');
});
Form Validation Plugin:
This plugin provides client-side form validation, ensuring that user inputs meet specific criteria before submitting.
const form = document.querySelector('.form');
const emailInput = document.querySelector('#email');
form.addEventListener('submit', function (e) {
if (!isEmailValid(emailInput.value)) {
e.preventDefault();
// Display error message for invalid email
}
});
function isEmailValid(email) {
// Validate email format
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
Scroll Reveal Plugin:
This plugin animates elements as they come into view while scrolling, adding a subtle and engaging effect.
document.addEventListener('scroll', function () {
const elements = document.querySelectorAll('.scroll-reveal');
elements.forEach(element => {
if (isElementInView(element)) {
element.classList.add('visible');
}
});
});
function isElementInView(element) {
const rect = element.getBoundingClientRect();
return (rect.top >= 0 && rect.bottom <= window.innerHeight);
}
Cookie Notice Plugin:
This plugin displays a notice at the top or bottom of the page to inform users about the use of cookies.
const cookieNotice = document.querySelector('.cookie-notice');
const acceptButton = document.querySelector('.accept-button');
acceptButton.addEventListener('click', function () {
cookieNotice.classList.add('hidden');
// Set cookie to remember user's preference
});
These code snippets demonstrate a variety of functionalities that can enhance the interactivity and user experience of a simple HTML, CSS, and JavaScript website.
Drop a like if it helps you.
