{"id":8813,"date":"2018-11-26T06:53:27","date_gmt":"2018-11-26T06:53:27","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=8813"},"modified":"2020-10-23T11:33:16","modified_gmt":"2020-10-23T11:33:16","slug":"three-js-game-style-immersive-slider-selection-screen","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/three-js-game-style-immersive-slider-selection-screen\/","title":{"rendered":"THREE JS GAME STYLE IMMERSIVE SLIDER SELECTION SCREEN"},"content":{"rendered":"<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4><em><span style=\"text-decoration: underline;\"><strong>Author:<\/strong><\/span><\/em><\/h4>\n<ul>\n<li>Jamie Coulte<\/li>\n<li class=\".last-child\"><time>March 14, 2017<\/time><\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-link\"><\/div>\n<div class=\"info info-frontend\">\n<h4><em><span style=\"text-decoration: underline;\"><strong>Made with:<\/strong><\/span><\/em><\/h4>\n<ul>\n<li class=\".last-child\">HTML (Haml) \/ CSS (SCSS) \/ JavaScript<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h4 class=\"about-the-item\"><em><span style=\"text-decoration: underline;\"><strong>About the code:<\/strong><\/span><\/em><\/h4>\n<p>This is an amazing ANimation created in <strong>THREE.js<\/strong>! You&#8217;ll probably find a lot of the JS is sloppy and unoptimized.<br \/>\nThe transitions are done by using GSAP&#8217;s timeline max and the 3D UI is built using my deepUI JS plugin.<br \/>\nI honestly have no idea how I got to the final product. The concept began as just a simple product slider in THREE JS and eventually became more and more complicated as the development went on. The game the scene apparently belongs to is completely fictional and none of this will be used in production of course.<\/p>\n<p><span class=\"accent\"><em><strong>Compatible browsers:<\/strong><\/em>\u00a0<\/span>Chrome, Edge, Firefox, Opera, Safari<\/p>\n<p><span class=\"accent\"><em><strong>Dependencies:<\/strong><\/em>\u00a0<\/span>font-awesome.css, OrbitControls.js, jquery.js, TweenMax.js<\/p>\n<a href=\"https:\/\/codepen.io\/jcoulterdesign\/share\/zip\/ryzvqG\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n<a href=\"https:\/\/codepen.io\/jcoulterdesign\/pen\/ryzvqG\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Jamie Coulte March 14, 2017 Made with: HTML (Haml) \/ CSS (SCSS) \/ JavaScript About the code: This is an amazing ANimation created in THREE.js! You&#8217;ll probably find a lot of the JS is sloppy and unoptimized. The transitions are done by using GSAP&#8217;s timeline max and the 3D UI is built using my deepUI JS plugin. I honestly have no idea how I got to the final product. The concept began as just a simple product slider in THREE JS and eventually became more and more complicated as the development went on. The game the scene apparently belongs to is completely fictional and none of this will be used in production of course. Compatible browsers:\u00a0Chrome, Edge, Firefox, Opera, <!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":8823,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2384],"tags":[2388,2387,2386,2403],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/8813"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=8813"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/8813\/revisions"}],"predecessor-version":[{"id":22943,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/8813\/revisions\/22943"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/8823"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=8813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=8813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=8813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}