7 Tips Desain Website Keren Untuk Pemasaran Digital Anda

Sekarang ada banyak konten-konten yang menarik di internet. Merek-merek, baik besar maupun kecil, saling berdesak-desakan untuk mendapatkan ruang dan menjangkau audiens mereka, selalu berinovasi dan menciptakan lebih banyak konten dalam upaya untuk tetap menjadi perhatian utama bagi pengguna internet.

Apa yang pemasar harus sadari adalah kenyataan bahwa pemasaran digital adalah tentang kualitas, bukan konten. Untuk membuat konten Anda menjadi berkualitas, menonjol dan menarik untuk calon pelanggan, Anda perlu mengikuti beberapa aturan sederhana. Dan disini saya akan coba memberikannya kepada Anda, 7 tips desain website yang Anda butuhkan yang akan meningkatkan pemasaran digital Anda tanpa perlu terlalu banyak upaya dari pihak pemasar dan desainer.

1. Palet Warna Minimalis
Menerapkan berbagai warna atau banyak warna ke visual Anda adalah cara terbaik untuk ke depannya. Tapi itu tidak lagi menjadi sebuah alternative untuk desain ini. Untuk pemasar, baik yang berpengalaman maupun yang baru, melihat melalui panduan tentang warna merek akan membuatnya terlihat jelas bahwa warna harus dipilih dengan cermat.

Selain itu, tren terbaru adalah menggunakan blok warna tunggal dalam citra digital. Blok warna tidak hanya terlihat menarik, tetapi membuat konten visual Anda menonjol di umpan sosial. Dengan sebagian besar pemasaran digital masih diliputi oleh foto, menggunakan gambar dengan satu warna solid memiliki peluang besar untuk diperhatikan dalam sebuah feed.

Contoh di bawah ini menunjukkan foto dengan rona warna solid. Kombinasi tersebut membuat perpesanan menonjol dan meningkatkan dampak gambar itu sendiri.

Penggunaan warna secara kreatif dapat meningkatkan pemasaran digital Anda dan membuat konten Anda menonjol dalam lanskap pemasaran digital.

2. Kontras Tinggi
Tips desain lain untuk menggunakan warna agar konten Anda segera dikenali adalah menggunakan warna yang kontras. Ini adalah cara yang bagus untuk menarik perhatian audiens, karena sebagian besar platform media sosial memiliki latar belakang putih atau hitam yang solid. Semburan warna akan segera menarik perhatian. Plus, kontras warna juga merupakan cara yang bagus untuk menyoroti informasi yang Anda ingin orang perhatikan terlebih dahulu.

Contoh postingan Facebook ini memanfaatkan latar belakang pink paling kontras dengan warna-warna bersahaja dari foto di samping. Perhatikan bagaimana warna juga membuat teks lebih menonjol.

Dengan menggunakan warna yang kontras, visual yang Anda gunakan dalam pemasaran digital Anda akan langsung dikenali dan dengan demikian akan meningkatkan keterlibatan yang sudah Anda buat.

3. Teks Tebal
Dengan munculnya Instagram, orang akan berharap teks menjadi kurang fokus dalam pemasaran digital. Tetapi sebaliknya, cara-cara kreatif menggunakan teks dalam visual inilah yang dapat membuat dampak besar pada keterlibatan konten Anda.

Meskipun begitu, untuk memasukkan sebagian besar pesan Anda ke dalam visual Anda, penggunaan teks yang minimal adalah cara yang harus dilakukan dalam lanskap pemasaran saat ini. Anda tidak perlu memadatkan visual Anda karena hal itu akan menyebabkan audiens Anda kehilangan pesan sepenuhnya. Simpan teks di minimum ketika Anda menggunakannya pada posting media sosial atau ketika Anda membangun header blog.

Contoh visual di bawah ini menunjukkan bagaimana Anda dapat membuat teks Anda menonjol dalam desain. Dengan warna yang minimal, dan teks besar akan memfokuskan pesan dalam postingan.

Anda juga harus memastikan bahwa teks tersebut besar dan dapat dibaca, sehingga dapat dilihat dengan mudah. Pilihan tipografi Anda dapat berdampak signifikan pada pesan Anda, sesuatu yang perlu Anda perhatikan ketika memilih font merek dan membuat konten visual.

Dengan penggunaan teks yang benar pada visual, Anda akan dapat membuat dampak yang lebih besar pada audiens Anda dan meningkatkan keterlibatan pemasaran digital Anda.

4. Membuat Bingkai Belakang
Media sosial dulu memiliki sistem pembingkaian untuk visualnya — subjek gambar Anda biasanya ada di tengah, dengan semua konten yang terkandung dengan rapi di dalam gambar.

Penggunaan ruang yang kacau menjadi jauh lebih menarik, dengan visual off-center dan grid rusak pilihan yang disukai. Untuk pemasar, penggunaan tata letak yang bervariasi juga menjamin lebih banyak pemaparan kepada audiens — sementara sebagian besar masih menggunakan citra berbingkai, dengan begitu visual asimetris Anda akan mendapatkan lebih banyak perhatian.

Contoh di bawah ini diputar cepat dan longgar dengan bingkai persegi Instagram, yang segera membuatnya menonjol dalam umpan media sosial.

Penghapusan pembingkaian terstandarisasi memungkinkan kreativitas yang lebih besar di pihak desainer dan memastikan bahwa audiens melihat visual Anda ketika mereka menemukannya di timeline mereka.

5. Branding Fleksibel
Membuat logo yang menarik untuk merek Anda adalah suatu hal yang harus Anda kerjakan untuk menentukan desain Anda. Bukankah itu sepenuhnya meniadakan titik pembuatan logo di tempat pertama? Tidak di pasar digital saat ini. Branding Anda harus fleksibel untuk diselaraskan dengan berbagai kesempatan — seperti logo pelangi untuk Pride — tetapi tetap dikenali sebagai merek Anda.

Selain itu, Anda juga perlu memikirkan ukuran logo Anda, karena akan terlihat berbeda pada platform yang berbeda. Logo Anda harus cukup fleksibel agar pas dengan thumbnail gambar profil sosial, agar tetap terlihat oleh audiens.

Logo Anda mungkin telah menjadi bagian dari citra perusahaan Anda selama bertahun-tahun, tetapi sekarang saatnya untuk melihat bagaimana menyesuaikannya dengan keadaan yang berubah.

6. Konsisten
Menurut statistik merek terbaru, konsumen perlu berinteraksi dengan merek Anda 5-7 kali sebelum mereka menyadarinya. Itu berarti bahwa semua 5-7 kali, branding Anda harus jelas dan terlihat.

Konsisten dan sekreatif mungkin dengan visual Anda adalah kunci untuk membuat konten yang berkesan, jika Anda tidak menggunakan branding dengan cara atau bentuk apa pun pada semua upaya pemasaran digital Anda, seluruh latihan akan menjadi berantakan dan sia-sia.

7. Gunakan Template
Salah satu cara utama untuk membuat konten yang konsisten namun fleksibel adalah dengan menggunakan template media sosial. Sebagian besar alat online memiliki beberapa opsi yang dapat disesuaikan dan memberi Anda akses ke ikon, ilustrasi, dan palet warna yang memperkaya pemasaran visual Anda. Anda juga dapat mendesain kit merek Anda sendiri pada alat-alat ini sehingga branding Anda secara konsisten muncul di semua visual Anda, seperti yang Anda lihat dari posting di bawah ini.

Kesimpulannya:
Kreativitas dan konsistensi sekarang menjadi aspek terpenting dari pemasaran visual. Dengan tujuh tips desain sederhana ini akan membantu konten visual Anda menjadi lebih terlihat, dan meningkatkan pemasaran digital Anda.

Selengkapnya

Panduan Cara Membuat Animasi Css Bergerak Dengan Animation Iteration Count Part #1

Halo para blogger mania, selamat beraktivitas. Bagaimana kabar Anda semua, apakah sehat selalu? Mudah-mudahan semuanya sehat selalu dan berada dalam lindungan-NYA, Amin.

