Cara Membuat Font Variabel dengan Efek Kontrol Menggunakan Javascript dan Css

Apa Itu Font Variabel?

Font variabel adalah sistem format font OpenType yang mencakup kedalam sebuah teknologi baru, dan dapat disebut juga sebagai "OpenType Font Variations". Format font ini dikembangkan oleh empat perusahaan teknologi besar paling berpengaruh yang tidak lain yaitu:

1. Google
2. Apple
3. Microsoft
4. Adobe.

File font ini berisi sejumlah besar data tambahan. Font variabel dapat berisi seluruh glyph font, atau mesin terbang individu yang berkisar hingga 64.000 sumbu variasi, termasuk berat, lebar, miring, dan, dalam beberapa kasus, gaya tertentu, seperti Condensed, Bold, dll.

Banyak typographers berpendapat bahwa proses format font secara manual adalah cara yang paling profesional dan memuaskan untuk melakukan sesuatu.
Namun, font variabel adalah perkembangan alami untuk bidang tipografi, yang semakin mencerminkan perkembangan dalam desain web responsif. Desainer menuntut kenyamanan dan interaktivitas yang lebih dari alat desain mereka, dan font yang dapat Anda sesuaikan dengan gulungan slider memenuhi permintaan ini. Font yang bervariasi menawarkan fleksibilitas dan hasil yang nyata, yang menjadikannya sebagai hal baru yang menyenangkan bagi tipografer yang kekurangan waktu.

Nah, itulah sedikit pengertian tentang Font Variabel. Oke mari kita lanjut ke topik pembahasan kali ini, Cara Membuat Font Variabel Dengan Kontrol.

Sebelum itu, Disini kita memerlukan bahan-bahannya terlebih dahulu. Pastinya Anda sudah tau, apa saja yang diperlukan sebagai bahan untuk membuatnya. Ya benar saja, salah satunya yaitu:
1. Javascript
2. Css

Untuk langkah-langkahnya, Bisa simak baik-baik dibawah:

Pertama kita buat Css nya, atau Anda bisa kopi paste kodenya seperti yang tampak berikut ini.

@font-face {
 src: url('https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2');
 font-family:'Compressa VF';
 font-style: normal;
}
html {
 height:100%;
}
body {
 padding: 0;
 margin: 0;
 overflow: hidden;
 background-color: #211D26;
 display: flex;
 justify-content: center;
 height: 100%;
 align-items: center;
}

h1 {
 font-family:'Compressa VF';
 text-rendering: optimizeSpeed;
 color: #D11B3D;
 width: 100%;
 user-select: none;
 line-height: 0.8em;
 margin: 0 auto;
 text-transform: uppercase;
 font-weight: 100;
 text-align: center;
 width: 100vw;
}
h1 span {
 transform: translateY(-10px);
 user-select: none;
}
h1.flex {
 display: flex;
 justify-content: space-between;
}
h1.stroke span {
 position: relative;
 color: #211D26;
 line-height: inherit;
}
h1.stroke span:after {
 content: attr(data-char);
 -webkit-text-stroke-width: 3px;
 -webkit-text-stroke-color: #FE6730;
 position: absolute;
 left: 0;
 line-height: inherit;
 color: transparent;
 z-index: -1;
}

Selanjutnya, mari kita buat Javascriptnya. Dan berikut adalah kode-kodenya.

var maxDist;
var mouse = { x: 0, y: 0 };
var cursor = {
    x: window.innerWidth,
    y: window.innerHeight
};

Math.dist = function(a, b) {
    var dx = b.x - a.x;
    var dy = b.y - a.y;
    return Math.sqrt(Math.pow(dx, 2), Math.pow(dy, 2));
}

window.addEventListener("mousemove", function(e) {
    cursor.x = e.clientX;
    cursor.y = e.clientY;
});

window.addEventListener("touchmove", function(e) {
    var t = e.touches[0];
    cursor.x = t.clientX;
    cursor.y = t.clientY;
}, {
    passive: false
});

