spinning – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:03:49 +0000 en-US hourly 1 Spinning Spirals Animation – 28 Different Spirals https://thingography.com/css-spiral-2/ https://thingography.com/css-spiral-2/#respond Sun, 18 Mar 2018 16:19:53 +0000 http://thingography.com/?p=2143 .ani-box {width: 100%; height:auto; background-color: #000;} /* Slideshow box */ #sss-box { width: 100%; height: auto; max-width: 1000px; position: relative; margin: auto; background-color: #000; } .mySlides {display: none; text-align: center; width: 80%; height: auto; margin: 0 auto; } .first {display: block;} .mySlides img { width: 90%; height: auto; position: relative; border-radius: 50%; } /* Next & previous buttons */ .prevnex .prev, .prevnex .next { cursor: pointer; position: absolute; width: auto; padding: 0.2em 0.4em; color: #FFF; font-weight: bold; font-size: 30px; font-size: 5vh; transition: 0.6s ease; border-radius: 3px; bottom: 0; border: solid 1px #999; text-decoration: none !important; } /* Position the "next button" to the right */ .prevnex .next { right: 0; border-radius: 3px; } /* On hover, add a black background color with a little bit see-through */ .prevnex .prev:hover, .prevnex .next:hover { background-color: rgba(255,0,0,0.8); } /* Number text (1/3 etc) */ .xofy { color: #f2f2f2; font-size: 16px; padding: 8px 12px; position: absolute; bottom: 0; right: 60px; margin-left: -24px; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prevnex .prev, .prevnex .next, .xofy {font-size: 12px} .xofy { right: 35px;} }
1 / 28

2 / 28

3 / 28

4 / 28

5 / 28

6 / 28

7 / 28

8 / 28

9 / 28

10 / 28

11 / 28

12 / 28

14 / 28

14 / 28

15 / 28

16 / 28

17 / 28

18 / 28

19 / 28

20 / 28

21 / 28

22 / 28

23 / 28

24 / 28

25 / 28

26 / 28

27 / 28

28 / 28


Spin Speed

Opacity

This animation page is NOT CSS only, it contains multiple java scripts. The java scripts were needed to make the animation controls in the lower left corner of the page. The controls allow for Spin Speed, Opacity, ‘Flip’ and a ‘Next/Prev’ image option. The ‘Flip’ option turns the image over 180 degrees.

The spirals reminds us of a fun psychedelic memory of the 1960’s and 70’s. It is best viewed in your browsers full screen mode (use the ‘F11″ key). In addition, all spirals in this series were created using Paint.NET.

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