Kabar gembira untuk Anda semua para pecinta animasi Css. Khususnya pada tutorial kali ini, saya akan sedikit memberikan panduan bagaimana cara membuat animasi Css dengan jumlah iterasi atau bisa disebut juga "Animation Iteration Count".

Tetapi animasi ini hanya dapat berjalan sekali dikarenakan tidak adanya animasi iterasi didalamnya. Nah, lalu Bagaimana jika kita ingin animasi ini berjalan berkali-kali atau bahkan tidak berhenti? Dalam hal memuat animasi, kita mungkin menginginkan animasi menjadi tak terbatas. Maka dari itu, disinilah animasi-iterasi-hitung berperan.

Mungkin kita langsung saja untuk cara dan langkah-langkah pembuatannya, bisa Anda lihat dibawah.

Yang pertama, perhatikan jika kita ingin animasi berjalan dengan jumlah iterasi sebanyak 5 kali, maka kita harus menambahkan iteration countnya, seperti contoh dibawah.

div {
   animation-name: spin;
   animation-duration: 2s;
   animation-iteration-count: 5s;
}

Untuk animation-iteration-count juga dapat berjalan tanpa batasan waktu, seperti berikut ini.

div {
   animation-name: spin;
   animation-duration: 2s;
   animation-iteration-count: infinite;
}

Jika Anda sudah mengerti, mari kita coba buat animasi ini menjadi berjalan berkali-kali atau tanpa berhenti. Seperti penampakan berikut ini:

div {
  -webkit-animation-name: spin;
          animation-name: spin;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

Jika sudah, kita lanjut ke langkah berikutnya.

<style>
  * {
    box-sizing: border-box;
  }
  html, body {
    align-items: center;
    background: linear-gradient(45deg, rebeccapurple, dodgerblue);
    display: flex;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    padding: 0;
    width: 100vw;
  }
  div {
    background-color: #2eec71;
    height: 100px;
    width: 100px;
  }
</style>
<div></div>

Untuk style Css nya, bisa Anda ubah sesuai keinginan masing-masing. Ubah dibagian background-color dan body.

Sampai disini, dapat dipastikan bahwa kita sudah selesai membuatnya. Untuk menjalankanya, Anda coba akses dengan browser masing-masing dan lihat bagaimana hasilnya.

Selengkapnya

Cara Membuat Visualisasi Animasi Kanvas Abstrak Untuk Keperluan Desain Website/Blog

Selamat datang kembali diblog saya, silahkan duduk dengan tenang dan santai, sambil menyimak pembahasan hari ini yaitu tentang membuat visualisasi animasi abstrak. Animasi ini lumayan bagus kalau menurut saya, untuk keperluan desain website/blog Anda.

Jika Anda bertanya apa itu visualisasi?
Maka saya akan menjawab, Visualisasi yang dimaksud adalah sebuah rekayasa dalam pembuatan gambar, diagram atau animasi untuk penampilan suatu informasi. Secara umum, visualisasi dalam bentuk gambar baik yang bersifat abstrak maupun nyata telah dikenal sejak awal dari peradaban manusia. Contoh dari hal ini meliputi lukisan di dinding-dinding gua dari manusia purba, bentuk huruf hiroglip Mesir, sistem geometri Yunani, dan teknik pelukisan dari Leonardo da Vinci untuk tujuan rekayasa dan ilmiah.

Pada saat ini visualisasi telah berkembang dan banyak dipakai untuk keperluan ilmu pengetahuan, rekayasa, visualisasi disain produk, pendidikan, multimedia interaktif, kedokteran, dll. Pemakaian dari grafika komputer merupakan perkembangan penting dalam dunia visualisasi, setelah ditemukannya teknik garis perspektif pada zaman Renaissance. Perkembangan bidang animasi juga telah membantu banyak dalam bidang visualisasi yang lebih kompleks dan canggih.

Oke, mungkin kita langsung saja. Untuk membuatnya Anda hanya perlu menyimaknya baik-baik dan apa saja yang harus dipersiapkan untuk memulai langkah-langkahnya.

Yang pertama kita buat terlebih dahulu adalah Css nya, silahkan perhatikan dibawah ini:

body {

  background: #2D314D;

  overflow: hidden;

}

canvas {

  display: block; 

  left: 50%;

  margin: -200px 0 0 -200px;

  position: absolute;

  top: 50%;

}

Jika sudah, langsung saja Anda simpan. Selanjutnya buat file Html nya.

<canvas id="canvas" width="400" height="400"></canvas>

Dan langkah berikutnya yaitu, kita buat Javascript nya.

/*=============================================================================*/ 

/* Smooth Trail

/*=============================================================================*/

var smoothTrail = function(c, cw, ch){

  

/*=============================================================================*/ 

/* Initialize

/*=============================================================================*/

  this.init = function(){

    this.loop();

  };  

  

  /*=============================================================================*/ 

  /* Variables

/*=============================================================================*/

  var _this = this;

  this.c = c;

  this.ctx = c.getContext('2d');

  this.cw = cw;

  this.ch = ch;

  this.mx = 0;

  this.my = 0;

  

  //trail

  this.trail = [];

  this.maxTrail = 200;

  this.mouseDown = false;

  

  this.ctx.lineWidth = .1;

  this.ctx.lineJoin = 'round';

  

  this.radius = 1;

  this.speed = 0.4;

  this.angle = 0;

  this.arcx = 0;

  this.arcy = 0;

  this.growRadius = true;

  this.seconds = 0;

  this.milliseconds = 0;

  

  /*=============================================================================*/ 

  /* Utility Functions

/*=============================================================================*/    

  this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);};

  this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};

  

  /*=============================================================================*/ 

  /* Create Point

/*=============================================================================*/

  this.createPoint = function(x, y){     

    this.trail.push({

      x: x,

      y: y      

    });

  };

  

  /*=============================================================================*/ 

  /* Update Trail

/*=============================================================================*/

  this.updateTrail = function(){     

    

    if(this.trail.length < this.maxTrail){

      this.createPoint(this.arcx, this.arcy);

    }     

    

    if(this.trail.length >= this.maxTrail){

      this.trail.splice(0, 1);

    }     

  };

  

  /*=============================================================================*/ 

  /* Update Arc

/*=============================================================================*/

  this.updateArc = function(){

    this.arcx = (this.cw/2) + Math.sin(this.angle) * this.radius;

    this.arcy = (this.ch/2) + Math.cos(this.angle) * this.radius;     

    var d = new Date();

    this.seconds = d.getSeconds();

    this.milliseconds = d.getMilliseconds();

    this.angle += this.speed*(this.seconds+1+(this.milliseconds/1000));

    

    if(this.radius <= 1){

      this.growRadius = true;

    } 

    if(this.radius >= 200){

      this.growRadius = false;

    }

    

    if(this.growRadius){

      this.radius += 1; 

    } else {

      this.radius -= 1; 

    }

  };

  

  /*=============================================================================*/ 

  /* Render Trail

/*=============================================================================*/

  this.renderTrail = function(){

    var i = this.trail.length;     

    

    this.ctx.beginPath();

    while(i--){

      var point = this.trail[i];

      var nextPoint = (i == this.trail.length) ? this.trail[i+1] : this.trail[i];

      

      var c = (point.x + nextPoint.x) / 2;

      var d = (point.y + nextPoint.y) / 2;      

      this.ctx.quadraticCurveTo(Math.round(this.arcx), Math.round(this.arcy), c, d);

      

      

      

    };

    this.ctx.strokeStyle = 'hsla('+this.rand(170,300)+', 100%, '+this.rand(50, 75)+'%, 1)'; 

    this.ctx.stroke();

    this.ctx.closePath();

    

  };   

 

  

  /*=============================================================================*/ 

  /* Clear Canvas

/*=============================================================================*/

  this.clearCanvas = function(){

    //this.ctx.globalCompositeOperation = 'source-over';

    //this.ctx.clearRect(0,0,this.cw,this.ch);

    

    this.ctx.globalCompositeOperation = 'destination-out';

    this.ctx.fillStyle = 'rgba(0,0,0,.1)';

    this.ctx.fillRect(0,0,this.cw,this.ch);     

    this.ctx.globalCompositeOperation = 'lighter';

  };

  

  /*=============================================================================*/ 

  /* Animation Loop

/*=============================================================================*/

  this.loop = function(){

    var loopIt = function(){

      requestAnimationFrame(loopIt, _this.c);

      _this.clearCanvas();

      _this.updateArc();

      _this.updateTrail();

      _this.renderTrail();       

    };

    loopIt();     

  };

  

};