var Char = function(container, char) {
    var span = document.createElement("span");
    span.setAttribute('data-char', char);
    span.innerText = char;
    container.appendChild(span);
    this.getDist = function() {
        this.pos = span.getBoundingClientRect();
        return Math.dist(mouse, {
            x: this.pos.x + (this.pos.width / 1.75),
            y: this.pos.y
        });
    }
    this.getAttr = function(dist, min, max) {
        var wght = max - Math.abs((max * dist / maxDist));
        return Math.max(min, wght + min);
    }
    this.update = function(args) {
        var dist = this.getDist();
        this.wdth = args.wdth ? ~~this.getAttr(dist, 5, 200) : 100;
        this.wght = args.wght ? ~~this.getAttr(dist, 100, 800) : 400;
        this.alpha = args.alpha ? this.getAttr(dist, 0, 1).toFixed(2) : 1;
        this.ital = args.ital ? this.getAttr(dist, 0, 1).toFixed(2) : 0;
        this.draw();
    }
    this.draw = function() {
        var style = "";
        style += "opacity: " + this.alpha + ";";
        style += "font-variation-settings: 'wght' " + this.wght + ", 'wdth' " + this.wdth + ", 'ital' " + this.ital + ";";
        span.style = style;
    }
    return this;
}

var VFont = function() {
    this.scale = false;
    this.flex = true;
    this.alpha = false;
    this.stroke = false;
    this.width = true;
    this.weight = true;
    this.italic = true;
    var title, str, chars = [];

    this.init = function() {
        title = document.getElementById("title");
        str = title.innerText;
        title.innerHTML = "";
        for (var i = 0; i < str.length; i++) {
            var _char = new Char(title, str[i]);
            chars.push(_char);
        }
        this.set();
        window.addEventListener("resize", this.setSize.bind(this));
    }

    this.set = function() {
        title.className = "";
        title.className += this.flex ? " flex" : "";
        title.className += this.stroke ? " stroke" : "";
        this.setSize();
    }

    this.setSize = function() {
        var fontSize = window.innerWidth / (str.length / 2);
        title.style = "font-size: " + fontSize + "px;";
        if (this.scale) {
            var scaleY = (window.innerHeight / title.getBoundingClientRect().height).toFixed(2);
            var lineHeight = scaleY * 0.8;
            title.style = "font-size: " + fontSize + "px; transform: scale(1," + scaleY + "); line-height: " + lineHeight + "em;"
        }
    }

    this.animate = function() {
        mouse.x += (cursor.x - mouse.x) / 30;
        mouse.y += (cursor.y - mouse.y) / 30;
        requestAnimationFrame(this.animate.bind(this));
        this.render();
    }

    this.render = function() {
        maxDist = title.getBoundingClientRect().width / 2;
        for (var i = 0; i < chars.length; i++) {
            chars[i].update({
                wght: this.weight,
                wdth: this.width,
                ital: this.italic,
                alpha: this.alpha
            });
        }
    }
    this.init();
    this.animate();
    return this;
}

var txt = new VFont();
var gui = new dat.GUI();
gui.add(txt, 'flex').onChange(txt.set.bind(txt));
gui.add(txt, 'scale').onChange(txt.set.bind(txt));
gui.add(txt, 'alpha').onChange(txt.set.bind(txt));
gui.add(txt, 'stroke').onChange(txt.set.bind(txt));
// gui.add(txt, 'width').onChange(txt.set.bind(txt));
gui.add(txt, 'weight').onChange(txt.set.bind(txt));
gui.add(txt, 'italic').onChange(txt.set.bind(txt));

Jika semua sudah selesai, maka langkah selanjutnya adalah Anda simpan semua kode Css maupun Javascriptnya, setelah itu gabungkan keduanya dan coba jalankan.

Mungkin kurang lebih seperti itulah pembahasan hari ini yang bisa saya sajikan, Cara Membuat Font Variabel Dengan Kontrol Menggunakan Javascript Dan Css.

Virm Aditya

Berita teknologi informasi terkini

Share this post