{"id":330863,"date":"2020-12-21T07:01:32","date_gmt":"2020-12-21T15:01:32","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=330863"},"modified":"2020-12-21T07:01:34","modified_gmt":"2020-12-21T15:01:34","slug":"201-doing-booping","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/201-doing-booping\/","title":{"rendered":"#201: Doing Booping"},"content":{"rendered":"\n<p>Joshua Comeau crowd-coined the term <a href=\"https:\/\/www.joshwcomeau.com\/react\/boop\/\" rel=\"noopener\">&#8220;boop&#8221;<\/a> (high five, <a href=\"https:\/\/twitter.com\/cobra_winfrey\/status\/1324104607539306497\" rel=\"noopener\">Adam Kuhn<\/a>). These are sorta like hover\/focus states, except that they aren&#8217;t. Your thingies \u2014 things like links, buttons, etc. \u2014 should still have those states. A &#8220;boop&#8221; is a more whimsical effect that runs <em>once<\/em> when the mouse enters it, finishes the run even if your mouse leaves (which is something CSS can&#8217;t really do), and will potentially run again on the user&#8217;s next <code>mouseenter<\/code> later, after the first booping is done. <\/p>\n\n\n\n<p>Rather than Josh&#8217;s React implementation, we&#8217;ll start in CSS, see how far we can get, then look at an alternative JavaScript approach.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoGbvmV\" src=\"\/\/codepen.io\/anon\/embed\/PoGbvmV?height=450&amp;theme-id=1&amp;slug-hash=PoGbvmV&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoGbvmV\" title=\"CodePen Embed PoGbvmV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I&#8217;ve left some comments in the Pen above that were from alternative methods we explored along the way. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Joshua Comeau crowd-coined the term &#8220;boop&#8221; (high five, Adam Kuhn). These are sorta like hover\/focus states, except that they aren&#8217;t. Your thingies \u2014 things like links, buttons, etc. \u2014 should still have those states. A &#8220;boop&#8221; is a more whimsical effect that runs once when the mouse enters it, finishes the run even if your [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":330890,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":5262,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/horz-scroll-with-mouse-wheel\/","url_meta":{"origin":330863,"position":0},"title":"Scroll Page Horizontally With Mouse Wheel","date":"January 6, 2010","format":false,"excerpt":"1) Load jQuery and the Mouse Wheel plugin Mouse Wheel plugin is here. 2) Attach mousewheel event to body The \"30\" represents speed. preventDefault ensures the page won't scroll down. $(function() { $(\"body\").mousewheel(function(event, delta) { this.scrollLeft -= (delta * 30); event.preventDefault(); }); }); See the Pen Horizontal Scrolling with mouse\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9847,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/calculate-distance-between-mouse-and-element\/","url_meta":{"origin":330863,"position":1},"title":"Calculate Distance Between Mouse and Element","date":"June 19, 2011","format":false,"excerpt":"(function() { var mX, mY, distance, $distance = $('#distance span'), $element = $('#element'); function calculateDistance(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()\/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()\/2)), 2))); } $(document).mousemove(function(e) { mX = e.pageX; mY = e.pageY; distance = calculateDistance($element, mX, mY); $distance.text(distance); }); })(); This code will calculate the\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4434,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/get-x-y-mouse-coordinates\/","url_meta":{"origin":330863,"position":2},"title":"Get X, Y Coordinates of Mouse Within Box","date":"October 18, 2009","format":false,"excerpt":"The below code will give you the X, Y coordinates of a mouse click within a given box. Removing all the stuff about the offset, you can easily get the X, Y coordinates of the click relative to the browser window. $(function() { $(\"#demo-box\").click(function(e) { var offset = $(this).offset(); var\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3747,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/viewport-size-screen-resolution-mouse-postition\/","url_meta":{"origin":330863,"position":3},"title":"Viewport Size, Screen Resolution, Mouse Postition","date":"September 4, 2009","format":false,"excerpt":"This code is cross-browser compatible and checks the dimensions of the viewport, the screen resolution and the mouseposition which can be quite helpful to perform some checks with JavaScript.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":330622,"url":"https:\/\/css-tricks.com\/video-screencasts\/200-scroll-to-zoom\/","url_meta":{"origin":330863,"position":4},"title":"#200: Scroll to Zoom","date":"December 10, 2020","format":false,"excerpt":"Fair warning: you aren't going to need this every day! I just happened to be looking at a neat little SVG warping tool that had a feature where my mouse scroll wheel (or trackpad) could be used to zoom the working area in and out. We dug in to play\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/thumb-scroll.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14188,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/","url_meta":{"origin":330863,"position":5},"title":":focus","date":"September 6, 2011","format":false,"excerpt":"The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example: textarea:focus { background: pink; } CodePen Embed Fallback Any element (most commonly\u00a0<input>s and\u00a0<textarea>s) are in \"focus\" when they are selected and ready\u2026","rel":"","context":"With 33 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/330863"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"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=330863"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/330863\/revisions"}],"predecessor-version":[{"id":331310,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/330863\/revisions\/331310"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/330890"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=330863"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=330863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}