This article represents a simple animation of a ceiling fan that can be turned on and off by clicking a button. Let’s go through it step by step.
The code is written in HTML, CSS, and JavaScript and it is contained within the <html> tags.
HTML Structure: The HTML structure defines the layout and elements of the web page. In this code, it includes a <body> tag that contains a <div> element with the class “ceiling-container”. Inside the “ceiling-container” div, there are four more <div> elements, each representing a blade of the ceiling fan. Below the “ceiling-container” div, there is an <button> element with the id “fanButton” that serves as the button to turn the fan on and off.
CSS Styling: The CSS section provides styles and animations for the HTML elements. It starts with a <style> tag. Here are the key CSS rules used in this code:
- The background color of the
<body>element is set to a dark gray color (#333), and it has some padding. - An animation named “spin” is defined using the
@keyframesrule. This animation rotates an element from 0 degrees to 360 degrees over a duration of 6 seconds. - The “ceiling-container” class represents the circular container of the ceiling fan. It has a width and height of 300 pixels, a border-radius of 50% to make it circular, and it is positioned relative to its parent. It also has an inline-block display and is animated using the “spin” animation.
- The “:after” pseudo-element of the “ceiling-container” class is used to create a circular center part of the fan. It is absolutely positioned at the center of the container and has a gray background color (#444). It also has a box shadow to give it a 3D effect.
- The “ceiling-fan” class represents each blade of the fan. It has a background color of light gray (#ccc), a border radius of 5 pixels, and is absolutely positioned. It also has a box shadow to add depth to the blades.
- The “:after” pseudo-element of the “ceiling-fan” class is used to create the shape of the blade. It is positioned absolutely and has a background color of darker gray (#666).
- There are specific classes for different positions and orientations of the blades (e.g., “horizontal”, “vertical”, “left”, “right”, “top”, “bottom”). Each class has specific CSS rules to position and style the blades accordingly.
- The “.fan-on” and “.fan-off” classes control the ceiling fan’s animation. When the “fan-on” class is applied to the “ceiling-container” element, the animation plays, and when the “fan-off” class is applied, the animation pauses.
JavaScript Functionality: The JavaScript section is enclosed within <script> tags. It includes a script that adds interactivity to the web page. Here’s what the script does:
- It first retrieves the DOM elements related to the fan button and the fan container using the
getElementById()andquerySelector()methods, respectively. - An event listener is added to the fan button using the
addEventListener()method. It listens for a “click” event and executes the provided callback function when the button is clicked. - Inside the callback function, a check is performed to see if the fan container has the class “fan-on”. If it does, the “fan-on” class is removed, and the “fan-off” class is added to pause the animation. If the fan container doesn’t have the “fan-on” class, the opposite happens: the “fan-off” class is removed, and the “fan-on” class is added to resume the animation.
<html>
<style>
body {
background: #333;
padding: 30px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ceiling-container {
width: 300px;
height: 300px;
border-radius: 50%;
position: relative;
display: inline-block;
animation: spin 1s linear infinite;
}
.ceiling-container:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
width: 70px;
height: 70px;
margin-left: -35px;
margin-top: -35px;
background: #444;
box-shadow: inset 0 0px 0px 8px #444, inset 0 1px 5px 22px #383838;
}
.ceiling-fan {
display: block;
background: #ccc;
border-radius: 5px;
position: absolute;
box-shadow: inset 1px 1px 40px #555;
}
.ceiling-fan:after {
content: "";
position: absolute;
background: #666;
display: block;
}
.ceiling-fan.horizontal {
width: auto;
height: 50px;
top: 50%;
margin-top: -25px;
transform: skewX(20deg);
}
.ceiling-fan.horizontal:after {
top: 25%;
width: 15px;
height: 50%;
}
.ceiling-fan.vertical {
width: 50px;
height: auto;
left: 50%;
margin-left: -25px;
transform: skewY(20deg);
}
.ceiling-fan.vertical:after {
height: 15px;
width: 50%;
margin-left: 25%;
}
.ceiling-fan.left {
left: 0;
right: 50%;
margin-right: 45px;
border-radius: 50% 15px 15px 50%;
}
.ceiling-fan.left:after {
left: 100%;
}
.ceiling-fan.right {
right: 0;
left: 50%;
margin-left: 45px;
border-radius: 15px 50% 50% 15px;
}
.ceiling-fan.right:after {
right: 100%;
}
.ceiling-fan.top {
top: 0;
bottom: 50%;
margin-bottom: 45px;
border-radius: 50% 50% 15px 15px;
}
.ceiling-fan.top:after {
top: 100%;
}
.ceiling-fan.bottom {
top: 50%;
bottom: 0;
margin-top: 45px;
border-radius: 15px 15px 50% 50%;
}
.ceiling-fan.bottom:after {
bottom: 100%;
}
.fan-on {
animation-play-state: running !important;
}
.fan-off {
animation-play-state: paused !important;
}
#fanButton{
background-color: rgb(229, 229, 237);
cursor: pointer;
font-size: 20px;
}
#fanButton:hover{
background-color: rgb(51, 51, 205);
font-size: 25px;
}
</style>
<body>
<div class="ceiling-container">
<div class="ceiling-fan horizontal left"></div>
<div class="ceiling-fan horizontal right"></div>
<div class="ceiling-fan vertical rotated top"></div>
<div class="ceiling-fan vertical rotated bottom"></div>
</div>
<button id="fanButton"> On/Off</button>
<script>
var fanButton = document.getElementById('fanButton');
var fanContainer = document.querySelector('.ceiling-container');
fanButton.addEventListener('click', function () {
if (fanContainer.classList.contains('fan-on')) {
fanContainer.classList.remove('fan-on');
fanContainer.classList.add('fan-off');
} else {
fanContainer.classList.remove('fan-off');
fanContainer.classList.add('fan-on');
}
});
</script>
</body>
</html>
In summary, this code creates a visually appealing ceiling fan animation with blades rotating continuously. Clicking the “Turn Fan On/Off” button toggles the animation on and off by adding or removing specific CSS classes.
Read also:- Does HTML Is A Programming Language Or A Markup Language?
