{"id":2143,"date":"2018-03-18T16:19:53","date_gmt":"2018-03-18T16:19:53","guid":{"rendered":"http:\/\/thingography.com\/?p=2143"},"modified":"2018-11-06T14:03:49","modified_gmt":"2018-11-06T14:03:49","slug":"css-spiral-2","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-spiral-2\/","title":{"rendered":"Spinning Spirals Animation \u2013 28 Different Spirals"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height:auto; background-color: #000;}\n\/* Slideshow box *\/\n#sss-box {\n  width: 100%;\nheight: auto;\n  max-width: 1000px;\n  position: relative;\n  margin: auto;\n  background-color: #000;\n}\n.mySlides {display: none; text-align: center; width: 80%; height: auto; margin: 0 auto;\n}\n.first {display: block;}\n.mySlides img {\n    width: 90%;\n    height: auto;\n    position: relative;\n    border-radius: 50%;\n}\n\/* Next & previous buttons *\/\n.prevnex .prev, .prevnex .next {\n  cursor: pointer;\n  position: absolute;\n  width: auto;\n  padding: 0.2em 0.4em;\n  color: #FFF;\n  font-weight: bold;\n  font-size: 30px;\nfont-size: 5vh;\n  transition: 0.6s ease;\n  border-radius: 3px;\n  bottom: 0;\n  border: solid 1px #999;\ntext-decoration: none !important;\n}\n\/* Position the \"next button\" to the right *\/\n.prevnex .next {\n  right: 0;\n  border-radius: 3px;\n}\n\/* On hover, add a black background color with a little bit see-through *\/\n.prevnex .prev:hover, .prevnex .next:hover {\n  background-color: rgba(255,0,0,0.8);\n}\n\/* Number text (1\/3 etc) *\/\n.xofy {\n  color: #f2f2f2;\n  font-size: 16px;\n  padding: 8px 12px;\n  position: absolute;\n  bottom: 0;\n  right: 60px;\n  margin-left: -24px;\n}\n\/* Fading animation *\/\n.fade {\n  -webkit-animation-name: fade;\n  -webkit-animation-duration: 1.5s;\n  animation-name: fade;\n  animation-duration: 1.5s;\n}\n@-webkit-keyframes fade {\n  from {opacity: .4} \n  to {opacity: 1}\n}\n@keyframes fade {\n  from {opacity: .4} \n  to {opacity: 1}\n}\n\/* On smaller screens, decrease text size *\/\n@media only screen and (max-width: 300px) {\n  .prevnex .prev, .prevnex .next, .xofy {font-size: 12px}\n  .xofy { right: 35px;}\n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"sss-box\">\n<div class=\"mySlides fade first\">\n<div class=\"xofy\">1 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-0.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">2 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-1.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">3 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-2.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">4 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-3.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">5 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-4.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">6 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-5.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">7 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-6.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">8 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-7.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">9 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-8.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">10 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-9.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">11 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-10.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">12 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-11.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">14 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-12.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">14 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-13.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">15 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-14.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">16 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-15.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">17 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-16.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">18 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-17.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">19 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-18.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">20 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-19.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">21 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-20.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">22 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-21.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">23 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-22.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">24 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-23.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">25 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-24.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">26 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-25.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">27 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-26.jpg\"><\/div>\n<div class=\"mySlides fade\">\n<div class=\"xofy\">28 \/ 28<\/div>\n<p><img decoding=\"async\" class=\"spi\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/spiral-2\/spiral-27.jpg\"><\/div>\n<div class=\"prevnex\">\n\t\t<a class=\"prev\" onclick=\"plusSlides(-1)\">&#10094;<\/a><br \/>\n\t\t<a class=\"next\" onclick=\"plusSlides(1)\">&#10095;<\/a>\n        <\/div>\n<\/div>\n<p> <!-- sss-box --><\/p>\n<div class=\"control-box\">\n<div class=\"control\">\n    \t<span>Spin Speed <\/span><\/p>\n<div class=\"slider\" title=\"Adjust the Spirals spin speed or reverse it.\"><input name=\"speed\" id=\"speed\" type=\"range\" value=\"1\" max=\"10\" min=\"-10\" step=\"0.5\" \/><output name=\"speed\" id=\"speed\"><\/output><\/div>\n<\/p><\/div>\n<div class=\"control\">\n    \t<span>Opacity<\/span><\/p>\n<div class=\"slider\" title=\"Adjust the opacity of the Spinning Spiral\"><input name=\"fader\" id=\"fader\" type=\"range\" value=\"1\" max=\"1\"  min=\"0.0\" step=\"any\" onchange=\"updateSlider(this.value)\" \/><output name=\"fader\" id=\"fader\"><\/output><\/div>\n<\/p><\/div>\n<div class=\"control-butt\">\n\t<button class=\"butt\" title=\"This will flip the Spiral (rotateY) 180 degrees.\">Invert Image<\/button>\n<\/div>\n<\/div>\n<p> <!-- Control-box --><\/p>\n<\/div>\n<p> <!-- Ani-box --><\/p>\n<div class=\"below-ani\">\n<p>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, &#8216;Flip&#8217; and a &#8216;Next\/Prev&#8217; image option. The &#8216;Flip&#8217; option turns the image over 180 degrees.\n  <\/p>\n<p><\/p>\n<p>  The spirals reminds us of a fun psychedelic memory of the 1960&#8217;s and 70&#8217;s. It is best viewed in your browsers full screen mode (use the &#8216;F11&#8243; key). In addition, all spirals in this series were created using <a href=\"http:\/\/www.getpaint.net\/index.html\" title=\"Paint.NET is FREE image and photo editing software for PCs that run Windows. Click to go to Paint.NET home page\">Paint.NET.<\/a>\n<\/p>\n<p>\n<\/div>\n<p> <!-- below-ani --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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<\/p>\n","protected":false},"author":2,"featured_media":2607,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-spiral-2-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,215,29],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2143"}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=2143"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2143\/revisions"}],"predecessor-version":[{"id":2231,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2143\/revisions\/2231"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2607"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}