$circleDiameter: 30rem; // Replace X with the desired diameter in rem
$circleRadius: $circleDiameter / 2;
$totalElements: 11;
$angleIncrement: 360deg / $totalElements; // Equal angle increment in degrees
$animationDuration: 12.5s;
@keyframes circle-motion {
from {
transform: rotate(-90deg) translate($circleRadius) rotate(90deg);
}
to {
transform: rotate(270deg) translate($circleRadius) rotate(-270deg);
}
}
@media (max-width:767px){
$circleDiameter: 24rem; // Replace X with the desired diameter in rem
$circleRadius: $circleDiameter / 2;
@keyframes circle-motion {
from {
transform: rotate(-90deg) translate($circleRadius) rotate(90deg);
}
to {
transform: rotate(270deg) translate($circleRadius) rotate(-270deg);
}
}
}
.section.section--proof .dot--large, .circle__icon {
animation: circle-motion $animationDuration linear infinite;
}
@keyframes circle-motion-small {
from {
transform: rotate(-90deg) translate(1.75em) rotate(90deg);
}
to {
transform: rotate(270deg) translate(1.75em) rotate(-270deg);
}
}
.circle__icon {
animation: circle-motion-small $animationDuration linear infinite paused;
}
.statement--wrapper{
.circle__icon{
animation-delay:var(--anim-delay);
}
}
@keyframes element-blur {
0%, 100% {
filter: blur(3px);
opacity:.2;
}
25% {
filter: blur(0px);
opacity:1;
}
50% {
filter: blur(3px);
opacity:.2;
}
}
.logo__item {
@for $i from 1 through $totalElements {
&:nth-child(#{$i}) {
// Calculate the angle for the current element
$angle: $angleIncrement * ($i - 1);
$randomDistanceX: random($circleDiameter+2) + 15; // Generates a number between 10 and 40
$randomDistanceY: random($circleDiameter+2) + 10;
// Generate a random distance from the center
// Calculate the X and Y positions using trigonometry
$xPosition: $randomDistanceX * cos($angle);
$yPosition: $randomDistanceY * sin($angle);
// Apply the translation
transform: translate(
#{$xPosition}rem,
#{$yPosition}rem
);
//transform: rotate($angle) translate($circleRadius) rotate(-$angle);
$animationDelay: ($angle / 360deg) * $animationDuration * 1;
// Apply the blur animation with the calculated delay
animation: element-blur $animationDuration * 1 linear infinite $animationDelay;
}
}
}
@media (max-width:767px){
.logo__item {
@for $i from 1 through $totalElements {
&:nth-child(#{$i}) {
// Calculate the angle for the current element
$angle: $angleIncrement * ($i - 1);
$randomDistanceX: random($circleDiameter+2) + 15; // Generates a number between 10 and 40
$randomDistanceY: random($circleDiameter+2) + 10;
// Generate a random distance from the center
// Calculate the X and Y positions using trigonometry
$xPosition: $randomDistanceX * cos($angle);
$yPosition: $randomDistanceY * sin($angle);
// Change values for mobile screens
$randomDistanceX: random($circleDiameter+2) + 2; // New value for X on mobile
$randomDistanceY: random($circleDiameter+1) + 25; // New value for Y on mobile
transform: translate(
#{$xPosition}rem,
#{$yPosition}rem
);
//transform: rotate($angle) translate($circleRadius) rotate(-$angle);
$animationDelay: ($angle / 360deg) * $animationDuration * 1;
// Apply the blur animation with the calculated delay
animation: element-blur $animationDuration * 1 linear infinite $animationDelay;
}
}
}
}
//counter
.section {
counter-reset: dotCounter;
}
.section .m--card-wrapper {
counter-increment: dotCounter;
}
.section .m--card-wrapper .dot--large::before {
content: counter(dotCounter);
display:block;
color:var(--color--main);
text-align:center;
}
Dive into all the components that come together to form the Axelar network, for a high-level understanding of the vision, mission and design.Go deeper and gain technical knowledge of how to get started with Axelar.
Axelar is excited to announce the launch of the Axelar Academy: a community driven and curated educational hub! The Axelar Academy was built to act as a knowledge base covering all aspects of the network.
No items found.
August 22, 2022
State of the Testnet — December 2021
Last week, a dozen members of the Axelar team traveled from across the globe to meet in Toronto, Canada for 10 days of intense development.
No items found.
August 22, 2022
Axelar Newsletter — December Edition
As 2021 comes to a close, this month’s newsletter recaps key milestones from the year and shares some of the latest updates from the Axelar team.
No items found.
August 9, 2022
Axelar, Aurigami, and Trisolaris Join Forces to Bring Secure Cross-Chain Lending and Liquidity to NEAR Protocol’s Aurora
Axelar’s interoperability protocol will power a new cross-chain DEX and money market, unlocking new capabilities for AURORA, NEAR, and USN holders.
News
August 3, 2022
How to Build a Cross-Chain DApp: Interop Architecture 101
This article offers some initial architecture design choices when composing applications cross-chain and explores the kinds of functionality that can be built using each.
Technology
July 27, 2022
Axelar Adds BNB to Growing List of Connected Chains
Axelar takes BNB cross-chain.
News
July 15, 2022
Axelar Code: Build a DApp that Calls a Contract and Transfers Tokens on Chain B from Chain A
In this tutorial, we will show you how to use Axelar services and functions to build a dApp that calls a contract on chain B from chain A and transfer tokens, for example to purchase an NFT, to send an airdrop, or to distribute tokens from a DAO.
Tutorials
July 13, 2022
Axelar Network Integrates with Secret Network to Offer Private Cross-Chain Messaging and NFT Transfers
Axelar is committed to a vision of interconnected, specialized blockchains, building across Web3. In this specialized world, blockchain developers can focus on problems that are hard and support applications that solve them.
