<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Variable font - Animated over (weight)</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body dir="rtl">
<section> <a href="javascript:void(0);">این یه نمونه متنه که میتونید با یه افکت خاص بوسیله امکان تغییر پیوستۀ وزن فونت متغیر و به کمک جاوااسکریپت از محلی که نشانگر موس روش میاد برجستش کنید</a> <a href="javascript:void(0);">میتوانید این افکت را در این جمله هم استفاده کنید</a>
<a href="javascript:void(0);"></a>خیلیم راحت :) <a href="javascript:void(0);">اینم یکی دیگه! </a><a href="javascript:void(0);">این افکت تو جملاتی که کلمات بیشتری دارن جذابتره.</a>
<a href="javascript:void(0);"></a></section>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script  src="https://fontamin.github.io/CDN/splittext.min.js"></script>
<script  src="./script.js"></script>

</body>
</html>
@font-face {
  font-family: "Mikhak VF";
  src: url("https://aminabedi68.github.io/Mikhak/Mikhak[DSTY,KSHD,wght].woff2");
  font-display: swap;
  font-style: normal italic;
  font-weight: 200 800;
}
* {
  box-sizing: border-box;
  outline: none;
}
body {
  background-color: #fffbf7;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  text-align: center;
  padding: 1vw;
  overflow: hidden;
  overflow-y: auto;
  direction: rtl;
}
body section {
  overflow: hidden;
  width: 75%;
  margin: 0 auto;
  display: block;
  text-align: right;
  font-family: "Mikhak VF";
  font-variation-settings: "wght" 200;
  line-height: 1.5;
  letter-spacing: 0em;
  color: #ff2a7f;
  font-size: 3.5vw;
  margin-bottom: 10vh;
}
body section a {
  cursor: pointer;
  position: relative;
  color: inherit;
  word-wrap: break-word;
  color: #ff2a7f;
  text-decoration: none;
}
body section a > div > div {
  visibility: visible;
  cursor: pointer;
  pointer-events: auto;
}
body section a > div > div > span {
  font-variation-settings: "wght" 200;
}
body section a > div > div > span.c1 {
  visibility: hidden;
  background-color: rgba(255,0,0,0.8);
}
body section a > div > div > span.c2 {
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 27;
}
@media only screen and (max-width: 600px) {
body section {
  overflow: hidden;
  width: 75%;
  margin: 0 auto;
  display: block;
  text-align: right;
  font-family: "Mikhak VF";
  font-variation-settings: "wght" 200;
  line-height: 1.5;
  letter-spacing: 0em;
  color: #ff2a7f;
  font-size: 7vw;
  margin-bottom: 10vh;
}
}
var win, container;
//-
$(document).ready(function($) {
  win = $(window);
  container = $("section");
  //-
  container.find("a").each(function() {
    new SplitFont($(this));
  });
});

//- FONT -
var SplitFont = function(_element) {
  var t = this;
  t.el = _element;
  t.splitText = new SplitText(t.el, { type: "words" });
  t.numwords = t.splitText.words.length;
  //
  t.words = [];
  for (var i = 0; i < t.numwords; i++) {
    var word = $(t.splitText.words[i]);
    var text = word.text();
    word.html('</span><span class="c2">' + text + "</span>");
  }

  //- FunctionsEDited
  t.changeWeight = function(_mouseX, _wght, _vel, _delayVel) {
    for (var i = 0; i < t.numwords; i++) {
      var word = $(t.splitText.words[i]);
      //-
      var delay = Math.abs(word.offset().left - _mouseX) * _delayVel;
      TweenMax.to(word.find(".c2"), _vel, {
        "font-variation-settings": '"wght" ' + _wght,
        delay: delay,
        overwrite: 5
      });
    }
  };

  //- Events
  t.el
    .bind("mouseenter", function(e) {
      //$(this).addClass('over');
      t.changeWeight(e.clientX, 800, 0.3, 0.002);
    })
    .bind("mouseleave", function(e) {
      //$(this).removeClass('over');
      t.changeWeight(e.clientX, 200, 0.5, 0.002);
    });
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.