/*=============================================================================*/ 

/* Check Canvas Support

/*=============================================================================*/

var isCanvasSupported = function(){

  var elem = document.createElement('canvas');

  return !!(elem.getContext && elem.getContext('2d'));

};

/*=============================================================================*/ 

/* Setup requestAnimationFrame

/*=============================================================================*/

var setupRAF = function(){

  var lastTime = 0;

  var vendors = ['ms', 'moz', 'webkit', 'o'];

  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){

    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];

    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];

  };

  

  if(!window.requestAnimationFrame){

    window.requestAnimationFrame = function(callback, element){

      var currTime = new Date().getTime();

      var timeToCall = Math.max(0, 16 - (currTime - lastTime));

      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);

      lastTime = currTime + timeToCall;

      return id;

    };

  };

  

  if (!window.cancelAnimationFrame){

    window.cancelAnimationFrame = function(id){

      clearTimeout(id);

    };

  };

};   

/*=============================================================================*/ 

/* Define Canvas and Initialize

/*=============================================================================*/

  if(isCanvasSupported){

    var c = document.createElement('canvas');

    c.width = 400;

    c.height = 400;   

    var cw = c.width;

    var ch = c.height; 

    document.body.appendChild(c); 

    var cl = new smoothTrail(c, cw, ch);    

    

    setupRAF();

    cl.init();

  }

Bila semuanya sudah selesai, sekarang waktunya Anda untuk melihat bagaimana hasilnya dan seperti apa bentuknya.

Seperti itulah Visualisasi dari Animasi Kanvas Abstrak ini. Semoga Anda menikmati apa yang sudah saya sajikan tadi, dan jangan lupa juga dishare kepada teman-teman lainya agar bermanfaat bagi semuanya.

Terimakasih.

Selengkapnya

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.

Selengkapnya

Membuat Animasi Gradasi Warna Menggunakan Linear Gradient Dan Radial Gradient

Oke untuk kesempatan kali ini, kembali saya akan membagikan sebuah animasi. Namun berbeda dengan sebelumnya, disini saya mencobanya dengan objek dan menggunakan gradasi. Ini terbilang sungguh bagus, kenapa bagus? Karena animasi ini telah dibalut dan dirancang dengan warna gradient atau gradasi yang begitu indah.

Apa itu gradient???

Gradient adalah suatu konsep penggabungan dua warna atau lebih. Pada umumnya ada 2 tipe warna gradient atau gradasi yang dapat di buat dengan css3 yaitu, linear gradient dan radial gradient. Linear gradient adalah gradient yang berbentuk warna yang berdampingan tapi efeknya sangat lembut. Jadi 2 atau beberapa warna akan terlihat menyatu, baik itu atas ke bawah atau kiri ke kanan. Sedangkan radial gradient adalah warna gradient yang memiliki pusat yang bertitik ditengah, jadi seperti membentuk lingkaran dalam pewarnaannya.

Sekarang Sobat sudah mengertikan, apa itu gradient atau gradasi..

Nah sebelum itu, disini kita memerlukan CSS/SCSS dan HTML sebagai bahanya.
Oke, mungkin kita langsung saja dan sobat bisa lihat kode-kodenya dibawah ini.

#. HTML

<div class="container">

  <h1>Seotechman CSS Gradients</h1>

  <p>Solid to solid color | Grainy blend only | Reduced banding | Pure CSS Gradients<br><span>Click/tap & hold on items for more colors</span></p>

  <div class="item item--sphere item--color1"></div>

  <div class="item item--sphere item--color2"></div>

  <div class="item item--sphere item--color3"></div>

  <div class="item item--sphere item--color4"></div>

  <div class="item item--pudding item--color5"></div>

  <div class="item item--droplet item--color6"></div>

  <div class="item item--vase item--color7"></div>

  <div class="item item--egg item--color8"></div>

  <div class="item item--cell"></div>

</div>

#. CSS/SCSS

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);

$size: 130px;

$scale: 1.05;

$border-radius: $size / 2;

$grad-position: 100% 0;

$grad-start: 25%;

$grad-stop: 65%;

$duration: 3.5s;

