Animations and interactive effects can bring a website to life. This article examines the code behind a simple web page that uses CSS animations and JavaScript to create an engaging user experience.
My Website Under Construction
The code we're analyzing is part of my new personal website, currently under construction. My aim is to implement various interactive and innovative effects using modern web technologies.
Currently, the site consists of a single page with CSS animations and a JavaScript-created interactive switch. Soon, I'll be adding new sections and functionalities.
If you're interested in this topic, I invite you to visit the site and subscribe to stay updated on new content. I'm documenting the development process on my blog, so stay tuned!
👉 Visit my website under construction: https://enlabedev.com/
Let's continue analyzing some of the implemented code...
CSS File
The style.css file contains the styles that shape the page's design and animations. Let's examine some key points:
:root {
--light: #FFFFFF;
--dark: #000;
--red: #CC0000;
--red-light: #FF3333;
--gray-dark: #333333;
--gray-light: #CCCCCC;
--gray-lighter: #EEEEEE;
--blue:#0066CC;
--blue-light: #33CCFF;
--animation-time: 2s;
--width: 160px;
--height: 160px;
}
CSS Animations
Next, we define CSS animations for later use. For example, this animation moves a border horizontally:
@keyframes border-top {
0% {
left: 0;
}
50% {
width: 100%;
}
100% {
left: auto;
right: 0;
}
}
@keyframes border-right {
0% {
top: 0;
}
50% {
height: 100%;
}
100% {
top: auto;
bottom: 0;
}
}
@keyframes border-bottom {
0% {
right: 0;
}
50% {
width: 100%;
}
100% {
left: 0;
right: auto;
}
}
@keyframes border-left {
0% {
bottom: 0;
}
50% {
height: 100%;
}
100% {
top: 0;
bottom: auto;
}
}
Classes and Media Queries
There are also CSS classes like .d-block, .text-normal that allow for reusable styles. And media queries for responsive design:
@media (min-width: 768px) {
.title {
font-size: 2.5rem;
}
.roles__item {
display: inline-block;
}
}
HTML File
The index.html file contains the webpage's structure and content. The HTML follows a standard structure: DOCTYPE, html, head, body, etc.
Using HTML5 Tags for SEO
The code uses some HTML5 semantic tags that can improve the website's SEO:
Headings
Heading tags <h1> are used to define content hierarchy and structure
<h1 class="text-normal title">
<span class="roles__item animate__animated animate__fadeInUp">Engineer</span>
<span class="roles__item animate__animated animate__fadeInUp"><strong>Experience</strong></span>
<span class="roles__item animate__animated animate__fadeInUp">Creativity</span>
</h1>
The .text-normal and .title classes standardize the header size. By default, h1, h2, h3... tags come bold, we only needed to bold the word experience and used it as a device
SVG inline
For icons, inline SVGs are used, which can be manipulated with CSS and JS:
<svg class="power-off">
<use .../>
</svg>
JavaScript File
Finally, the script.js file contains the JavaScript code that adds interactivity to the page
Event Listeners
Event listeners are added to the switch and body
powerSwitch.addEventListener('click', function() {
powerSwitch.classList.toggle('power-off');
powerSwitch.classList.toggle('power-on');
body.classList.toggle('dark');
body.classList.toggle('light');
});
Timers
Timers (setTimeout) are used to sequence animations and transitions
setTimeout(() => {
// code executed after X seconds
}, 500)
Class Manipulation
CSS classes are added/removed using classList to toggle styles and animations.
element.classList.remove('animate__fadeInUp')
element.classList.add('animate__fadeOutDown')
Promises
Promises are used to chain effects asynchronously and avoid timing issues.
doAnim1()
.then(() => doAnim2())
.then(() => doAnim3())
In Summary
CSS Animations: We've defined key animations that enable visual effects such as moving and changing borders, creating an attractive dynamic around the central logo. These animations are crucial for capturing the user's attention from the outset.
Power On/Off Effect: Through JavaScript, we've implemented an interactive switch that toggles between light and dark modes. This effect is not only a central part of the user experience but also demonstrates modern web development practices to enhance site accessibility and visual comfort.
Responsive Design: By using media queries and reusable CSS classes, we ensure the site looks and functions perfectly across a wide range of devices. This underscores the importance of adaptive web design in today's digital world.
JavaScript Interactivity: The use of event listeners and CSS class manipulation through JavaScript allows us to create an interactive webpage. From sequential animations to color mode transitions, each element has been thoughtfully designed to enhance the user experience.
Accessibility and SEO: Through the use of HTML5 semantic tags and a clear content structure, we focus on accessibility and search engine optimization (SEO), ensuring our site is not only attractive but also functional and easy to find.
Conclusions
This article analyzed the source code behind an interactive web page with CSS animations and JavaScript.
We saw how elements like CSS variables, keyframe animations, transitions, reusable classes, and media queries bring design to life in an adaptable manner.
We also explored the use of HTML5 semantic tags, event listeners, timers, and promises in JavaScript to achieve engaging user experiences.
Performance, accessibility, and inclusion considerations are key when building modern, interactive websites.
I invite you to explore the complete source code at this GitHub repository:
https://github.com/enlabedev/personal-site
With these basic concepts, you can start experimenting and creating your own interactive effects on websites. Feel free to learn more and share your creations! You can find me at @enlabedev.
Top comments (0)