Figure Eight Rotating Animation

Developer
James Steinbach
Size
3,767 Kb
Views
10,120
  1. Figure Eight Rotating Animation Previews
  2. Figure Eight Rotating Animation HTML Codes
  3. Figure Eight Rotating Animation CSS Codes
  4. Figure Eight Rotating Animation JS Codes

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 Previews
IQ Test

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);
Figure Eight Rotating Animation - Script Codes
Figure Eight Rotating Animation - Script Codes
Home Page Home
Developer James Steinbach
Username jdsteinbach
Uploaded November 05, 2022
Rating 4
Size 3,767 Kb
Views 10,120
Do you need developer help for Figure Eight Rotating Animation?

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!

James Steinbach (jdsteinbach) Script Codes
Name
Slip-Scroll - No JS
CSS Variables
Moving Polygons
Swinging Door Menu
Laser Hover Effect
Animated Form Focus
Flip Card
Testing Newer Width Values
LOTR-ish Ring
Parallax-ish Sliding Content
Create amazing marketing copy with AI!

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!