Skip to content

Instantly share code, notes, and snippets.

@aubergene

aubergene/.block

Last active October 23, 2019 22:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save aubergene/501976afc5defa989df75892b258fb90 to your computer and use it in GitHub Desktop.
Save aubergene/501976afc5defa989df75892b258fb90 to your computer and use it in GitHub Desktop.
Download ZIP
Rotating squares
Raw
.block
license: cc-by-4.0
Raw
README.md

Uniqlo had an instore promotional video using an effect similar effect to this. I manually created this using keyframe animations, but if I did it again I'd probably use JavaScript and CSS transitions, and allow people to type their own words.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Rotating Squares</title>
</head>
<body>
<div class="container">
<div class="box box1">
<div class="boxN">H</div>
<div class="boxR">W</div>
</div>
<div class="box box1">
<div class="boxN">E</div>
<div class="boxR">O</div>
</div>
<div class="box box1">
<div class="boxN">L</div>
<div class="boxR">R</div>
</div>
<div class="box box1">
<div class="boxN">L</div>
<div class="boxR">L</div>
</div>
<div class="box box1">
<div class="boxN">O</div>
<div class="boxR">D</div>
</div>
</div>
<style type="text/css">
body {
margin: 0;
background: #eee;
}
.container {
width: 960px;
height: 500px;
background: #fff;
}
.box {
background: #000;
color: #fff;
display: inline-block;
text-align: center;
font-size: 120px;
line-height: 130px;
font-family: sans-serif;
text-transform: uppercase;
font-weight: 900;
width: 128px;
height: 128px;
margin: 128px 28px;
position: relative;
}
.box1 {
-moz-animation-name: rotateScale;
-webkit-animation-name: rotateScale;
animation-name: rotateScale;
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.boxN,
.boxR {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.boxN {
-moz-animation-name: hideShow;
-webkit-animation-name: hideShow;
animation-name: hideShow;
}
.boxR {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-moz-animation-name: showHide;
-webkit-animation-name: showHide;
animation-name: showHide;
}
@-moz-keyframes rotateScale {
45% {
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-moz-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
55% {
-moz-transform: rotate(90deg) scale(1);
-webkit-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
}
100% {
-moz-transform: rotate(90deg) scale(1);
-webkit-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
}
}
@-webkit-keyframes rotateScale {
45% {
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-moz-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
55% {
-moz-transform: rotate(90deg) scale(1);
-webkit-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
}
100% {
-moz-transform: rotate(90deg) scale(1);
-webkit-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
}
}
@-o-keyframes rotateScale {
45% {
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-moz-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
55% {
-moz-transform: rotate(90deg) scale(1);
-webkit-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
}
100% {
-moz-transform: rotate(90deg) scale(1);
-webkit-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
}
}
@-ms-keyframes rotateScale {
45% {
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-moz-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
55% {
-moz-transform: rotate(90deg) scale(1);
-webkit-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
}
100% {
-moz-transform: rotate(90deg) scale(1);
-webkit-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
}
}
@keyframes rotateScale {
45% {
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-moz-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
55% {
-moz-transform: rotate(90deg) scale(1);
-webkit-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
}
100% {
-moz-transform: rotate(90deg) scale(1);
-webkit-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
}
}
@-moz-keyframes showHide {
0% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes showHide {
0% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-o-keyframes showHide {
0% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-ms-keyframes showHide {
0% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes showHide {
0% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes hideShow {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes hideShow {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-o-keyframes hideShow {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes hideShow {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes hideShow {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment