{"id":1249,"date":"2023-04-11T14:04:44","date_gmt":"2023-04-11T11:04:44","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1249"},"modified":"2023-04-11T14:04:47","modified_gmt":"2023-04-11T11:04:47","slug":"3d-carousel","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/1249\/","title":{"rendered":"3D carousel"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"3D carousel\" width=\"640\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/o6p8CfswU3g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;html id=&quot;html&quot;&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\n  &lt;body&gt;\n                \n    &lt;div id=&quot;drag-container&quot;&gt;\n  &lt;div id=&quot;spin-container&quot;&gt;\n    &lt;!-- Add your images (or video) here --&gt;\n    &lt;img src=&quot;https:\/\/images.pexels.com\/photos\/206395\/pexels-photo-206395.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;https:\/\/images.pexels.com\/photos\/1391498\/pexels-photo-1391498.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;https:\/\/images.pexels.com\/photos\/1382731\/pexels-photo-1382731.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;https:\/\/images.pexels.com\/photos\/1758144\/pexels-photo-1758144.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;https:\/\/images.pexels.com\/photos\/1462636\/pexels-photo-1462636.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;https:\/\/images.pexels.com\/photos\/1382734\/pexels-photo-1382734.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500&quot; alt=&quot;&quot;&gt;\n    &lt;img src=&quot;https:\/\/images.pexels.com\/photos\/1462636\/pexels-photo-1462636.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500&quot; alt=&quot;&quot;&gt;\n   \n\n    &lt;!-- Example image with link --&gt;\n    &lt;!-- &lt;a target=&quot;_blank&quot; href=&quot;https:\/\/images.pexels.com\/photos\/139829\/pexels-photo-139829.jpeg&quot;&gt;\n      &lt;img src=&quot;https:\/\/images.pexels.com\/photos\/139829\/pexels-photo-139829.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500&quot; alt=&quot;&quot;&gt;\n    &lt;\/a&gt; --&gt;\n\n    \n    \n    &lt;!-- Example add video  --&gt;\n    &lt;video controls autoplay=&quot;autoplay&quot; loop&gt;\n      &lt;source src=&quot;https:\/\/player.vimeo.com\/external\/322244668.sd.mp4?s=338c48ac2dfcb1d4c0689968b5baf94eee6ca0c1&amp;profile_id=165&amp;oauth2_token_id=57447761&quot; type=&quot;video\/mp4&quot;&gt;\n    &lt;\/video&gt;\n\n    &lt;!-- Text at center of ground --&gt;\n    &lt;p&gt;3D Tiktok Carousel&lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;div id=&quot;ground&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;div id=&quot;music-container&quot;&gt;&lt;\/div&gt;\n\n    &lt;script src=&quot;script.js&quot;&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">* {\n\tmargin: 0;\n\tpadding: 0;\n  }\n  \n  html,\n  body {\n\theight: 100%;\n\t\/* for touch screen *\/\n\ttouch-action: none; \n  }\n  \n  body {\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n\tbackground: #111;\n\t-webkit-perspective: 1000px;\n\t\t\tperspective: 1000px;\n\t-webkit-transform-style: preserve-3d;\n\t\t\ttransform-style: preserve-3d;\n  }\n  \n  #drag-container, #spin-container {\n\tposition: relative;\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n\tmargin: auto;\n\t-webkit-transform-style: preserve-3d;\n\t\t\ttransform-style: preserve-3d;\n\t-webkit-transform: rotateX(-10deg);\n\t\t\ttransform: rotateX(-10deg);\n  }\n  \n  #drag-container img, #drag-container video {\n\t-webkit-transform-style: preserve-3d;\n\t\t\ttransform-style: preserve-3d;\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\twidth: 100%;\n\theight: 100%;\n\tline-height: 200px;\n\tfont-size: 50px;\n\ttext-align: center;\n\t-webkit-box-shadow: 0 0 8px #fff;\n\t\t\tbox-shadow: 0 0 8px #fff;\n\t-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);\n  }\n  \n  #drag-container img:hover, #drag-container video:hover {\n\t-webkit-box-shadow: 0 0 15px #fffd;\n\t\t\tbox-shadow: 0 0 15px #fffd;\n\t-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);\n  }\n  \n  #drag-container p {\n\tfont-family: Serif;\n\tposition: absolute;\n\ttop: 100%;\n\tleft: 50%;\n\t-webkit-transform: translate(-50%,-50%) rotateX(90deg);\n\t\t\ttransform: translate(-50%,-50%) rotateX(90deg);\n\tcolor: #fff;\n  }\n  \n  #ground {\n\twidth: 900px;\n\theight: 900px;\n\tposition: absolute;\n\ttop: 100%;\n\tleft: 50%;\n\t-webkit-transform: translate(-50%,-50%) rotateX(90deg);\n\t\t\ttransform: translate(-50%,-50%) rotateX(90deg);\n\tbackground: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);\n  }\n  \n  #music-container {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n  }\n  \n  @-webkit-keyframes spin {\n\tfrom{\n\t  -webkit-transform: rotateY(0deg);\n\t\t\t  transform: rotateY(0deg);\n\t} to{\n\t  -webkit-transform: rotateY(360deg);\n\t\t\t  transform: rotateY(360deg);\n\t}\n  }\n  \n  @keyframes spin {\n\tfrom{\n\t  -webkit-transform: rotateY(0deg);\n\t\t\t  transform: rotateY(0deg);\n\t} to{\n\t  -webkit-transform: rotateY(360deg);\n\t\t\t  transform: rotateY(360deg);\n\t}\n  }\n  @-webkit-keyframes spinRevert {\n\tfrom{\n\t  -webkit-transform: rotateY(360deg);\n\t\t\t  transform: rotateY(360deg);\n\t} to{\n\t  -webkit-transform: rotateY(0deg);\n\t\t\t  transform: rotateY(0deg);\n\t}\n  }\n  @keyframes spinRevert {\n\tfrom{\n\t  -webkit-transform: rotateY(360deg);\n\t\t\t  transform: rotateY(360deg);\n\t} to{\n\t  -webkit-transform: rotateY(0deg);\n\t\t\t  transform: rotateY(0deg);\n\t}\n  }<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">\/\/ Author: Hoang Tran (https:\/\/fb.com\/99.hoangtran)\n\n\/\/ Github verson (1 file .html): https:\/\/github.com\/HoangTran0410\/3DCarousel\/blob\/master\/index.html\n\n\/\/ Give me a coffee &lt;3 https:\/\/github.com\/HoangTran0410\/HoangTran0410\/blob\/main\/DONATE.md\n\n\n\/\/ You can change global variables here:\nvar radius = 240; \/\/ how big of the radius\nvar autoRotate = true; \/\/ auto rotate or not\nvar rotateSpeed = -60; \/\/ unit: seconds\/360 degrees\nvar imgWidth = 120; \/\/ width of images (unit: px)\nvar imgHeight = 170; \/\/ height of images (unit: px)\n\n\/\/ Link of background music - set 'null' if you dont want to play background music\nvar bgMusicURL = 'https:\/\/api.soundcloud.com\/tracks\/143041228\/stream?client_id=587aa2d384f7333a886010d5f52f302a';\nvar bgMusicControls = true; \/\/ Show UI music control\n\n\/*\n     NOTE:\n       + imgWidth, imgHeight will work for video\n       + if imgWidth, imgHeight too small, play\/pause button in &lt;video&gt; will be hidden\n       + Music link are taken from: https:\/\/hoangtran0410.github.io\/Visualyze-design-your-own-\/?theme=HauMaster&amp;playlist=1&amp;song=1&amp;background=28\n       + Custom from code in tiktok video  https:\/\/www.facebook.com\/J2TEAM.ManhTuan\/videos\/1353367338135935\/\n*\/\n\n\n\/\/ ===================== start =======================\n\/\/ animation start after 1000 miliseconds\nsetTimeout(init, 1000);\n\nvar odrag = document.getElementById('drag-container');\nvar ospin = document.getElementById('spin-container');\nvar aImg = ospin.getElementsByTagName('img');\nvar aVid = ospin.getElementsByTagName('video');\nvar aEle = [...aImg, ...aVid]; \/\/ combine 2 arrays\n\n\/\/ Size of images\nospin.style.width = imgWidth + &quot;px&quot;;\nospin.style.height = imgHeight + &quot;px&quot;;\n\n\/\/ Size of ground - depend on radius\nvar ground = document.getElementById('ground');\nground.style.width = radius * 3 + &quot;px&quot;;\nground.style.height = radius * 3 + &quot;px&quot;;\n\nfunction init(delayTime) {\n  for (var i = 0; i &lt; aEle.length; i++) {\n    aEle[i].style.transform = &quot;rotateY(&quot; + (i * (360 \/ aEle.length)) + &quot;deg) translateZ(&quot; + radius + &quot;px)&quot;;\n    aEle[i].style.transition = &quot;transform 1s&quot;;\n    aEle[i].style.transitionDelay = delayTime || (aEle.length - i) \/ 4 + &quot;s&quot;;\n  }\n}\n\nfunction applyTranform(obj) {\n  \/\/ Constrain the angle of camera (between 0 and 180)\n  if(tY &gt; 180) tY = 180;\n  if(tY &lt; 0) tY = 0;\n\n  \/\/ Apply the angle\n  obj.style.transform = &quot;rotateX(&quot; + (-tY) + &quot;deg) rotateY(&quot; + (tX) + &quot;deg)&quot;;\n}\n\nfunction playSpin(yes) {\n  ospin.style.animationPlayState = (yes?'running':'paused');\n}\n\nvar sX, sY, nX, nY, desX = 0,\n    desY = 0,\n    tX = 0,\n    tY = 10;\n\n\/\/ auto spin\nif (autoRotate) {\n  var animationName = (rotateSpeed &gt; 0 ? 'spin' : 'spinRevert');\n  ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;\n}\n\n\/\/ add background music\nif (bgMusicURL) {\n  document.getElementById('music-container').innerHTML += `\n&lt;audio src=&quot;${bgMusicURL}&quot; ${bgMusicControls? 'controls': ''} autoplay loop&gt;    \n&lt;p&gt;If you are reading this, it is because your browser does not support the audio element.&lt;\/p&gt;\n&lt;\/audio&gt;\n`;\n}\n\n\/\/ setup events\ndocument.onpointerdown = function (e) {\n  clearInterval(odrag.timer);\n  e = e || window.event;\n  var sX = e.clientX,\n      sY = e.clientY;\n\n  this.onpointermove = function (e) {\n    e = e || window.event;\n    var nX = e.clientX,\n        nY = e.clientY;\n    desX = nX - sX;\n    desY = nY - sY;\n    tX += desX * 0.1;\n    tY += desY * 0.1;\n    applyTranform(odrag);\n    sX = nX;\n    sY = nY;\n  };\n\n  this.onpointerup = function (e) {\n    odrag.timer = setInterval(function () {\n      desX *= 0.95;\n      desY *= 0.95;\n      tX += desX * 0.1;\n      tY += desY * 0.1;\n      applyTranform(odrag);\n      playSpin(false);\n      if (Math.abs(desX) &lt; 0.5 &amp;&amp; Math.abs(desY) &lt; 0.5) {\n        clearInterval(odrag.timer);\n        playSpin(true);\n      }\n    }, 17);\n    this.onpointermove = this.onpointerup = null;\n  };\n\n  return false;\n};\n\ndocument.onmousewheel = function(e) {\n  e = e || window.event;\n  var d = e.wheelDelta \/ 20 || -e.detail;\n  radius += d;\n  init(1);\n};<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1250,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-1249","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1249"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1249\/revisions"}],"predecessor-version":[{"id":1251,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1249\/revisions\/1251"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1250"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}