$noise: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAgVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtFS1lAAAAK3RSTlMWi3QSa1uQOKBWCTwcb6V4gWInTWYOqQSGfa6XLyszmyABlFFJXySxQ0BGn2PQBgAAC4NJREFUWMMV1kWO5UAQRdFk5kwzs/33v8Cunr7ZUehKAdaRUAse99ozDjF5BqswrPKm7btzJ2tRziN3rMYXC236humIV5Our7nHWnVdFOBojW2XVnkeu1IZHNJH5OPHj9TjgVxBGBwAAmp60WoA1gBBvg3XMFhxUQ4KuLqx0CritYZPPXinsOqB7I76+OHaZlPzLEcftrqOlOwjeXvuEuH6t6emkaofgVUDIb4fEZB6CmRAeFCTq11lxbAgUyx4rXkqlH9I4bTUDRRVD1xjbqb9HyUBn7rhtr1x+x9Y0e3BdX31/loYvZaLxqnjbRuokz+pPG7WebnSNKE3yE6Tka4aDEDMVYr6Neq126c+ZR2nzzm3yyiC7PGWG/1uueqZudrVGYNdsgOMDvt1cI8CXu63QIcPvYNY8z870WwYazTS7DqpDEknZqS0AFXObWUxTaw0q5pnHlq4oQImakpLfJkmErdvAfhsc7lod0DVT4tuob25C0tQjzdiFObCz7U7eaKGP3s6yQVgQ/y+q+nY6K5dfV75iXzcNlGIP38aj22sVwtWWKMRb7B5HoHPaBvI1Ve5TSXATi66vV6utxsV+aZNFu+93VvlrG/oj8Wp67YT8l+Oq6PjwdGatFm7SEAP13kE0y9CEcf9qhtEWCMIq5AGq71moEAI9vrmFcmO8+7ZyDnmRN/VUaFkM2ce8KuBGFzDMmY6myLfQGra2ofgHhbJRXuRDZ4H+HmliWBHXQ0ysLGfv6FetbxtxzRgIZWjIsGVFl5imPXeyvVyayNek+dSWzjXd4t310YBdaF8sXeKs481PjsXbAtIru2+wHbv3GVh3sQY6Dnu6pF3pZ714VYdDi9A5GkXR/6xgaZN/tpQ8wVV3zeBuB+njoBNE4wjc+uA523ysXGd/P2sntmOb3OdHNWP5OVrxD3eJHdtH8QVkEIAqCor3hReR96yqt6PkTQfenllooQ447h6tOrnnuzwA8fMpq+jqg1oW8fTYYIncAYpVeTvkEFr/khQSbjoE8ykx9049OkE5MQEO9lC24tT7DwThQgf4Fhf8nGgAo3GYaON3crODpOr2pu5dBABz69t7F5yJBBo+r6QJdeLDWEoO7r1tceR3haA7gc7eZrCvpxSXXeKpo4P+hRixo9DeOFbqQVjKyWfBg9pnrEZKzK7R437YTTwhfoySG/YOCt3fs4aXlU3FjKortqQ6XyXaD0+Y/8VoqpyU9TRW45eN4oBxAH8Y/jLnNXfELJW+/p/MgO9Z+mBli2qqAP7dV/Arc2+YZRZwtBW8/p32y5ZsEuCS4O5AAgfR7Dde7zhiGfgvurQkfAXIrUG61rmxc2EZo18ph4vaWZI+QM0JdsbNlBJlPlwf9uguujQJy0j7TgTHdtRnjybTg55Hkk9S6l2rpYahumSewKHVosa1bh2Y6r9JGkdKvIDN/eeAwScrfjoLkCxWJuFZQ53FNP5w9XbQd1HhgHcVB/0fATG3sUUid1RTfc2+7pZVKldFSsaEK0v4k90tapQOk2HIbMhaJQtrUEL5+3sDanh8sOpbYRoQoqXWu6SQcUTQL9jzOrXNPWCJwXge4U7tlU1hkF012cAmvp8llQxf1IEMcw14pURxVOWATz4ITnYQjuF+vDXg5hgoiqXzO6mS91FQUBheURHIJxUeU1i3P0WOMpsm7vFYk0JJi/Ev+X3FwYD69cARPuP5GIc0PxoAFjcLRbNur0iMTrQmBBNYJ2ngU4x7SWfdTRl52Bqv7LmYW3C1CyTCPTHeWWIAM/Whm32COHsaj+2UQ739XB9t6NV0o9E9b7CW3XNiXzi9e0KiE+3rntukdIDBWrU2jsfQWuyFJRANxq8StHVv1JPy2C3Byco7qdNbASrnNXZ8G0L/Wp/pif4Ai9aEZ9Bb+TRx+REBdGlkF/s0dUdMSMr+6YCbuGxqPWdzcdqutvqkBzCksFcwAtjf55TeuH79M6AQa7r5PLeXxMFIlQKrXP9VJ275WGX+ptpf+tvTDBsecPnYQAlAWrVbRVJ7K2pRHwIjtSpbX96Y/lbKk6ZWXlBmh15r8yAWQsYxXgBOXYMAfHnUXF+rDqnB8bXDRtAn7bCziIqetSboK3NexMePvsCRLvmsoREA+kH8j4HWFpnNEaWgOmR7xyXHfTaz3slHc/YA6H6tl/L8d5tPcIwwD0tjvRaq3Y5BmYBSDClpv0VIX4s8D0XK3sPdpAb94HjPLkgboEz9EdZATW6ZdcmQvtKUwoWw+nAVKA7IcdY1UHnvNnIBplKci+knzewLz5/GGnzkGuuGky+0LTjtGBGR85EQICDqKChnm5pH3Z44nnWAk1YRdyu3g7QoFZ0h8jkr2ffjKmi+Qvsp+9GvNGZHmgW+YQAGUw7PPt8IPKbdy432vhKtRJjKWcSqq7helj81o3nfmaxVZ7Sqie8OOBk9WsyTD/ab7fQ5aWwQeJvnH6+ayo4IdIkOSBJjzXkgr+1TPhAx1AXDsxtCCj3TzQTLA1p782f7a8vdgPfwwrXmZxxbqo2h+6Zlo6mcMY4V7cFBOLm17VCvx9Qa2tAnkxEB+KYyQgbgAAnmNDOdOO6y2Cb+lke1MWQc9o+EMdQf7ubIG3Ek8GZ4k1PtGjbhwgOMPp5Em59JMVk/jU8/aF73Xcrd3UBNZyueQu0/xz2aGtZT8CRziOax2BWFXaeDzgZNV7oRtUzFoijoETf3xkAFFk3OMb7SgPh5wxU1+MygDIp9gZChH2qEcpgLh8pBIK90PXT1ZSU+ZExFK4Vm4GL/J7+K13lS5dQkW4HQwl6GX4yLqu8GhGWS2k75yel5IZIfFNdAL0NpKr2N5dQesBnxa42DLgJd6agS1jJsp1mO1dip7PU4P6diLLoTsZ4m3Q0QweiqeFfIGPLgF6v6mSVv6xe85VBD/1Mpe3AurRbcJ9SEo8NszNVy8rOCEexyIFcJRvYAlI/wk2I7r3p60FFLQXoH2q9xri/m41svRPbW0/EnPn2DWsmk0IiPpB60aa3+hiFfWuC8ZvWKEd9LxAk3HcOof6d77RewPaPsGw5lQAHcZN2vx1448u9pLfMLGQ3BSRRjBzRhKt7HcCw/7aqjtCDs5q76b4ZGphxN2th1WeXYlfnozX3ebKtX4Te11hf1tZP1diiGjIDAB1cR4Sb9rcFPC/nBARjlgDxd+tCBb1t91j71xJcgGjT3g/dUFnXXNiDrxkyoHANPk58ACPUa42hj8tgGrhiXOCmygxFZBiT2wyAJTDJ4wJEPmp6JIrDaSWYNqv4xH2wwdSTGYb3E0pXnS39nmLUsqoVZxzSoegqzd0o06wdbTXsaHGL+IF4JtIcXddTcD/dCd8hVf+fWPSV553kjMmMEULLS8HcgmptDO955dLGX78PjiDA6IsTHPm5IA6bc5ha0gaGkoEttXuxU11B2dOJ65/Q08tEF1+Y9cr2Nh/VECfQ33GyvR/gsdN1LuIeLpKMCAF2yRr769g9/4aJLZNRI71m2S91+Kp+Q0zubTcxoG2/6gm1Q79wkMj2XNO2ui7nWw8ULtu27CCvqTGX2PffD+xcwgh/TrOKvGZMM5jRFGDTn4NO/lwnDR/GY/waDZtkWDUPI0O8ztcFVqp6r2ZW+2bvkJ3raptYagFqu95VdIaml2CIp6CKets34x+fH2C+zH4cVFO7vj+6k2FU39PtRhWluYeZ3gDz1TLB9K2v7SD9gJU1qDxoRDrAWcrFGLyndhdtd0505+gEP79adK8fmFCWNYC+ahzVNcRH79E8dA1iqX/N0qq22xcOc20ALxLDspEj4QCFBQMgaIwoKbxr0Bd7Sbws6GiRK6tqoPfpiCle23axejRLyO1I+ahsEpWrzT5ZsCyS5RcY9jMfENFxSnhKsrfW8JHH6/rdQUMfmQPT3Uz9gY0C/pu1yuCnrPUvio0a1qMEosA/EwIzzid7cqsAAAAASUVORK5CYII=');

