Font Awesome Kits are here to save the day! Fast, flexible, friendly, and full of icons (ok)
https://fontawesome.com/docs/web/setup/use-kit
Bộ công cụ Font Awesome có ở đây để giúp bạn giải quyết vấn đề! Nhanh chóng, linh hoạt, thân thiện và có đầy đủ các biểu tượng—Chúng là CDN cá nhân mà bạn hằng mong đợi.
Font Awesome Kit là nơi quản lý tất cả các biểu tượng của bạn cho một dự án. Với sức mạnh của Bộ công cụ, bạn sẽ có được cách dễ dàng nhất để sử dụng các biểu tượng Font Awesome, hiệu suất tuyệt vời, dễ dàng tùy chỉnh và thậm chí bạn có thể tải lên các biểu tượng của riêng mình!
Dịch vụ Bộ công cụ của chúng tôi đưa các biểu tượng vào dự án web của bạn chỉ bằng một dòng mã. Chỉ cần tạo, thêm mã nhúng Kit vào dự án của bạn và bạn đã sẵn sàng để các biểu tượng trôi chảy!
Font Awesome Kit:
User: phamngoctuong1805.com
Link: <script src="https://kit.fontawesome.com/d7e56c7c93.js" crossorigin="anonymous"></script>
User: phamkyanh8668@gmail.com
Link: <script src="https://kit.fontawesome.com/c291db1174.js" crossorigin="anonymous"></script>const script = document.createElement("script");
script.src = "https://kit.fontawesome.com/c291db1174.js";
document.body.appendChild(script);Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FontAwesome 5</title>
<script src="https://codepen.io/Hyperplexed/pen/xxYJYjM/54407644e24173ad6019b766443bf2a6.js"></script>
// Hoặc
<script>
const script = document.createElement("script");
script.src = "https://kit.fontawesome.com/c291db1174.js";
document.body.appendChild(script);
<script/>
</head>
<body>
<script type="text/javascript">
let start = new Date().getTime();
const originPosition = { x: 0, y: 0 };
const last = {
starTimestamp: start,
starPosition: originPosition,
mousePosition: originPosition
}
const config = {
starAnimationDuration: 1500,
minimumTimeBetweenStars: 250,
minimumDistanceBetweenStars: 75,
glowDuration: 75,
maximumGlowPointSpacing: 10,
colors: ["249 146 253", "252 254 255"],
sizes: ["1.4rem", "1rem", "0.6rem"],
animations: ["fall-1", "fall-2", "fall-3"]
}
let count = 0;
const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min,
selectRandom = items => items[rand(0, items.length - 1)];
const withUnit = (value, unit) => `${value}${unit}`,
px = value => withUnit(value, "px"),
ms = value => withUnit(value, "ms");
const calcDistance = (a, b) => {
const diffX = b.x - a.x,
diffY = b.y - a.y;
return Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
}
const calcElapsedTime = (start, end) => end - start;
const appendElement = element => document.body.appendChild(element),
removeElement = (element, delay) => setTimeout(() => document.body.removeChild(element), delay);
const createStar = position => {
const star = document.createElement("span"),
color = selectRandom(config.colors);
star.className = "star fa-solid fa-sparkle";
star.style.left = px(position.x);
star.style.top = px(position.y);
star.style.fontSize = selectRandom(config.sizes);
star.style.color = `rgb(${color})`;
star.style.textShadow = `0px 0px 1.5rem rgb(${color} / 0.5)`;
star.style.animationName = config.animations[count++ % 3];
star.style.starAnimationDuration = ms(config.starAnimationDuration);
appendElement(star);
removeElement(star, config.starAnimationDuration);
}
const createGlowPoint = position => {
const glow = document.createElement("div");
glow.className = "glow-point";
glow.style.left = px(position.x);
glow.style.top = px(position.y);
appendElement(glow)
removeElement(glow, config.glowDuration);
}
const determinePointQuantity = distance => Math.max(
Math.floor(distance / config.maximumGlowPointSpacing),
1
);
/* --
The following is an explanation for the "createGlow" function below:
I didn't cover this in my video, but I ran into an issue where moving the mouse really quickly caused gaps in the glow effect. Kind of like this:
* * * * * * 🖱️
instead of:
*************************************🖱️
To solve this I sort of "backfilled" some additional glow points by evenly spacing them in between the current point and the last one. I found this approach to be more visually pleasing than one glow point spanning the whole gap.
The "quantity" of points is based on the config property "maximumGlowPointSpacing".
My best explanation for why this is happening is due to the mousemove event only firing every so often. I also don't think this fix was totally necessary, but it annoyed me that it was happening so I took on the challenge of trying to fix it.
-- */
const createGlow = (last, current) => {
const distance = calcDistance(last, current),
quantity = determinePointQuantity(distance);
const dx = (current.x - last.x) / quantity,
dy = (current.y - last.y) / quantity;
Array.from(Array(quantity)).forEach((_, index) => {
const x = last.x + dx * index,
y = last.y + dy * index;
createGlowPoint({ x, y });
});
}
const updateLastStar = position => {
last.starTimestamp = new Date().getTime();
last.starPosition = position;
}
const updateLastMousePosition = position => last.mousePosition = position;
const adjustLastMousePosition = position => {
if (last.mousePosition.x === 0 && last.mousePosition.y === 0) {
last.mousePosition = position;
}
};
const handleOnMove = e => {
const mousePosition = { x: e.clientX, y: e.clientY }
adjustLastMousePosition(mousePosition);
const now = new Date().getTime(),
hasMovedFarEnough = calcDistance(last.starPosition, mousePosition) >= config.minimumDistanceBetweenStars,
hasBeenLongEnough = calcElapsedTime(last.starTimestamp, now) > config.minimumTimeBetweenStars;
if (hasMovedFarEnough || hasBeenLongEnough) {
createStar(mousePosition);
updateLastStar(mousePosition);
}
createGlow(last.mousePosition, mousePosition);
updateLastMousePosition(mousePosition);
}
window.onmousemove = e => handleOnMove(e);
window.ontouchmove = e => handleOnMove(e.touches[0]);
document.body.onmouseleave = () => updateLastMousePosition(originPosition);
</script>
</body>
</html>Last updated
Was this helpful?