Fadein And Fadeout in JavaScript

Fadein And Fadeout in JavaScript
Code Snippet:fade in fade out with vanilla js
Author: mohammad yazdanpanah
Published: October 24, 2023
Last Updated: October 24, 2023
Downloads: 194
License: MIT
Edit Code online: View on CodePen
Read More

Fadein and Fadeout effects are popular web design techniques that make elements on a web page gradually appear or disappear. This JavaScript code provides a simple way to create a “Fadein and Fadeout” effect for HTML elements. It works by gradually changing the opacity of the specified HTML element.

The “Fadein” function increases the opacity until it reaches 1, while the “Fadeout” function decreases the opacity until it reaches 0. These functions are helpful for creating smooth and gradual visibility transitions on web pages.

How to Create Fadein and Fadeout Using JavaScript

1. First, create the HTML structure where you want to apply the Fadein and Fadeout effects. The following code includes a sample HTML structure, which you can customize as needed.

<div class="row center">
    <div>
        <button onclick="faedIn(box_m)" class="btn btn-green">faed in</button>
        <button onclick="faedOut(box_m)" class="btn btn-blue">faed out</button>
    </div>
    <div class="box-f" id="box-f">
        mohammad yazdanpanah
    </div>

</div>

2. You can style your HTML elements using CSS to enhance the visual appeal. In the following code, several CSS classes are defined to style different elements. Feel free to modify these styles to match your website’s design.

.row-f {
    background: #83ffff;
    padding: 20px;
    margin: 20px;
}
.row{
    margin: 50px auto;

}

.string {
    background: #ff3099;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin: 10px;
}

.number {
    background: #12d3ff;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin: 10px;
}

.object {
    background: #0bc69b;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin: 10px;
}

.array {
    background: #5175c6;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin: 10px;
}

.boolean-1 {
    background: #dfc824;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin: 10px;
}
.center{
    text-align: center;
}
.btn {
    background: #b3b3b3;
    color: #fff;
    border: 0;
    padding: 10px 30px;
    font-size: 20px;
    cursor: pointer;
}
.btn-blue{
    background: #2eecff;
}
.btn-red{
    background: #da0808;
}
.btn-green{
    background: #62da08;
}
.result {
    margin: 20px auto;
    padding: 20px;
    width: 50%;
    background: #ecfff6;
}      
.box-f {
            background-color: #12d3ff;
            margin: 50px auto;
            padding: 100px 50px;
            width: 50%;
            font-size: 20px;
            color: #ffffff;
        }

3. Finally, add the following JavaScript code to your project. It selects the HTML element with the ID “box-f” and stores it in the variable box_f. You should replace “box-f” with the ID of the element you want to apply the effect to.

var box_m = document.getElementById('box-f');

    function faedIn(elem) {
        var elementattr = Number(getComputedStyle(elem).opacity);

        if (elementattr >= 1) {
            return;
        }
        elem.style.opacity = elementattr + 0.01;
        setTimeout(function () {
            faedIn(elem);
        }, 10);
    }
    function faedOut(elem) {
        var elementattr = Number(getComputedStyle(elem).opacity);

        if (elementattr <= 0) {
            return;
        }
        elem.style.opacity = elementattr - 0.01;
        setTimeout(function () {
            faedOut(elem);
        }, 10);
    }

That’s all! hopefully, you have successfully created Fadein and Fadeout in JavaScript. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X