@mixin dithered-gradient($position, $start, $stop, $color) {

  background: radial-gradient(circle at $position, transparent $start, $color $stop);

  mask: $noise, radial-gradient(circle at $position, transparent $start, #000 ($stop + 10%));

}

@mixin radial-gradient-item($position, $start, $stop, $color) {

  background: repeat-x $position / 50% 100% radial-gradient(circle at 50% 0, transparent $start, $color $stop);

}

@mixin item-unicolor($color) {

  color: $color;

  &::before { @include radial-gradient-item($grad-position, $grad-start, $grad-stop, $color); }

}

@mixin item-bicolor($color1, $color2) {

  background-color: $color2;

  @include item-unicolor($color1);

}

@mixin item-tricolor($color1, $color2, $color3) {

  color: $color3;

  background-color: $color1;

    &::before { @include radial-gradient-item($grad-position, 15%, 45%, $color2); }

    &::after { @include radial-gradient-item($grad-position, 50%, 75%, $color3); }

}

$light: #ffecd2;

$dark: #222;

$color1: #7f5fff;

$color2: #fa709a;

$color3: #ff9673;

$color4: #fec440;

$color5: #72f9c1;

$color6: #5193ff;

$color7: #fd2472;

$color8: #5e21d6;

$color9: #e7627d;

$color10: #3d1635;

html {

  height: 100%;

  font-family: 'Roboto Condensed', sans-serif;

  color: $dark;

}

body {

  margin: 0;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100%;

  background-color: #effeff;

  &::before, &::after {

    content: "";

    position: absolute;

    top: 0; left: 0;

    z-index: -1;

    display: block;

    width: 100%;

    height: 100%;

  }

  

  &::before {

    @include dithered-gradient(50%, 30%, 60%, #6cc8ff)

  }

  

  &::after {

    mask-image: $noise, linear-gradient(45deg, #000 0%, transparent 25%, transparent 75%, #000 100%);

    background: linear-gradient(45deg, #6d6dff 10%, transparent 25%, transparent 75%, #fbffbe 90%);

  }

}

h1 {

  margin: 0 0 10px 0;

  text-transform: uppercase;

}

p {

  margin: 0;

}

span {

  line-height: 1.8em;

  color: $color2;

}

.container {

  box-sizing: border-box;

  max-width: 1024px;

  padding: 20px;

  text-align: center;

}

.item {

  position: relative;

  display: inline-block;

  margin: 20px 35px;

  width: $size; height: $size;

  background-color: #ffecd2;

  box-shadow: -5px 18px 25px -15px;

  overflow: hidden;

  transition: all 0.2s ease-out;

  cursor: pointer;

  image-rendering: pixelated;

  -webkit-tap-highlight-color: rgba(0,0,0,0);

  -webkit-tap-highlight-color: transparent;

  &::before {

    content: "";

    position: absolute;

    display: block;

    top: 0; left: 0;

    height: 100%; width: 400%;

    mask: $noise, radial-gradient(circle at 50% 0, transparent 5%, #000 ($grad-stop + 15%)) 0 0 / 50% 100%;

  }

  

  &:hover {

    transform: scale($scale);

    &.item::before, &.item::after {

      animation: spin-round $duration linear infinite;

    }

  }

  

  &:active {

      animation: hue-rotate 7s infinite;

    }

  &--sphere {

    border-radius: 50%;

  }

  

  &--egg {

   width: $size * 0.77;

   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

  &--pudding {

    width: $size; height: $size;

    border-radius: 50% 50% 10% 10%;

    

    &::after {

      content: "";

      position: absolute;

      top: 0;

      display: block;

      top: 0; left: 0;

      height: 100%; width: 400%;

      mask: $noise, radial-gradient(circle at 50% 0, transparent 55%, #000 85%) 0 0 / 50% 100%;

    }

  }

  &--droplet {

    width: $size * 0.77; height: $size * 0.77;

    border-radius: 5% 100% 50% 65% / 5% 65% 50% 100%;

    transform: rotate(45deg);

    box-shadow: 5px 18px 25px -15px;

  

    &:hover {

      transform: rotate(45deg) scale($scale);

    }

  }

  &--vase {

    position: relative;

    width: floor($size * 0.62); height: $size;

    border-radius: 40% 40% 70% 70% / 100%;

    

    &::after {

      content: "";

      position: absolute;

      top: 0;

      display: block;

      top: 0; left: 0;

      height: 100%; width: 400%;

      mask: $noise, radial-gradient(circle at 50% 0, transparent 55%, #000 90%) 0 0 / 50% 100%;

    }

  }

  

  &--cell {

    width: $size; height: $size;

    border-radius: 50%;

    color: #ff4d5d;

    background: radial-gradient(circle at 100% 0, #ffa878 5%, transparent 75%), #ff4d5d;

    

    &::before  {

      top: 50%; left: 50%;

      transform: translate(-50%, -50%);

      width: ceil($size * 0.69); height: ceil($size * 0.69);

      border-radius: 50%;

      background: radial-gradient(circle at 0 75%, transparent 20%, #98000e $grad-stop);

      mask: $noise, radial-gradient(circle at 50%, transparent $grad-start, #000 ($grad-stop + 10%));

    }

    &:hover {

        animation: spin-flat-thick $duration linear infinite;

      

      &.item--cell::before {

         animation: spin-flat $duration linear infinite;

      }

      

      &:active {

      animation: spin-flat-thick $duration linear infinite, hue-rotate 7s linear infinite;

      }

    }

  }

  &--color1 {

    @include item-unicolor($color1);

  }

  

  &--color2 {

    @include item-unicolor($color2);

  }

  

  &--color3 {

    @include item-unicolor($color3);

  }

  

  &--color4 {

    @include item-unicolor($color4);

  }

  &--color5 {

    @include item-tricolor($light, $color9, $color10);

  }

  &--color6 {

    @include item-bicolor($color6, $color5);

  }

  &--color7 {

    @include item-tricolor($color4, $color7, $color8);

  }

  

  &--color8 {

    @include item-unicolor($dark);

  }

}

@keyframes spin-round {

  from { transform: translateX(0); }

  to { transform: translateX(-50%); }

}

@keyframes spin-flat {

  0% { transform: translate(-50%, -50%) rotateY(0); }

  25% { transform: translate(-50%, -50%) rotateY(90deg); }

  50% { transform: translate(-50%, -50%) rotateY(180deg); }

  75% { transform: translate(-50%, -50%) rotateY(270deg); }

  100% { transform: translate(-50%, -50%) rotateY(360deg); }

}

@keyframes spin-flat-thick {

  0% { transform: scale($scale) rotateY(0); }

  25% { transform: scale($scale) rotateY(75deg); }

  50% { transform: scale($scale) rotateY(0); background: radial-gradient(circle at 0 0, #ffa878 5%, transparent 75%), #ff4d5d; }

  75% { transform: scale($scale) rotateY(75deg); }

  100% { transform: scale($scale) rotateY(0); background: radial-gradient(circle at 100% 0, #ffa878 5%, transparent 75%), #ff4d5d; }

}

@keyframes hue-rotate {

  from { filter: hue-rotate(360deg); }

    to { filter: hue-rotate(0deg); }

}

Jika ingin mencobanya, silahkan saja. Sobat tinggal copy paste seluruh kodenya, atau sobat bisa ubah sesuai keinginan.

Itulah Animasi Gradasi Warna Menggunakan Linear Gradient Dan Radial Gradient, ala Seotechman. Terimakasih buat yang sudah selalu menyempatkan diri untuk membaca postingan-postingan diblog saya ini. Jika postingan ini menarik, sobat bisa bagikan keteman-teman lainnya dan jangan lupa Rate This Article!

Selengkapnya

Animasi CSS Keyframe dengan Efek Jeda, Lengkap Beserta Tutorialnya

Pernahkah Anda bertanya-tanya tentang bagaimana kita dapat menjeda animasi ketika dimulai? Kita dapat menggunakan properti tunda animasi tetapi hanya akan menunda pada dimulainya animasi, setelah animasi dimulai akan itu akan terus bernyawa. Setelah animasi keyframe CSS dimulai, ini tidak dapat menghentikannya kecuali kita menggunakan javascript. Jadi bagaimana kita bisa membuat animasi untuk bisa dijeda di antara keyframe?

Solusinya adalah, disini kita akan membuat keyframe dengan nilai yang sama dan beberapa matematika. (apa !? matematika !? 😢) ya untuk mengatur waktu keyframe kita secara akurat.

Sebagai contoh gambar di atas, ia menghidupkan untuk 1s dan berhenti selama 2s dan iterates 4 kali.

Pertama, kita perlu mendapatkan total waktu animasi.

total waktu = (waktu animasi + jeda animasi) * jumlah iterasi total waktu = (waktu animasi + jeda animasi) * jumlah iterasi total waktu = (1d + 2d) * 4 total waktu = 12dt Hitung persentase (%) dari kerangka kunci animasi waktu animasi (%) = (waktu animasi / total waktu) * 100 animasi jeda (%) = (animasi jeda / total waktu) * 100 waktu animasi (%) = (waktu animasi / total waktu) * 100 waktu animasi (%) = (1/12) * 100 waktu animasi (%) = 8,33% (8,33% = 1dari waktu) jeda animasi (%) = (jeda animasi / total waktu) * 100 jeda animasi (%) = (2/12) * 100 animasi jeda (%) = 16,67% (16,67% = 2s dari waktu)

Inisialisasi nilai persentase (%) dari kerangka tombol animasi.

Selanjutnya kita akan menginisialisasi nilai persentase dengan menambahkan waktu animasi dan persentase jeda animasi kemudian menambahkannya hingga iterasi ke-4.

0% (0d) + 8,33% (1d animate) = 8,33% (1d) 8,33% (1d) + 16,67% (2d jeda) = 25% (3d) [iterasi pertama] 25% (3s) + 8,33% (1s bernyawa) = 33,33% (4s) 33,33% (4d) + 16,67% (2d jeda) = 50% (6s) [iterasi kedua] 50% (6s) + 8,33% (1s hidup) = 58,33% (7s) 58,33% (7d) + 16,67% (2d jeda) = 75% (9d) [iterasi ke-3] 75% (9s) + 8,33% (1s bernyawa) = 83,33% (10s) 83,33% (10d) + 16,67% (2d jeda) = 100% (12d) [iterasi ke-4] Sekarang kita punya, 0% → 8,33% → 25% → 33,33% → 50% → 58,33% → 75% → 83,33% → 100%

total waktu = 12dt waktu animasi (%) = 8,33% (8,33% = 1dari waktu) animasi jeda (%) = 16,67% (16,67% = 2s dari waktu) persentase kerangka kunci animasi 0% → 8,33% → 25% → 33,33% → 50% → 58,33% → 75% → 83,33% → 100%

Karena animasi berputar untuk 360deg dan memiliki 4 iterasi.

nilai keyframe = 360/4 = 90deg Kami memiliki 90deg per iterasi, untuk mendapatkan deg di setiap iterasi maka kami akan menambahnya dengan 90deg. 0deg + 90deg = 90deg [iterasi pertama] 90deg + 90deg = 180deg [iterasi ke-2] 180deg + 90deg = 270deg [iterasi ke-3] 260deg + 90deg = 360deg [iterasi ke-4]

Sekarang kita punya,

0deg → 90deg → 180deg → 270deg → 360deg [deg di setiap iterasi]

Sekarang kita memiliki semua nilai yang kita butuhkan, dan mari kita tambahkan Css ini ke kode kita.

.planet{
   animation: rotateEarth 12s infinite
   }
   @keyframes rotateEarth {
     0% {
         transform: rotate(0deg)
           }
             8.33% {
                 transform: rotate(90deg)
                   }
                     25% {
                         transform: rotate(90deg)
                           }
                             33.33% {
                                 transform: rotate(180deg)
                                   }
                                     50% {
                                         transform: rotate(180deg)
                                           }
                                             58.33% {
                                                 transform: rotate(270deg)
                                                   }
                                                     75% {
                                                         transform: rotate(270deg)
                                                           }
                                                             83.33% {
                                                                 transform: rotate(360deg)
                                                                   }
                                                                     100% {
                                                                         transform: rotate(360deg)
                                                                           }
                                                                           }

Seperti yang Anda lihat dalam kode Css di atas, ada beberapa keyframe yang memiliki nilai yang sama. Kita dapat menulis lebih sedikit kode dengan memisahkan koma keyframe yang memiliki nilai yang sama.

@keyframes rotateEarth {
  0% {
      transform: rotate(0deg)
        }
          8.33%, 25% {
              transform: rotate(90deg)
                }
                  33.33%, 50% {
                      transform: rotate(180deg)
                        }
                          58.33%, 75% {
                              transform: rotate(270deg)
                                }
                                  83.33%, 100% {
                                      transform: rotate(360deg)
                                        }
                                        }

Itulah langkah-langkah dan cara membuat, Animasi CSS Keyframe dengan Efek Jeda Di Antara Keyframe. Terimakasih atas waktu Anda yang sudah menyempatkan diri untuk membaca artikel saya. Semoga bermanfaat dan selamat mencobanya.

Selengkapnya

30 Daftar Font Futuristik Gratis Dan Modern Yang Wajib Anda Coba

Jika Anda sedang mencari jenis-jenis font yang bagus untuk keperluan pribadi dan desain pada web Anda, maka pada kesempatan hari ini saya akan membagikannya dari beberapa koleksi font modern ini. Roundup ini penuh dengan font yang ramping, berkelas, dan serbaguna sangat cocok untuk semua jenis desain modern, dari situs web hingga materi cetak.

Saya juga ingin memastikan Anda memahami apa arti "bebas" sebenarnya terkait font dan tipografi. Desainer tipe terkadang menawarkan font mereka sepenuhnya gratis untuk penggunaan pribadi dan komersial. Beberapa hanya menawarkannya gratis untuk penggunaan pribadi dan yang lain menawarkan versi demo dengan versi lengkap tersedia setelah membeli lisensi. Font modern dalam koleksi ini gratis, jadi pastikan Anda membaca detail perancang sebelum menggunakannya dalam desain Anda.

Jika Anda berminat dan ingin menggunakannya, silahkan langsung saja simak dibawah ini:

30 Daftar Font Futuristik Dan Modern

#. Leoscar

Perangkat font modern yang dirancang oleh Faridul Haque ini memiliki versi serif dan sans serif. Perangkat sans serif yang terlihat rapi dan bersih dengan kurva gaya dan sudut lurus yang berbeda. Versi serif memiliki ekstensi tipis dan kecil dengan konektor kurva yang rapi. Huruf kecil dalam Leoscar bulat dan mungil dan dapat bekerja dengan baik dalam paragraf kecil.

#. Azonix

Font minimalis geometris ini modern dalam semua cara. Semua huruf berukuran sempurna untuk disatukan pada garis genap. Azonix adalah font huruf besar yang dirancang oleh Mixo! dan ini pilihan yang bagus untuk tajuk berita dan logo. "A" tanpa garis silang memberi Azonix tampilan yang sangat unik.

#. Munich

Font huruf besar minimalis adalah alat yang hebat untuk banyak jenis desain. Munich memiliki tampilan dan nuansa yang unik, sempurna untuk tajuk dan logo yang kuat. Huruf yang memanjang dan kental dalam font ini memiliki garis silang rendah yang memberinya basis visual yang kuat. Desain unik dari Q dan Z adalah tambahan yang bagus untuk set ini.

#. Manrope

Ketika datang ke tipografi modern fungsional, Manrope adalah jenis huruf sans serif dari Pixel Surplus dan memiliki keterbacaan yang sangat baik dalam huruf besar dan kecil. Digit geometris yang menyertai font ini sangat cocok untuk tampilan jam, nomor telepon, dan aplikasi. Last but not least, Manrope memiliki Cyrillic dan kebanyakan variasi Latin dan ligatur.

#. One Day

Font bergaya stensil modern yang dirancang oleh Nawras Moneer ini hanya hadir dalam satu huruf besar. Sebagian besar huruf dalam himpunan memiliki garis pemutusan yang memberikan nuansa stensil. Terminal bundar memberikan font ini kualitas yang santai, membuatnya bagus untuk sebagian besar jenis proyek desain. One Day sangat cocok untuk logo atau media sosial grafik. Ini bukan font untuk teks yang panjang tetapi lebih untuk judul dan subtitle.

#. Kayak

Terkadang beberapa jenis font dirancang agar terlihat sederhana dan tidak terlalu menonjol. Akan tetapi, Kayak memiliki kualitas yang mudah dengan basis yang berat, dan bekerja dengan baik dalam ukuran lebih tinggi dari 10 poin karena koneksi kecil pada ascenders dan descenders. Jack Harvatt mendesain untuk kesederhanaan dan keindahan - font ini tidak berbeda.

#. Coves

Jenis huruf modern lain yang cantik dari Jack Harvatt yaitu Coves. Coves adalah salah satu favorit sepanjang masa. Semua huruf bulat didasarkan pada lingkaran sempurna dan kurva non rapi dan bersih. Garis miring bersudut pada huruf "e" memberikan font yang lebih detail dari finesse.

#. Coco Gothic

Font san geometris modern ini sangat cocok sampai ke detail kurvanya. Karena font ini sangat fashionable, elegan, sederhana dan ramping. Coco hadir dalam 6 bobot dan memiliki huruf alternatif untuk huruf "a" dan "g." Ini adalah font serbaguna yang cantik dan didesain oleh Cosimo Lorenzo Pancini.

#. Pier

Pier Sans adalah font geometris off dengan kurva rendah dan garis lurus. Font ini dirancang demgan sebaik mungkin agar terlihat bagus pada judul yang besar dan paragraf panjang. Muncul dalam sepuluh bobot dan gaya untuk banyak kemungkinan. Kurva besar pada "P" dan "R" membuatnya terlihat ramah dan mudah dibaca.

#. Big John Pro

Keluarga font ini tumbuh dari satu font geometris modern ke seluruh jenis huruf saat perancang menambahkan ke koleksi. Seluruh tipe keluarga font yang satu ini memang benar-benar gratis untuk penggunaan pribadi dan komersial dan sangat fleksibel sehingga dapat digunakan untuk hampir semua hal.

#. Sequel

Font dengan gaya yang sederhana dan bersih seperti Sekuel harus selalu ada di gudang tipografi Anda. Kenapa? Karena font ini memiliki tepi yang bulat dan desain yang kental, bagus untuk segala jenis proyek dengan rasa santai dan mantap. Sequel adalah huruf lengkap yang cocok untuk judul dan grafik media sosial.

#. Corn

Corn adalah salah satu jenis font yang manis dan sederhana. Font demo gratis adalah bobot reguler dan tampak hebat pada grafik media sosial serta logo dan judul. Seluruh keluarga font ini memiliki 14 gaya, dari tipis hingga ultrabold. Garis silang rendah dan kurva besar membuat font ini menjadi indah dan mudah digunakan dan tambahan yang bagus untuk koleksi Anda.

#. Cornerstone

Cornerstone menyebut dirinya font modular tanpa basa-basi. Sedikit memanjang dan dengan dimensi kotak matematis, font ini sangat bagus untuk logo, header dan spanduk yang membutuhkan nuansa modern yang menarik.

#. Noir

Ini adalah font modern hebat lainnya yang akan terlihat bagus, apabila digunakan pada judul dan grafik media sosial Anda. Pada terminalnya berujung runcing dan lurus dengan garis melintang rendah dan kurva terkondensasi.

#. Tenre

Font terbaru ini dirancang sebagai kombinasi yang memiliki gaya inline di bawah set huruf besar biasa. Dengan tiga variasi, bagian huruf dapat dipertukarkan untuk membuat berbagai desain lainnya. Tenre, font yang dirancang oleh Jacopo Severitano, memiliki nuansa yang menarik dan dapat digunakan untuk logo, kop surat, dan desain modern unik lainnya.

#. Vanity

Jenis huruf yang dirancang oleh Hendrick Rolandez ini tersedia gratis dalam semua bobot dan gaya. Dari italic tipis hingga ultrabold, Vanity adalah serif modern klasik yang siap menghiasi majalah, penyebaran mode, kartu pos promosi, dan papan iklan modern berkelas.

#. UniSans

Tidak ada yang lebih modern - dalam arti desain klasik - selain font sans geometris dengan garis-garis yang bersih dan goresan tebal yang saling menempel satu sama lain. Uni Sans adalah font semua-kap yang dirancang oleh Fontfabric yang hadir dalam dua bobot dan sangat kompatibel dengan segala jenis proyek desain modern.

#. Kontanter

Fon baru seperti Kontanter sangat bagus untuk desain modern dan unik yang membutuhkan keunggulan nyata dan rasa khusus bagi mereka. Huruf-huruf dalam font ini dari Fontfabric semua memiliki garis dekoratif diagonal atau garis silang tambahan untuk efek tambahan.

#. Fredoka

Font yang geometris dan bulat sempurna ini dirancang oleh Milena Brandau sangat cantik dan sempurna untuk segala jenis proyek modern. Apa yang membuat Fredoka unik adalah kumpulan dingbat super imut dan integrasinya dengan font Google. Fredoka bagus untuk situs web, aplikasi, dan desain digital apa pun.

#. Arkhip

Tidak jarang para desainer harus mencari berhari-hari untuk menemukan font yang bagus dan gratis yang mendukung huruf Rusia. Arkhip adalah seperangkat huruf yang indah yang dapat digunakan dalam bahasa Inggris dan Rusia. Kurva-kurva kecil yang menghiasi huruf-huruf geometris membuat font ini indah modern dan mudah digunakan.

#. Moon

Font modern ini berbentuk bundar dan memiliki terminal-terminal bulat sempurna dan nuansa geometris yang lembut. Muncul dalam tiga bobot yang sangat berbeda, baik dalam huruf besar dan kecil. Font ini memiliki mesin terbang untuk banyak bahasa juga. Moon adalah font serba guna untuk desain menyenangkan dan santai.

#. Headache

Font modern ini memiliki dua versi yang dapat digunakan bersama untuk membuat variasi yang tak terbatas. Headache adalah jenis huruf yang sebagian besar terlihat normal tetapi dengan sedikit lilitan dalam bentuk garis dekoratif diagonal. Font ini juga sangat cocok untuk tajuk utama, logo, dan bahan branding.

#. Odachi

Font modern yang menarik dari gaya klasik biasanya sangat mudah digunakan, khususnya visual. Font gaya kuas ini dengan nuansa antik Jepang sangat cocok untuk grafik media sosial atau desain kaos yang menyenangkan dengan kutipan yang menarik.

#. Bondi

Modern, futuristik dengan sedikit nuansa Art Deco, Bondi adalah font baru yang menyenangkan untuk semua jenis desain yang menyenangkan. Disisi kirinya terdapat garis tebal, sedangkan sisi kanan tipis. Huruf "S" memiliki ketebalan di sebelah kanan, untuk menciptakan ilusi berat di bagian bawah dari pada bagian atas yang berat.

#. Celestia

Font modern bergaya futuristik seperti Celestia ini tidak cocok untuk digunakan dalam proyek desain grafis. Font geometris bundar dengan garis diagonal terisi ini sangat bagus untuk poster acara musik atau penyebaran mode. Celestia dapat memberikan desain apa pun nuansa modern dan futuristik yang menyenangkan.

#. Calibre

Font kental seperti Calibre cukup populer akhir-akhir ini. Karena calibre sangat cocok untuk proyek logo dan tulisan kreatif. Kualitas font yang memanjang ini sangat menarik sehingga pasti ada di gudang desain Anda.

#. Forma

Lembut dan bulat, geometris dan halus. Forma adalah font yang tepat untuk desain penuh warna dan luar biasa. Huruf "g" dan "y" memiliki pemisahan unik dalam descender, sehingga membuat set huruf modern ini agak unik. Dengan detail yang kuat, membuat font Forma sangat berkesan.

#. Gilroy

Modern, geometris dan sempurna, Gilroy adalah font yang bagus untuk semua jenis desain yang rapi. Ini adalah font all-cap indah lainnya untuk koleksi Anda yang dapat menghemat banyak pengguliran font.

#. Potra

Font futuristik modern karya Alejo Bergman ini memiliki banyak potensi untuk berbagai jenis desain. Dengan garis ganda dan titik akhir, huruf-hurufnya terlihat hampir tiga dimensi secara abstrak. Potra sangat bagus tidak hanya untuk desain galaksi tetapi juga untuk setiap grafis yang ingin memiliki keunggulan di atas yang lain.

#. Nordic

Jenis huruf ini menyenangkan karena memiliki dua wajah dan tiga bobot. Desainer Yana Bereziner telah menciptakan font modern yang indah dengan garis-garis menarik dan potongan diagonal. Font ini memiliki dua gaya unik dalam tiga bobot berbeda yang berfungsi untuk semua jenis proyek kreatif.

Itulah 30 Daftar Font Futuristik Modern dan gratis yang wajib Anda coba, versi seotechman. Jika menurut Anda artikel ini menarik, silahkan dishare ke teman-teman lainnya.

Terimakasih.

Selengkapnya

5 Alat Mockup UI Web Gratis Terbaik

Dengan bantuan Mockups, Anda dapat dengan cepat mendapatkan kesan visual pertama dari situs web masa depan Anda. Anda tidak perlu menunggu untuk desain layar akhir dan sebagai gantinya Anda dapat memvalidasi ide-ide Anda dalam hitungan menit. Jadi pada awal proyek, Anda akan mendapatkan lebih banyak loop koreksi, menghemat uang dan keberanian Anda.

Disini saya akan memperkenalkan kepada Anda 5 alat mockup UI Web terbaik secara gratis, yang bukan hanya untuk pribadi saja, tetapi desainer web profesional juga dapat menggunakannya untuk menganalisis tata letak, desain, dan fungsionalitas situs web baru. Anda bisa mendapat untung dari keuntungan dan membuat maket Anda sendiri dengan sangat cepat.

Dan, inilah kelima alat mockup tersebut:

1. Balsamiq Mockups

Alat Mockup Balsamiq, atau Balsamiq Studios, mungkin merupakan alat mockup UI Web paling terkenal secara gratis dalam daftar. Ini ditawarkan sekali sebagai aplikasi desktop, diinstal secara lokal pada PC, dan kemudian berlanjut sebagai aplikasi web. Anda dapat menguji kedua versi gratis selama 30 hari sebelum memutuskan untuk upgrade keversi berbayar. Setelah aplikasi dimuat, Anda dapat memilih dari berbagai elemen siap pakai untuk membuat maket situs Anda. Elemen-elemen ini dikelompokkan ke dalam kategori yang bermakna dan Anda dapat dengan mudah menyeretnya ke permukaan gambar.

Sesampai di sana, Anda dapat memformatnya sesuai keinginan Anda. Secara keseluruhan, Balsamiq adalah alat mockup yang sangat komprehensif dan mudah digunakan. Sayangnya, petunjuk di bagian bawah versi demo dengan cepat melompat di mata Anda. Ada tertulis bahwa versi demo secara otomatis me-reset setiap beberapa menit. Itu berarti, setelah sekitar 2-3 menit pekerjaan Anda akan hilang dan Anda dianjurkan untuk menggunakan "versi nyata". Balsamiq dengan versi demo gratis tidak disarankan, tetapi dengan versi uji coba 30 hari, Anda dapat melakukan banyak hal.

2. Mockplus

Mockplus adalah alat mockup UI web all-in-one secara gratis yang memungkinkan Anda membuat mockup untuk seluler (Android & iOS), Desktop (PC & Mac) dan aplikasi web, yang membantu memastikan mockup tertentu cocok dengan semua praktik terbaik desain. Meskipun begitu banyak alat mockup Web UI gratis dan banyak yang menawarkan fungsi yang sangat kuat, Mockplus sebenarnya mudah digunakan oleh pemula. Dengan 200 komponen yang dibuat dengan baik, Anda tidak perlu menguasai pengetahuan pengkodean atau pemrograman apa pun sebelum dapat menggunakannya. Sebagai gantinya, Mockplus membuatnya agar lebih mudah dipergunakan untuk semua orang dan membuat mockup desain halaman dalam beberapa menit. Sementara itu Mockplus juga merupakan pilihan ideal untuk membuat maket interaktif yang biasa dilihat dalam desain pengalaman pengguna.

Setiap orang memiliki uji coba gratis 7 hari. Jika Anda seorang siswa, guru atau pendidik yang terlibat dalam desain UI / UX atau posisi terkait pelatihan desain perangkat lunak lainnya, Anda bisa mendapatkan uji coba GRATIS versi Mockplus Pro. Kirim permintaan Anda dan mereka akan segera menghubungi Anda. Patut disebutkan bahwa setiap pengguna yang membeli "Lisensi Abadi Tanpa Batas" dapat menikmati semua fitur Mockplus Pro seumur hidup, tanpa kedaluwarsa. Dan Anda bisa mendapatkan semua versi untuk setiap adanya pembaruan baru, kecil atau besar, tanpa biaya tambahan untuk peningkatan atau pemeliharaan di masa mendatang. Setiap pengguna memiliki ruang penyimpanan cloud 500MB.

3. Mockplus iDoc

Mockplus iDoc adalah kolaborasi desain yang berguna dan alat handoff untuk desainer, pengembang dan manajer produk untuk mengunggah, prototipe, komentar, tes, iterate dan desain handoff online secara kolaboratif dan mudah. Spesifikasi, aset, dan cuplikan kode yang dibuat secara otomatis membantu perancang dan pengembang menghemat setidaknya 50% waktu kerja. Semuanya (seperti Menyinkronkan desain / spesifikasi dari Sketch / PS / Adobe XD, mengomentari desain, membuat aliran UI dan prototipe interaktif, memeriksa dan mengunduh spesifikasi desain / aset, mengunggah prototipe dari Axure / Justinmind / Mockplus dan dokumen produk, dan handoff desain, dll) dapat dilakukan dengan klik dan drag-and-drop yang sederhana. Setiap orang mendapat 5 proyek dan 5 anggota tim secara gratis. Setiap orang yang terdaftar dapat membuat 5 proyek dan mengundang 4 anggota tim secara gratis serta kolaborator tanpa batas.

4. Wireframe

Wireframe cc adalah alat yang sangat minimalis, yang merupakan mockup mobile web gratis dan alat prototyping UI, alat ini memberikan peluang yang sangat baik bagi Anda untuk membuat mockup dengan cepat untuk situs Anda. Operasi berbeda dari alat mockup yang disebutkan sebelumnya. Jika Anda telah memanggil alat, Anda hanya akan melihat area gambar dan beberapa tombol untuk memformat elemen yang digambar. Untuk membiasakan diri dengan operasi dengan cepat, saya sarankan Anda untuk mengikuti tur demo. Dari sini semuanya dijelaskan dengan sangat baik. Fungsi memori wireframe | cc adalah poin bonus.

Ini juga tersedia dalam versi gratis dan Anda dapat melanjutkan pekerjaan yang terakhir kali Anda tinggalkan dengan menyimpan URL bingkai gambar. Fungsi ekspor hanya tersedia dalam versi premium. Namun, sistem kisi juga dapat ditempatkan di versi gratis di atas area gambar. Karena ini adalah alat prototipe online Mockup, wireframe & UI online untuk maket cepat sebuah ide situs web.

5. Moqups

Moqups juga merupakan salah satu alat mockup UI Web paling terkenal secara gratis. Alat ini terstruktur dengan baik dan ruang kerjanya dapat segera diinisialisasi. Di bilah sisi, Anda akan menemukan templat yang sudah dibuat sebelumnya, yang dapat Anda seret dan jatuhkan ke area gambar. Sama seperti Balsamiq, alat Mockup Moqups memiliki kelemahan dalam versi gratisnya. Hanya ketika Anda telah memutuskan untuk membeli versi berbayar, Anda dapat menggunakan berbagai fungsi. Sebelumnya, maket Anda tidak dapat disimpan atau diekspor sebagai file PDF, PNG, atau JPG. Ini tentu saja tidak menggembirakan, tetapi jika Anda dapat menyelesaikan pekerjaan Anda dalam satu sesi, masih ada fungsi tangkapan layar untuk mendukung hasil Anda untuk dipresentasikan.

Nah, manakah yang menjadi favorit Anda di antara alat-alat mockup UI Web gratis yang sudah saya sebutkan diatas?

Oke, mungkin itu saja yang bisa saya bahas pada artikel kali ini. Semoga bisa menambah wawasan Anda semua, kurang atau lebihnya mohon maaf. Jangan lupa untuk suport blog ini, dengan subscribe agar dapat update artikel-artikel terbaru menarik lainnya.

Terimakasih untuk yang sudah menyempatkan membaca diblog sederhana ini.

Selengkapnya