{"id":834,"date":"2023-03-25T16:48:50","date_gmt":"2023-03-25T13:48:50","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=834"},"modified":"2023-03-25T16:48:54","modified_gmt":"2023-03-25T13:48:54","slug":"slider-2","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/834\/","title":{"rendered":"Slider"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"968\" style=\"aspect-ratio: 1418 \/ 968;\" width=\"1418\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-25_14-43-23.webm\"><\/video><\/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;header&gt;\n      &lt;div class=&quot;inner&quot;&gt;\n        &lt;div class=&quot;logo&quot;&gt;&lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/123024\/wwf-logo.png&quot;&gt;&lt;\/div&gt;\n        &lt;div class=&quot;burger&quot;&gt;&lt;\/div&gt;\n        &lt;nav&gt;\n          &lt;a class=&quot;active&quot; href=&quot;#&quot;&gt;Species&lt;\/a&gt;\n          &lt;a href=&quot;#&quot;&gt;About Us&lt;\/a&gt;\n          &lt;a href=&quot;#&quot;&gt;Our Work&lt;\/a&gt;\n          &lt;a href=&quot;#&quot;&gt;Get Involved&lt;\/a&gt;\n        &lt;\/nav&gt;\n        &lt;a href=&quot;#&quot; class=&quot;donate-link&quot;&gt;Donate&lt;\/a&gt;\n      &lt;\/div&gt;\n    &lt;\/header&gt;\n  \n    &lt;main&gt;\n      &lt;div id=&quot;slider&quot;&gt;\n  \n        &lt;div class=&quot;slider-inner&quot;&gt;\n          &lt;div id=&quot;slider-content&quot;&gt;\n            &lt;div class=&quot;meta&quot;&gt;Species&lt;\/div&gt;\n            &lt;h2 id=&quot;slide-title&quot;&gt;Amur &lt;br&gt;Leopard&lt;\/h2&gt;\n            &lt;span data-slide-title=&quot;0&quot;&gt;Amur &lt;br&gt;Leopard&lt;\/span&gt;\n            &lt;span data-slide-title=&quot;1&quot;&gt;Asiatic &lt;br&gt;Lion&lt;\/span&gt;\n            &lt;span data-slide-title=&quot;2&quot;&gt;Siberian &lt;br&gt;Tiger&lt;\/span&gt;\n            &lt;span data-slide-title=&quot;3&quot;&gt;Brown &lt;br&gt;Bear&lt;\/span&gt;\n            &lt;div class=&quot;meta&quot;&gt;Status&lt;\/div&gt;\n            &lt;div id=&quot;slide-status&quot;&gt;Critically Endangered&lt;\/div&gt;\n            &lt;span data-slide-status=&quot;0&quot;&gt;Critically Endangered&lt;\/span&gt;\n            &lt;span data-slide-status=&quot;1&quot;&gt;Endangered&lt;\/span&gt;\n            &lt;span data-slide-status=&quot;2&quot;&gt;Endangered&lt;\/span&gt;\n            &lt;span data-slide-status=&quot;3&quot;&gt;Least Concern&lt;\/span&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n  \n        &lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/123024\/leopard2.jpg&quot; \/&gt;\n        &lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/123024\/lion2.jpg&quot; \/&gt;\n        &lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/123024\/tiger2.jpg&quot; \/&gt;\n        &lt;img src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/123024\/bear2.jpg&quot; \/&gt;\n  \n        &lt;div id=&quot;pagination&quot;&gt;\n          &lt;button class=&quot;active&quot; data-slide=&quot;0&quot;&gt;&lt;\/button&gt;\n          &lt;button data-slide=&quot;1&quot;&gt;&lt;\/button&gt;\n          &lt;button data-slide=&quot;2&quot;&gt;&lt;\/button&gt;\n          &lt;button data-slide=&quot;3&quot;&gt;&lt;\/button&gt;\n        &lt;\/div&gt;\n  \n      &lt;\/div&gt;\n    &lt;\/main&gt;\n  \n    &lt;\/body&gt;\n  \n  &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r83\/three.js&quot;&gt;&lt;\/script&gt;\n  &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery.imagesloaded\/4.1.4\/imagesloaded.pkgd.js&quot;&gt;&lt;\/script&gt;\n  &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/1.20.4\/TweenMax.min.js&quot;&gt;&lt;\/script&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;}\">@charset &quot;UTF-8&quot;;\n@import url(&quot;https:\/\/use.typekit.net\/euz1eqv.css&quot;);\narticle, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {\n  display: block;\n}\n\naudio, canvas, video {\n  display: inline-block;\n}\n\naudio:not([controls]) {\n  display: none;\n  height: 0;\n}\n\n[hidden] {\n  display: none;\n}\n\nhtml {\n  font-family: sans-serif;\n  -ms-text-size-adjust: 100%;\n  -webkit-text-size-adjust: 100%;\n}\n\nbody {\n  margin: 0;\n}\n\na:focus {\n  outline: thin dotted;\n}\n\na:active, a:hover {\n  outline: 0;\n}\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\nabbr[title] {\n  border-bottom: 1px dotted;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\ndfn {\n  font-style: italic;\n}\n\nhr {\n  -moz-box-sizing: content-box;\n  box-sizing: content-box;\n  height: 0;\n}\n\nmark {\n  background: #ff0;\n  color: #000;\n}\n\ncode, kbd, pre, samp {\n  font-family: monospace, serif;\n  font-size: 1em;\n}\n\npre {\n  white-space: pre-wrap;\n}\n\nq {\n  quotes: &quot;&quot;&quot; &quot;&quot;&quot; &quot;'&quot; &quot;'&quot;;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub, sup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsup {\n  top: -0.5em;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nimg {\n  border: 0;\n}\n\nsvg:not(:root) {\n  overflow: hidden;\n}\n\nfigure {\n  margin: 0;\n}\n\nfieldset {\n  border: 1px solid #c0c0c0;\n  margin: 0 2px;\n  padding: 0.35em 0.625em 0.75em;\n}\n\nlegend {\n  border: 0;\n  padding: 0;\n}\n\nbutton, input, select, textarea {\n  font-family: inherit;\n  font-size: 100%;\n  margin: 0;\n}\n\nbutton, input {\n  line-height: normal;\n}\n\nbutton, select {\n  text-transform: none;\n}\n\nbutton, html input[type=button], input[type=reset], input[type=submit] {\n  -webkit-appearance: button;\n  cursor: pointer;\n}\n\nbutton[disabled], html input[disabled] {\n  cursor: default;\n}\n\ninput[type=checkbox], input[type=radio] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\ninput[type=search] {\n  -webkit-appearance: textfield;\n  -moz-box-sizing: content-box;\n  -webkit-box-sizing: content-box;\n  box-sizing: content-box;\n}\n\ninput[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\nbutton::-moz-focus-inner, input::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\ntextarea {\n  overflow: auto;\n  vertical-align: top;\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n::selection {\n  background-color: grey;\n  color: white;\n}\n\n::-moz-selection {\n  background-color: grey;\n  color: white;\n}\n\nhtml {\n  background: #fff;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\nbody {\n  background-color: #23272A;\n  overflow: hidden;\n}\n\nheader {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 115px;\n  z-index: 10;\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/123024\/menutexture.png);\n  background-position: center top;\n  background-size: auto 200px;\n  background-repeat: repeat-x;\n}\nheader .inner {\n  max-width: 1060px;\n  margin: 0 auto;\n  display: flex;\n  height: 70px;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\nheader .logo {\n  display: block;\n  width: 76px;\n  height: 90px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: white;\n  text-align: center;\n}\nheader .logo img {\n  width: 45px;\n  margin-top: 10px;\n}\nheader nav {\n  display: none;\n}\nheader nav a {\n  font-family: &quot;Arial&quot;, serif;\n  font-size: 12px;\n  color: #8c8c8e;\n  text-transform: uppercase;\n  letter-spacing: 3px;\n  text-decoration: none;\n  margin: 0 18px;\n}\nheader nav a.active, header nav a:hover {\n  color: white;\n}\n@media screen and (min-width: 800px) {\n  header nav {\n    display: block;\n  }\n}\nheader .burger {\n  display: block;\n  position: relative;\n  top: -6px;\n  padding-left: 30px;\n}\nheader .burger:before {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 30px;\n  height: 2px;\n  background: white;\n  box-shadow: 0 12px 0 0 white, 0 6px 0 0 white;\n}\n@media screen and (min-width: 800px) {\n  header .burger {\n    display: none;\n  }\n}\nheader .donate-link {\n  width: 72px;\n  text-align: center;\n  position: absolute;\n  right: 10px;\n  top: 27px;\n  font-family: &quot;Arial&quot;, sans-serif;\n  font-size: 12px;\n  color: white;\n  text-transform: uppercase;\n  letter-spacing: 3px;\n  text-decoration: none;\n  padding-bottom: 6px;\n  border-bottom: 2px solid rgba(255, 255, 255, 0.3);\n}\n\nmain {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n}\n\n#slider {\n  width: 100%;\n  max-width: 1200px;\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n}\n#slider canvas {\n  width: 150%;\n  height: 150%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 2;\n}\n#slider img {\n  width: 100%;\n  max-width: 100%;\n  position: relative;\n  z-index: 0;\n}\n\n.slider-inner {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  max-width: 1060px;\n  height: 100%;\n  margin: 0 auto;\n  z-index: 5;\n}\n\n#slider-content {\n  padding: 0 10px;\n}\n#slider-content h2 {\n  font-family: &quot;acta-display&quot;, serif;\n  font-weight: 400;\n  font-size: 30px;\n  letter-spacing: -1px;\n  color: white;\n  line-height: 30px;\n  margin: 20px 0 60px;\n}\n@media screen and (min-width: 800px) {\n  #slider-content h2 {\n    font-size: 110px;\n    line-height: 100px;\n  }\n}\n#slider-content span {\n  display: none;\n}\n#slider-content .meta {\n  display: inline-block;\n  font-family: &quot;Arial&quot;, sans-serif;\n  font-size: 11px;\n  letter-spacing: 5px;\n  color: #88888a;\n  text-transform: uppercase;\n  position: relative;\n}\n@media screen and (min-width: 800px) {\n  #slider-content .meta {\n    font-size: 13px;\n  }\n}\n#slider-content .meta:after {\n  content: &quot;&quot;;\n  display: block;\n  position: absolute;\n  top: 5px;\n  right: -55px;\n  width: 45px;\n  height: 2px;\n  background-color: #393d40;\n}\n#slider-content #slide-status {\n  margin-top: 10px;\n  font-family: &quot;acta-display&quot;, serif;\n  font-weight: 400;\n  font-size: 18px;\n  color: white;\n}\n@media screen and (min-width: 800px) {\n  #slider-content #slide-status {\n    font-size: 34px;\n  }\n}\n\n#pagination {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  right: 30px;\n  z-index: 6;\n}\n#pagination button {\n  display: block;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 0;\n  width: 16px;\n  height: 16px;\n  background-color: #FFFFFF;\n  border-radius: 100%;\n  padding: 0;\n  margin: 30px 0;\n  cursor: pointer;\n  position: relative;\n  opacity: 0.2;\n  transition: opacity 0.2s ease-in-out;\n  outline: none;\n}\n#pagination button:hover {\n  opacity: 0.5;\n}\n#pagination button.active {\n  opacity: 1;\n}\n#pagination button.active:before {\n  width: 300%;\n  height: 300%;\n  opacity: 1;\n}\n#pagination button:before {\n  content: &quot;&quot;;\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  border-radius: 100%;\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  opacity: 0;\n  transition: opacity 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;\n}\n\n\/* Page Loader *\/\n.loading:before {\n  content: &quot;&quot;;\n  position: fixed;\n  z-index: 100000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: black;\n}\n.loading:after {\n  content: &quot;&quot;;\n  position: fixed;\n  z-index: 100000;\n  top: 50%;\n  left: 50%;\n  width: 60px;\n  height: 60px;\n  margin: -30px 0 0 -30px;\n  pointer-events: none;\n  border-radius: 50%;\n  opacity: 0.4;\n  background: white;\n  animation: loaderAnim 0.7s linear infinite alternate forwards;\n}\n\n@keyframes loaderAnim {\n  to {\n    opacity: 1;\n    transform: scale3d(0.5, 0.5, 1);\n  }\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;}\">const displacementSlider = function (opts) {\n\n  let vertex = `\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }\n    `;\n\n  let fragment = `\n        \n        varying vec2 vUv;\n\n        uniform sampler2D currentImage;\n        uniform sampler2D nextImage;\n\n        uniform float dispFactor;\n\n        void main() {\n\n            vec2 uv = vUv;\n            vec4 _currentImage;\n            vec4 _nextImage;\n            float intensity = 0.3;\n\n            vec4 orig1 = texture2D(currentImage, uv);\n            vec4 orig2 = texture2D(nextImage, uv);\n            \n            _currentImage = texture2D(currentImage, vec2(uv.x, uv.y + dispFactor * (orig2 * intensity)));\n\n            _nextImage = texture2D(nextImage, vec2(uv.x, uv.y + (1.0 - dispFactor) * (orig1 * intensity)));\n\n            vec4 finalTexture = mix(_currentImage, _nextImage, dispFactor);\n\n            gl_FragColor = finalTexture;\n\n        }\n    `;\n\n  let images = opts.images,image,sliderImages = [];;\n  let canvasWidth = images[0].clientWidth;\n  let canvasHeight = images[0].clientHeight;\n  let parent = opts.parent;\n  let renderWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);\n  let renderHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n\n  let renderW, renderH;\n\n  if (renderWidth &gt; canvasWidth) {\n    renderW = renderWidth;\n  } else {\n    renderW = canvasWidth;\n  }\n\n  renderH = canvasHeight;\n\n  let renderer = new THREE.WebGLRenderer({\n    antialias: false });\n\n\n  renderer.setPixelRatio(window.devicePixelRatio);\n  renderer.setClearColor(0x23272A, 1.0);\n  renderer.setSize(renderW, renderH);\n  parent.appendChild(renderer.domElement);\n\n  let loader = new THREE.TextureLoader();\n  loader.crossOrigin = &quot;anonymous&quot;;\n\n  images.forEach(img =&gt; {\n\n    image = loader.load(img.getAttribute('src') + '?v=' + Date.now());\n    image.magFilter = image.minFilter = THREE.LinearFilter;\n    image.anisotropy = renderer.capabilities.getMaxAnisotropy();\n    sliderImages.push(image);\n\n  });\n\n  let scene = new THREE.Scene();\n  scene.background = new THREE.Color(0x23272A);\n  let camera = new THREE.OrthographicCamera(\n  renderWidth \/ -2,\n  renderWidth \/ 2,\n  renderHeight \/ 2,\n  renderHeight \/ -2,\n  1,\n  1000);\n\n\n  camera.position.z = 1;\n\n  let mat = new THREE.ShaderMaterial({\n    uniforms: {\n      dispFactor: { type: &quot;f&quot;, value: 0.0 },\n      currentImage: { type: &quot;t&quot;, value: sliderImages[0] },\n      nextImage: { type: &quot;t&quot;, value: sliderImages[1] } },\n\n    vertexShader: vertex,\n    fragmentShader: fragment,\n    transparent: true,\n    opacity: 1.0 });\n\n\n  let geometry = new THREE.PlaneBufferGeometry(\n  parent.offsetWidth,\n  parent.offsetHeight,\n  1);\n\n  let object = new THREE.Mesh(geometry, mat);\n  object.position.set(0, 0, 0);\n  scene.add(object);\n\n  let addEvents = function () {\n\n    let pagButtons = Array.from(document.getElementById('pagination').querySelectorAll('button'));\n    let isAnimating = false;\n\n    pagButtons.forEach(el =&gt; {\n\n      el.addEventListener('click', function () {\n\n        if (!isAnimating) {\n\n          isAnimating = true;\n\n          document.getElementById('pagination').querySelectorAll('.active')[0].className = '';\n          this.className = 'active';\n\n          let slideId = parseInt(this.dataset.slide, 10);\n\n          mat.uniforms.nextImage.value = sliderImages[slideId];\n          mat.uniforms.nextImage.needsUpdate = true;\n\n          TweenLite.to(mat.uniforms.dispFactor, 1, {\n            value: 1,\n            ease: 'Expo.easeInOut',\n            onComplete: function () {\n              mat.uniforms.currentImage.value = sliderImages[slideId];\n              mat.uniforms.currentImage.needsUpdate = true;\n              mat.uniforms.dispFactor.value = 0.0;\n              isAnimating = false;\n            } });\n\n\n          let slideTitleEl = document.getElementById('slide-title');\n          let slideStatusEl = document.getElementById('slide-status');\n          let nextSlideTitle = document.querySelectorAll(`[data-slide-title=&quot;${slideId}&quot;]`)[0].innerHTML;\n          let nextSlideStatus = document.querySelectorAll(`[data-slide-status=&quot;${slideId}&quot;]`)[0].innerHTML;\n\n          TweenLite.fromTo(slideTitleEl, 0.5,\n          {\n            autoAlpha: 1,\n            y: 0 },\n\n          {\n            autoAlpha: 0,\n            y: 20,\n            ease: 'Expo.easeIn',\n            onComplete: function () {\n              slideTitleEl.innerHTML = nextSlideTitle;\n\n              TweenLite.to(slideTitleEl, 0.5, {\n                autoAlpha: 1,\n                y: 0 });\n\n            } });\n\n\n          TweenLite.fromTo(slideStatusEl, 0.5,\n          {\n            autoAlpha: 1,\n            y: 0 },\n\n          {\n            autoAlpha: 0,\n            y: 20,\n            ease: 'Expo.easeIn',\n            onComplete: function () {\n              slideStatusEl.innerHTML = nextSlideStatus;\n\n              TweenLite.to(slideStatusEl, 0.5, {\n                autoAlpha: 1,\n                y: 0,\n                delay: 0.1 });\n\n            } });\n\n\n        }\n\n      });\n\n    });\n\n  };\n\n  addEvents();\n\n  window.addEventListener('resize', function (e) {\n    renderer.setSize(renderW, renderH);\n  });\n\n  let animate = function () {\n    requestAnimationFrame(animate);\n\n    renderer.render(scene, camera);\n  };\n  animate();\n};\n\nimagesLoaded(document.querySelectorAll('img'), () =&gt; {\n\n  document.body.classList.remove('loading');\n\n  const el = document.getElementById('slider');\n  const imgs = Array.from(el.querySelectorAll('img'));\n  new displacementSlider({\n    parent: el,\n    images: imgs });\n\n\n});<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":836,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[27,17],"class_list":["post-834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider","tag-gsap","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/834","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=834"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/834\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/836"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}