Figure Eight Rotating Animation
How do I make an figure eight rotating animation?
Credit for the idea goes to LayerVault. Loved this effect on their home page, wanted to recreate it on my own. Probably not as clean / graceful as theirs, but it works. 15 positions are set by CSS class for the numbered boxes; jQuery changes the class and the boxes move with CSS transitions. All positions are based on percentage of the containing div which is set at a 4x6 aspect ratio.. What is a figure eight rotating animation? How do you make a figure eight rotating animation? This script and codes were developed by James Steinbach on 05 November 2022, Saturday.
Figure Eight Rotating Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Figure Eight Rotating Animation</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .eight-box { position: relative; display: block; margin: 1em auto; width: 16em; height: 24em; font-family: sans-serif; font-size: 20px;
}
.fig-8 { display: block; position: absolute; color: #fff; width: 2em; height: 2em; line-height: 2; text-align: center; font-weight: bold; font-smoothing: antialiased; transition: all .5s linear; overflow: hidden; z-index: 5;
}
.fig-8:before { display: block; content: ''; background: rgba(0,0,0,.15);
/* box-shadow: 0 0 .25em 0 rgba(0,0,0,.2), inset 0 0 2px rgba(0,0,0,.25);*/ width: .65em; height: .65em; position: absolute; top: 0; left: 0; z-index: 10;
}
.fig-8:after { content: ''; width: 2em; height: 2em; background: #fff; transform: rotate(45deg); z-index: 20; position: absolute; top: -1.4em; left: -1.4em;
}
.col-1 { background: #1abc9c;
}
.col-2 { background: #9b59b6;
}
.col-3 { background: #27ae60;
}
.col-4 { background: #2c3e50;
}
.col-5 { background: #e74c3c;
}
.col-6 { background: #f39c12;
}
.col-7 { background: #bdc3c7;
}
.col-8 { background: #2ecc71;
}
.col-9 { background: #34495e;
}
.col-10 { background: #2980b9;
}
.col-11 { background: #f1c40f;
}
.col-12 { background: #d35400;
}
.col-13 { background: #7f8c8d;
}
.col-14 { background: #3498db;
}
.col-15 { background: #16a085;
}
.pos-1 { top: 0; left: 43.75%;
}
.pos-2 { top: 6.25%; left: 68.75%;
}
.pos-3 { top: 22.92%; left: 78.125%;
}
.pos-4 { top: 39.58%; left: 68.75%;
}
.pos-5 { top: 45.83%; left: 43.75%;
}
.pos-6 { top: 52.08%; left: 18.75%;
}
.pos-7 { top: 68.75%; left: 9.375%;
}
.pos-8 { top: 85.417%; left: 18.75%;
}
.pos-9 { top: 91.67%; left: 43.75%;
}
.pos-10 { top: 85.417%; left: 68.75%;
}
.pos-11 { top: 68.75%; left: 78.125%;
}
.pos-12 { top: 52.08%; left: 68.75%;
}
.pos-13 { top: 39.58%; left: 18.75%;
}
.pos-14 { top: 22.92%; left: 9.375%;
}
.pos-15 { top: 6.25%; left: 18.75%;
}
.smile { position: absolute; width: 2em; height: 2em; line-height: 1.8; transform: rotate(90deg); text-align: center; border-radius: 50%;
/* box-shadow: inset 0 0 0 2px #333;*/ background: moccasin;
}
.smile-1 { top: 22.92%; left: 43.75%;
}
.smile-2 { top: 68.75%; left: 43.75%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="eight-box"> <div class="fig-8 col-1 pos-1">1</div> <div class="fig-8 col-2 pos-2">2</div> <div class="fig-8 col-3 pos-3">3</div> <div class="fig-8 col-4 pos-4">4</div> <div class="fig-8 col-5 pos-5">5</div> <div class="fig-8 col-6 pos-6">6</div> <div class="fig-8 col-7 pos-7">7</div> <div class="fig-8 col-8 pos-8">8</div> <div class="fig-8 col-9 pos-9">9</div> <div class="fig-8 col-10 pos-10">10</div> <div class="fig-8 col-11 pos-11">11</div> <div class="fig-8 col-12 pos-12">12</div> <div class="fig-8 col-13 pos-13">13</div> <div class="fig-8 col-14 pos-14">14</div> <div class="fig-8 col-15 pos-15">15</div> <div class="smile smile-1">: )</div> <div class="smile smile-2">: )</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Figure Eight Rotating Animation - Script Codes CSS Codes
.eight-box { position: relative; display: block; margin: 1em auto; width: 16em; height: 24em; font-family: sans-serif; font-size: 20px;
}
.fig-8 { display: block; position: absolute; color: #fff; width: 2em; height: 2em; line-height: 2; text-align: center; font-weight: bold; font-smoothing: antialiased; transition: all .5s linear; overflow: hidden; z-index: 5;
}
.fig-8:before { display: block; content: ''; background: rgba(0,0,0,.15);
/* box-shadow: 0 0 .25em 0 rgba(0,0,0,.2), inset 0 0 2px rgba(0,0,0,.25);*/ width: .65em; height: .65em; position: absolute; top: 0; left: 0; z-index: 10;
}
.fig-8:after { content: ''; width: 2em; height: 2em; background: #fff; transform: rotate(45deg); z-index: 20; position: absolute; top: -1.4em; left: -1.4em;
}
.col-1 { background: #1abc9c;
}
.col-2 { background: #9b59b6;
}
.col-3 { background: #27ae60;
}
.col-4 { background: #2c3e50;
}
.col-5 { background: #e74c3c;
}
.col-6 { background: #f39c12;
}
.col-7 { background: #bdc3c7;
}
.col-8 { background: #2ecc71;
}
.col-9 { background: #34495e;
}
.col-10 { background: #2980b9;
}
.col-11 { background: #f1c40f;
}
.col-12 { background: #d35400;
}
.col-13 { background: #7f8c8d;
}
.col-14 { background: #3498db;
}
.col-15 { background: #16a085;
}
.pos-1 { top: 0; left: 43.75%;
}
.pos-2 { top: 6.25%; left: 68.75%;
}
.pos-3 { top: 22.92%; left: 78.125%;
}
.pos-4 { top: 39.58%; left: 68.75%;
}
.pos-5 { top: 45.83%; left: 43.75%;
}
.pos-6 { top: 52.08%; left: 18.75%;
}
.pos-7 { top: 68.75%; left: 9.375%;
}
.pos-8 { top: 85.417%; left: 18.75%;
}
.pos-9 { top: 91.67%; left: 43.75%;
}
.pos-10 { top: 85.417%; left: 68.75%;
}
.pos-11 { top: 68.75%; left: 78.125%;
}
.pos-12 { top: 52.08%; left: 68.75%;
}
.pos-13 { top: 39.58%; left: 18.75%;
}
.pos-14 { top: 22.92%; left: 9.375%;
}
.pos-15 { top: 6.25%; left: 18.75%;
}
.smile { position: absolute; width: 2em; height: 2em; line-height: 1.8; transform: rotate(90deg); text-align: center; border-radius: 50%;
/* box-shadow: inset 0 0 0 2px #333;*/ background: moccasin;
}
.smile-1 { top: 22.92%; left: 43.75%;
}
.smile-2 { top: 68.75%; left: 43.75%;
}
Figure Eight Rotating Animation - Script Codes JS Codes
var outerBox = $('.eight-box'), boxHeight = $(outerBox).height(), boxWidth = $(outerBox).width();
function changeNumbers() { var pos1 = $('.pos-1'), pos2 = $('.pos-2'), pos3 = $('.pos-3'), pos4 = $('.pos-4'), pos5 = $('.pos-5'), pos6 = $('.pos-6'), pos7 = $('.pos-7'), pos8 = $('.pos-8'), pos9 = $('.pos-9'), pos10 = $('.pos-10'), pos11 = $('.pos-11'), pos12 = $('.pos-12'), pos13 = $('.pos-13'), pos14 = $('.pos-14'), pos15 = $('.pos-15'); $(pos1).addClass('pos-15'); $(pos1).removeClass('pos-1'); $(pos2).addClass('pos-1'); $(pos2).removeClass('pos-2'); $(pos3).addClass('pos-2'); $(pos3).removeClass('pos-3'); $(pos4).addClass('pos-3'); $(pos4).removeClass('pos-4'); $(pos5).addClass('pos-4'); $(pos5).removeClass('pos-5'); $(pos6).addClass('pos-5'); $(pos6).removeClass('pos-6'); $(pos7).addClass('pos-6'); $(pos7).removeClass('pos-7'); $(pos8).addClass('pos-7'); $(pos8).removeClass('pos-8'); $(pos9).addClass('pos-8'); $(pos9).removeClass('pos-9'); $(pos10).addClass('pos-9'); $(pos10).removeClass('pos-10'); $(pos11).addClass('pos-10'); $(pos11).removeClass('pos-11'); $(pos12).addClass('pos-11'); $(pos12).removeClass('pos-12'); $(pos13).addClass('pos-12'); $(pos13).removeClass('pos-13'); $(pos14).addClass('pos-13'); $(pos14).removeClass('pos-14'); $(pos15).addClass('pos-14'); $(pos15).removeClass('pos-15');
};
var refreshId = setInterval(changeNumbers, 1500);
Developer | James Steinbach |
Username | jdsteinbach |
Uploaded | November 05, 2022 |
Rating | 4 |
Size | 3,767 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Content Blur under Fixed Header | 3,818 Kb |
Swinging Door Menu | 9,013 Kb |
Testing Newer Width Values | 2,449 Kb |
Using a gradient for a border | 2,138 Kb |
Gradient Hover Effect | 2,212 Kb |
Sass Geometric Pattern Generator | 2,020 Kb |
Figure Eight Rotating Animation | 3,767 Kb |
LOTR-ish Ring | 4,284 Kb |
Page Scroll Content Animation | 3,385 Kb |
Moving Polygons | 3,143 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
3D-box | Parthviroja | 2,346 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
A Pen by Theun | Tjoen | 6,152 Kb |
Hexagons | Ashmind | 4,360 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Welcome | Nakome | 6,076 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Tooltip in table | Roine | 3,713 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!