{"id":2223,"date":"2009-02-16T05:45:19","date_gmt":"2009-02-16T12:45:19","guid":{"rendered":"http:\/\/css-tricks.com\/?p=2223"},"modified":"2012-08-19T10:02:25","modified_gmt":"2012-08-19T17:02:25","slug":"moving-boxes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/moving-boxes\/","title":{"rendered":"Moving Boxes"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/movingboxes.jpg?resize=570%2C281\" width=\"570\" height=\"281\" alt=\"\" data-recalc-dims=\"1\"><\/p>\n<p>We&#8217;ve been down the jQuery &#8220;sliders&#8221; path a few times before. Once for the <a href=\"https:\/\/css-tricks.com\/creating-a-slick-auto-playing-featured-content-slider\/\">Auto-Playing Featured Content Slider<\/a> and again for the <a href=\"https:\/\/css-tricks.com\/startstop-slider\/\">Start\/Stop slider<\/a>.<\/p>\n<p>Many of the concepts presented in those tutorials are the same with this slider, so I&#8217;m not going to throw a lot of source code at you this time. The big difference here is that there are <strong>buttons to change panels<\/strong> and the <strong>panels zoom in and out.<\/strong> Fun!<\/p>\n<p><a href=\"https:\/\/css-tricks.com\/examples\/MovingBoxes\/\" class=\"button\">View Demo<\/a> &nbsp; <a href=\"http:\/\/github.com\/CSS-Tricks\/MovingBoxes\" class=\"button\" rel=\"noopener\">Download Files<\/a><\/p>\n<p><strong>UPDATED Feb 16, 2009:<\/strong><\/p>\n<ul>\n<li>Issue with double clicking fixed. Next animation can only start when current animation is complete.<\/li>\n<\/ul>\n<p><strong>UPDATED Feb 17, 2009 (<a href=\"http:\/\/collegeaintcheap.com\/\" rel=\"noopener\">Noah Hendrix<\/a>):<\/strong><\/p>\n<ul>\n<li>Keyboard support added, arrow keys, spacebar, and enter key<\/li>\n<li>Code cleaned up, number of panels and initial widths\/sizes are no longer hard coded, so easier to build upon<\/li>\n<li>Clicking on non-active left or right panels also triggers animation<\/li>\n<\/ul>\n<p><strong>UPDATED July 15, 2010:<\/strong><\/p>\n<ul>\n<li><del>Moved to GitHub<\/del><\/li>\n<li>Turned into actual plugin with more features<\/li>\n<\/ul>\n<p><strong>UPDATED August 17, 2012:<\/strong><\/p>\n<ul>\n<li>Now in the <a href=\"https:\/\/github.com\/CSS-Tricks\/MovingBoxes\" rel=\"noopener\">CSS-Tricks Organization<\/a> on GitHub.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve been down the jQuery &#8220;sliders&#8221; path a few times before. Once for the Auto-Playing Featured Content Slider and again for the Start\/Stop slider. Many of the concepts presented in those tutorials are the same with this slider, so I&#8217;m not going to throw a lot of source code at you this time. The big [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[265],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":1695,"url":"https:\/\/css-tricks.com\/startstop-slider\/","url_meta":{"origin":2223,"position":0},"title":"Start\/Stop Slider","date":"December 4, 2008","format":false,"excerpt":"A little while back I did a tutorial on a Featured Content Slider. It was neat, but a little limited in customization possibility. The two most requested features were being able to add\/remove \"panels\" and a stop\/start button. I'm happy to say I was able to accommodate a bit with\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/startstopsketch.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":649,"url":"https:\/\/css-tricks.com\/javascript-page-slider-roundup\/","url_meta":{"origin":2223,"position":1},"title":"Javascript Page Slider Roundup","date":"March 27, 2008","format":false,"excerpt":"\"Page Sliders\" are a bit like Tabbed Boxes, only the content appears to slide by instead of be instantly replaced. This is a pretty nice effect and like tabbed boxes, it can help you get a lot of content onto a single page without risking visual clutter. There are a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":889,"url":"https:\/\/css-tricks.com\/creating-a-slick-auto-playing-featured-content-slider\/","url_meta":{"origin":2223,"position":2},"title":"Creating a Slick Auto-Playing Featured Content Slider","date":"August 18, 2008","format":false,"excerpt":"I love the Coda Slider plugin for jQuery. I've used it recently to build a couple of tabbed \"widgets\". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/fc-preview.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375308,"url":"https:\/\/css-tricks.com\/css-only-infinite-and-circular-image-slider\/","url_meta":{"origin":2223,"position":3},"title":"CSS Infinite and Circular Rotating Image Slider","date":"December 2, 2022","format":false,"excerpt":"Image sliders (also called carousels) are everywhere. There are a lot of CSS tricks to create the common slider where the images slide from left to right (or the opposite). It\u2019s the same deal with the many JavaScript libraries out there that create fancy sliders with complex animations. We are\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/circular-slider-carousel.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":7079,"url":"https:\/\/css-tricks.com\/slide-to-unlock\/","url_meta":{"origin":2223,"position":4},"title":"iPhone &#8220;slide to unlock&#8221; Text in WebKit\/CSS3","date":"August 13, 2010","format":false,"excerpt":"There are a couple of WebKit specific properties that make giving text a gradient background possible: -webkit-background-clip: text; -webkit-text-fill-color: transparent; Those will allow the background of the parent element to become the background of the text inside. I gots to thinkin', if we made a made a horizontal gradient that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/08\/animatedbackground.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":375621,"url":"https:\/\/css-tricks.com\/css-infinite-3d-sliders\/","url_meta":{"origin":2223,"position":5},"title":"CSS Infinite 3D Sliders","date":"December 16, 2022","format":false,"excerpt":"In this series, we\u2019ve been making image sliders with nothing but HTML and CSS. The idea is that we can use the same markup but different CSS to get wildly different results, no matter how many images we toss in. We started with a circular slider that rotates infinitely, sort\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/cube-slider.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2223"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=2223"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2223\/revisions"}],"predecessor-version":[{"id":17785,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2223\/revisions\/17785"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=2223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=2223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=2223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}