clackers – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:44:40 +0000 en-US hourly 1 Clackers CSS Animation https://thingography.com/css-clackers/ https://thingography.com/css-clackers/#respond Sun, 18 Feb 2018 18:48:45 +0000 http://thingography.com/my-things/?p=65 .example-1, .example-2, .example-3 { margin: 2em auto; width: 550px; height: 550px; position: relative; } .clackers-comment { padding: 0.5em; border: 2px ridge #000000; margin: 0.5em auto 1em auto; width: 100%; font-size: 1.2em; color: #F2F2F2; text-align: center; line-height: 1.3em; background-color: #666666; } #last {margin-bottom: 80px;} .db1, .db2 { width: 150px; height: 1100px; top: 50%; left: 50%; position: absolute; margin-top: -550px; margin-left: -75px; } .shaft { border: 1px solid #000000; width: 10px; height: 250px; top: 50%; left: 50%; position: absolute; margin-top: -125px; margin-left: -5px; background-color: #FF3300; z-index: 2; } .balla1, .balla2, .ballb1, .ballb2 { width: 150px; height: 150px; top: 50%; left: 50%; position: absolute; background-color: #FF3300; /* Ball default RED Color */ border-radius: 50%; border: 1px solid #000000; } .db2 {animation: spin2 5s linear infinite;} .db1 {animation: spin 5s linear infinite;} .balla1, .ballb1 { margin-top: -275px; margin-left: -75px; } .balla2, .ballb2 { margin-top: 125px; margin-left: -75px; } /* ====== END FIXED ===== */ /* ============== Example-2 ============== */ .example-2 .balla1, .example-2 .ballb1 {animation: color 2.5s linear infinite;} .example-2 .balla2, .example-2 .ballb2 {animation: color2 2.5s linear infinite;} /* ======= Example-3 ========== */ .example-3 .db1 {animation: bounce .625s linear infinite;} .example-3 .db2 {animation:bounce2 .625s linear infinite;} /* ============= Animation Keyframes ============= */ @keyframes spin { 0% { transform: rotateZ( 0deg);} 100% { transform: rotateZ(720deg);} } @keyframes spin2 { 0% { transform: rotateZ( 0deg);} 100% { transform: rotateZ(-720deg);} } @keyframes color { 0% {background-color: red; opacity: 1} 25% {background-color: red; opacity: 1} 25.01%{background-color: blue; opacity: 0.5} 25.2% {background-color: blue; opacity: 1} 75% {background-color: blue; opacity: 1} 75.01%{background-color: red; opacity: 0.5} 75.2% {background-color: red; opacity: 1} 100% {background-color: red; opacity: 1} } @keyframes color2 { 0% {background-color: blue; opacity: 1} 25% {background-color: blue; opacity: 1} 25.01%{background-color: red; opacity: 0.5} 25.2% {background-color: red; opacity: 1} 75% {background-color: red; opacity: 1} 75.01%{background-color: blue; opacity: 0.5} 75.2% {background-color: blue; opacity: 1} 100% {background-color: blue; opacity: 1} } @keyframes bounce { 0% { transform: rotateZ( -21.6deg);} 50% { transform: rotateZ( -68.5deg);} 100% { transform: rotateZ( -21.6deg);} } @keyframes bounce2 { 0% {transform: rotateZ( 21.6deg);} 50% {transform: rotateZ( 68.5deg);} 100% {transform: rotateZ( 21.6deg);} }
Clackers or Loaders for lack of a better name.

Here are three versions of this illusion, reminiscent of the Clackers toy.

In the first example, the two ‘barbells’ are rotating opposite directions,

which can create the optical illusion of the balls bouncing off each other.

In the second, the lower two balls are always blue and upper two are red.

It is the same as the first, only the colors are changing.

In the third, the balls are actually bouncing off each other.

The ‘barbells’ rotate until contact and then reverse direction.

]]>
https://thingography.com/css-clackers/feed/ 0