<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);
});
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.