{"id":5055,"date":"2016-05-26T21:27:18","date_gmt":"2016-05-27T04:27:18","guid":{"rendered":"http:\/\/blog.cmiscm.com\/?p=5055"},"modified":"2023-01-14T13:31:33","modified_gmt":"2023-01-14T21:31:33","slug":"booounce","status":"publish","type":"post","link":"http:\/\/blog.cmiscm.com\/?p=5055","title":{"rendered":"Booounce"},"content":{"rendered":"<div class=\"cmpic noshadow\" style=\"padding: 60px 0 30px 0;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5169\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/bb_title.png\" alt=\"bb_title\" width=\"1000\" height=\"190\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/bb_title.png 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/bb_title-300x57.png 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/bb_title-768x146.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<div class=\"cmpro\">\n<h3>VIDEO<\/h3>\n<div class=\"cmvideo\" style=\"padding-bottom: 56.3%;\"><iframe loading=\"lazy\" width=\"1000\" height=\"563\" src=\"https:\/\/www.youtube.com\/embed\/waD-u7XqPWs?rel=0&amp;controls=1&amp;showinfo=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>LOGO DESIGN<\/h3>\n<div class=\"noshadow\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5160\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/logo2.png\" alt=\"logo2\" width=\"1000\" height=\"292\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/logo2.png 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/logo2-300x88.png 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/logo2-768x224.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>TYPO ANIMATION &#8211; JAVASCRIPT TO DRAW ON CANVAS<\/h3>\n<div class=\"noshadow\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5157\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/nytypo.gif\" alt=\"nytypo\" width=\"1000\" height=\"272\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>LINE ANIMATION &#8211; JAVASCRIPT TO DRAW ON CANVAS<\/h3>\n<div class=\"noshadow\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5165\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/line3.gif\" alt=\"line3\" width=\"1000\" height=\"250\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>MASKING TRANSITION &#8211; JAVASCRIPT TO DRAW ON CANVAS<\/h3>\n<div class=\"noshadow\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5163\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/mask.gif\" alt=\"mask\" width=\"1000\" height=\"420\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>SKEW BOUNCING TRANSITION &#8211; JAVASCRIPT WITH CSS3 TRANSFORM<\/h3>\n<div class=\"noshadow\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5166\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/skew.gif\" alt=\"skew\" width=\"1000\" height=\"420\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>LOADING<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5144\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/start2.gif\" alt=\"start2\" width=\"1000\" height=\"563\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>LIST<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5141\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ac1.jpg\" alt=\"ac1\" width=\"1000\" height=\"563\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ac1.jpg 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ac1-300x169.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ac1-768x432.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>LIST PAGING TRANSITION<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5145\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/paging.gif\" alt=\"paging\" width=\"1000\" height=\"563\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>LIST TO VIEW TRANSITION<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5151\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/select.gif\" alt=\"select\" width=\"1000\" height=\"563\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>VIEW PAGING TRANSITION<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5155\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/vpaging.gif\" alt=\"vpaging\" width=\"1000\" height=\"563\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>VIDEO PLAYER<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5134\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab3.jpg\" alt=\"ab3\" width=\"1000\" height=\"563\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab3.jpg 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab3-300x169.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab3-768x432.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>GIF PLAYER<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5136\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab5.jpg\" alt=\"ab5\" width=\"1000\" height=\"563\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab5.jpg 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab5-300x169.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab5-768x432.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>MORE FUNCTION<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5135\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab4.jpg\" alt=\"ab4\" width=\"1000\" height=\"563\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab4.jpg 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab4-300x169.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab4-768x432.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5146\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/more.gif\" alt=\"more\" width=\"1000\" height=\"563\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>ABOUT<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5137\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab6.jpg\" alt=\"ab6\" width=\"1000\" height=\"563\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab6.jpg 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab6-300x169.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab6-768x432.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>ABOUT TRANSITION<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5147\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/about.gif\" alt=\"about\" width=\"1000\" height=\"563\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>SUBMIT<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5138\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab7.jpg\" alt=\"ab7\" width=\"1000\" height=\"563\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab7.jpg 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab7-300x169.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab7-768x432.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5153\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/submit3.gif\" alt=\"submit3\" width=\"1000\" height=\"563\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>ABOUT TO SUBMIT TRANSITION<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5152\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/stoa.gif\" alt=\"stoa\" width=\"1000\" height=\"563\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>SEARCH FUNCTION<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5150\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/search.gif\" alt=\"search\" width=\"1000\" height=\"563\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>HELP<\/h3>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5140\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab9.jpg\" alt=\"ab9\" width=\"1000\" height=\"563\" srcset=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab9.jpg 1000w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab9-300x169.jpg 300w, http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/ab9-768x432.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>RESPONSIVE<\/h3>\n<div class=\"noshadow\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5149\" src=\"http:\/\/blog.cmiscm.com\/wp-content\/uploads\/2016\/05\/response4.gif\" alt=\"response4\" width=\"1000\" height=\"563\" \/><\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>DESCRIPTION<\/h3>\n<div class=\"des\">\n<p>Booounce is a collection of visually inspiring short videos and GIFs, featuring engaging animations and transitions throughout the website. The concept of a &#8220;Circle Line Animation&#8221; and &#8220;Bouncing Ball&#8221; was initially developed by myself and my wife for a new project, but the project was ultimately cancelled. I was particularly enamored with the concept and decided to reimagine it as a platform to share inspiring videos for motion design enthusiasts.<\/p>\n<p>The website was built using HTML5, CSS3, and JavaScript, and is designed to be fully responsive on all device sizes. To enhance the user experience, I developed my own animation libraries for the project, such as Typo animation, Skew bouncing transition, Line animation, Bouncing ball transition and Masking transitions. Additionally, I made efforts to optimize performance on mobile devices. The project name &#8220;Booounce&#8221; was inspired by the song <a href=\"https:\/\/www.youtube.com\/watch?v=_uYx13TPm-A\">&#8220;Bounce&#8221; by Cho Yong Pil<\/a>.<\/p>\n<\/div>\n<\/div>\n<div class=\"cmpro\">\n<h3>Technologies &amp; Tools<\/h3>\n<ul class=\"techtool\">\n<li>JavaScript<\/li>\n<li>CSS3<\/li>\n<li>HTML5<\/li>\n<li>Canvas<\/li>\n<li>UX\/UI Design<\/li>\n<li>Animation<\/li>\n<li>Interaction<\/li>\n<\/ul>\n<\/div>\n<div class=\"cmpro\">\n<h3>AWARDS<\/h3>\n<ul>\n<li><i>\u2022<\/i>The FWA, Site of the Day &#8211; May 2016<\/li>\n<\/ul>\n<\/div>\n<div class=\"cmpro\">\n<h3>URL<\/h3>\n<ul class=\"list\">\n<li><a href=\"http:\/\/booounce.cmiscm.com\/\" target=\"_blank\" rel=\"noopener\">http:\/\/booounce.cmiscm.com\/<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"cmpro\">\n<h3>ROLE<\/h3>\n<ul class=\"list\">\n<li>Solo work<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>VIDEO LOGO DESIGN TYPO ANIMATION &#8211; JAVASCRIPT TO DRAW ON CANVAS LINE ANIMATION &#8211; JAVASCRIPT TO DRAW ON CANVAS MASKING TRANSITION &#8211; JAVASCRIPT TO DRAW ON CANVAS SKEW BOUNCING TRANSITION &#8211; JAVASCRIPT WITH CSS3 TRANSFORM LOADING LIST LIST PAGING TRANSITION LIST TO VIEW TRANSITION VIEW PAGING TRANSITION VIDEO PLAYER GIF PLAYER MORE FUNCTION ABOUT ABOUT [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[7],"tags":[534,533],"class_list":["post-5055","post","type-post","status-publish","format-image","hentry","category-1project","tag-10th-personal-project","tag-booounce","post_format-post-format-image"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=\/wp\/v2\/posts\/5055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5055"}],"version-history":[{"count":0,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=\/wp\/v2\/posts\/5055\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5055"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.cmiscm.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}