Animate linear gradient - Web Design

Candil Code - Hallo Sobat Developers kembali lagi di blog saya yang sangat sederhana ini, hari ini kita akan belajar web design mebuat Animate linear gradient sebuah tutorial pemrograman dasar hanya menggunakan CSS, HTML dan Javascript yang bisa dijadikan refferensi pembelajaran untuk anda para pengunjung setia blog dan juga youtube channel Candil Code, Silahkan di simak dan perhatikan baik-baik code di bawah ini.

How To Create Animate linear gradient

HTML

CSS

Javascript

<div id="wrapper" ontouchstart="">
        
        <div class="leftGradient"></div>
        <div class="rightGradient"></div>
        <p class="btn">Hover Me!</p>
        
</div>

 * {
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: url("https://user-images.githubusercontent.com/26748614/112761401-6b9dd080-8ffb-11eb-801d-855c6af3de4a.jpg");
    background-size: cover;
    background-position: 50% 70%;
}


.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewX(-15deg);
    z-index: 9;
    font-family: 'Paytone One', sans-serif;
    font-style: italic;
    font-size: 40px;
    color: rgb(33, 33, 33);
    background: rgba(255, 255, 255, 0.5);
    padding: 10px 30px 15px 30px;
    border-radius: 7px;
    box-shadow: 7px 7px 10px 0px rgba(0,0,0,0.62);
    transition: all 1.3s cubic-bezier(.76,.07,.11,.88);
}

.btn:hover, btn:active {
    transform: translate(-50%, -50%) scale(1.2) skewX(-15deg);
    background: rgba(255, 255, 255, 0.8);
}

.leftGradient,
.rightGradient {
    height: 100vh;
    width: 50%;
    float: left;
}

.leftGradient {
    transform-origin: 100% 50%;
    transform: skewX(-15deg) scaleX(1.3);
    background: linear-gradient( to right,
            var(--color1) var(--offset1),
            var(--color2) var(--offset1) var(--offset2),
            var(--color3) var(--offset2) var(--offset3),
            var(--color4) var(--offset3) var(--offset4),
            var(--color5) var(--offset4) var(--offset5),
            var(--color6) var(--offset5) var(--offset6));
}

.rightGradient {
    transform-origin: 0% 50%;
    transform: skewX(-15deg) scaleX(1.3);
    background: linear-gradient(to left,
            var(--color1) var(--offset1),
            var(--color2) var(--offset1) var(--offset2),
            var(--color3) var(--offset2) var(--offset3),
            var(--color4) var(--offset3) var(--offset4),
            var(--color5) var(--offset4) var(--offset5),
            var(--color6) var(--offset5) var(--offset6));
}

var leftGradient = document.querySelector(".leftGradient");
var rightGradient = document.querySelector(".rightGradient");
var btn = document.querySelector(".btn");
var wrapper = document.querySelector("#wrapper");

//references to requestAnimationFrame - so we can stop it
var raf;

//width of the individual fragment in both gradients
var offset;

//use to change opacity of the color for active fragment in both gradients
var opacity;

//how many times did the animation (animateOut) execute
var numberOFexecute = 0;

//width of the browser viewpoint
var viewport;

//only for firefox browser  (to correct some bugs)
var firefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;


function buildingGradient() {
    opacity = 0.6;
    viewport = wrapper.clientWidth;

    if (firefox) offset = 260;
    else {   
        if (viewport > 1600) offset = 650;
        else if (viewport < 1600 & viewport > 1200) offset = 450;
        else if (viewport < 1200 & viewport > 850) offset = 350;
        else offset = 250;
    }

    //the loop execute for each fragment (color) of gradient
    for (var i = 1; i < 7; i++) {
        leftGradient.style.setProperty("--color" + Number(i), "rgba(0, 0, 0, " + opacity + ")");
        rightGradient.style.setProperty("--color" + Number(i), "rgba(0, 0, 0, " + opacity + ")");

        leftGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");
        rightGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");

        //painting different last colors in Gradiants
        if (i === 6) {
            leftGradient.style.setProperty("--color6", "rgba(209, 142, 64, 0.15)");
            rightGradient.style.setProperty("--color6", "rgba(208, 71, 113, 0.15)");
        }
        opacity = opacity - 0.1;
    }
}
buildingGradient();


window.addEventListener('resize', function () {
    buildingGradient();
}, false);


btn.addEventListener("mouseenter", function () {
    window.cancelAnimationFrame(raf); //stops the execution already started animation
    opacity = 0.6;
    //starting animateOut every 50ms (1000 / 20 = 50ms), using requestAnimateFrame
    Timer(animateOut, 20);
}, false);


btn.addEventListener("mouseleave", function () {
    window.cancelAnimationFrame(raf);
    numberOFexecute = 0;
    //starting animateIn every 25ms (1000 / 40 = 25ms), using requestAnimateFrame
    Timer(animateIn, 40);
}, false);



function animateOut() {
    for (var i = 1; i < 7; i++) {
        leftGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");
        rightGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");
    }

    //accelerate animation at the beginning
    if (numberOFexecute < 5) offset = offset - 30;
    else offset = offset - 8;
    numberOFexecute++;

    if (offset < 0) window.cancelAnimationFrame(raf);
}


function animateIn() {
    for (var i = 1; i < 7; i++) {
        leftGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");
        rightGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");
    }
    offset = offset + 10;

    if (firefox & offset > 250) window.cancelAnimationFrame(raf);
    else {  
        if (viewport > 1600 & offset > 650) window.cancelAnimationFrame(raf);
        else if (viewport < 1600 & viewport > 1200 & offset > 450) window.cancelAnimationFrame(raf);
        else if (viewport < 1200 & viewport > 850 & offset > 350) window.cancelAnimationFrame(raf);
        else if (viewport < 850 & offset > 250) window.cancelAnimationFrame(raf);
    }
}


//This function is used to slow down the execution of requestAnimationFrames to desired time
var Timer = function (callback, fps) {

    var now = 0;
    var delta = 0;
    var then = Date.now();
    var frames = 0;
    var oldtime = 0;
    fps = 1000 / (this.fps || fps || 60);

    return requestAnimationFrame(function loop(time) {
        //console.info("RaF");
        raf = requestAnimationFrame(loop);
        now = Date.now();
        delta = now - then;

        if (delta > fps) {
            // Update time stuffs
            then = now - (delta % fps);

            // Calculate the frames per second.
            frames = 1000 / (time - oldtime)
            oldtime = time;

            // Call the callback-function and pass our current frame into it.
            callback(frames);
        }
    });
};

Demo Video

---

Gunakan Live editor online : Live editor online untuk mencoba code diatas.

Saya membagikan code ini hanya untuk tujuan pengujian dan pembelajaran. Jika dirasa Artikel Yang saya tulis melanggar Hak Cipta Silahkan kirimkan pesan kepada Saya Melalui Halaman Kontak dan Saya akan menghapusnya sesegera mungkin.

Penutup

Semoga saja code Animate linear gradient bisa dijadikan refferensi pembelajaran untuk anda yang masih baru terjun ke dalam dunia web programming, silahkan di share, nantikan web design menarik lainnya hanya di blog ini, Semoga Bermanfaat and Hapy Ngoding.