{"id":1467,"date":"2023-05-20T21:46:43","date_gmt":"2023-05-20T18:46:43","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1467"},"modified":"2023-05-20T21:46:44","modified_gmt":"2023-05-20T18:46:44","slug":"before-after-viewer","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/1467\/","title":{"rendered":"Before\/After viewer"},"content":{"rendered":"<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Before\/After viewer\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Tsw2t3909Pg?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;!-- Adding TweenMax (or TweenLite+CSSPLugin) and Draggable --&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/latest\/TweenMax.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/latest\/utils\/Draggable.min.js&quot;&gt;&lt;\/script&gt;\n\n&lt;!-- The actual markup --&gt;\n&lt;ul id=&quot;controls&quot;&gt;\n\t&lt;li class=&quot;to-start&quot;&gt;Before&lt;\/li&gt;\n\t&lt;li class=&quot;to-middle&quot;&gt;Compare&lt;\/li&gt;\n\t&lt;li class=&quot;to-end&quot;&gt;After&lt;\/li&gt;\n&lt;\/ul&gt;\n\t\t\n&lt;div id=&quot;before-after&quot;&gt;\n\t&lt;div class=&quot;view view-after&quot;&gt;&lt;img src=&quot;https:\/\/images.unsplash.com\/photo-1509967419530-da38b4704bc6?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=1195&amp;q=80&quot; \/&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;view view-before&quot;&gt;&lt;img src=&quot;https:\/\/images.unsplash.com\/photo-1509967419530-da38b4704bc6?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=1195&amp;q=80&quot; \/&gt;&lt;\/div&gt;\n\t&lt;div id=&quot;dragme&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n  \n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.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;}\">\nbody {\n\tbackground-image: url('https:\/\/images.unsplash.com\/photo-1559827260-dc66d52bef19?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=1170&amp;q=80');\n\tbackground-size: cover;\n}\n\n\nbody, div, p{\n\n\tmargin: 0;\n\tpadding: 0;\n\tfont-family: Helvetica, sans-serif;\n}\n\t\t\t\n\t#before-after{\n\t\tposition: relative;\n\t\twidth: 600px;\n\t\theight: 500px;\n\t\tborder: 2px solid grey;\n\t\tmargin: 50px auto 0px;;\n\t}\n\t\t\t\n\t\t.view{\n\t\t\tdisplay: flex;\n\t\t\tposition: absolute;\n\t\t\ttop: 0px;\n\t\t\tleft: 0px;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\toverflow: hidden;\n\t\t}\n\t\t\t\t\n\t\t  .view-before{\n\t\t\t  z-index: 100;\n\t\t\t  \n\t\t  }\n\t\t\t\t\n\t\t  .posle {\n\t\t\t\n\t\t  }\n\n      .view-after{\n\t\t\t\tz-index: 200;\n\t\t\t\tfilter: grayscale(100%);\n\t\t\t}\n\t\t\t\n\t\t\t#dragme{\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 5px;\n\t\t\t\theight: 100%;\n\t\t\t\ttop: 0px;\n\t\t\t\tleft: 0px;\n\t\t\t\tbackground-color: black;\n\t\t\t\tcursor: pointer;\n\t\t\t\tz-index: 300;\n\t\t\t}\n\t\t\t\n\t\t\t\/*\n\t\t\t\tControls\n\t\t\t*\/\n\t\t\t\n\t\tul{\n\t\t\ttext-align: center;\n\t\t\tmargin-top: 50px;\n\t\t}\n\t\t\t\n\t\t\tul li{\n\t\t\t\tlist-style: none;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tfont-size: 17px;\n\t\t\t\tcursor: pointer;\n\t\t\t\tmargin: 0px 20px 0px 20px\n\t\t\t}<\/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;}\">$(function(){\t\n  \n  var $dragMe\t\t\t    = $(&quot;#dragme&quot;);\n  var $beforeAfter\t\t= $(&quot;#before-after&quot;);\n  var $viewAfter\t\t  = $(&quot;.view-after&quot;);\n\t\t\t\t\n  Draggable.create($dragMe, {\n\t  type:&quot;left&quot;,\n\t  bounds: $beforeAfter,\n\t  onDrag:updateImages\n  });\n\t\t\t   \t\t\t    \n  function updateImages(){\n\t  TweenLite.set($viewAfter, {width: $dragMe.css(&quot;left&quot;) });\t\t\/\/or this.x if only dragging\n  }\n\t\t\t   \n  \/\/Intro Animation\n  animateTo(350);\n\t\t\t   \n  \/\/Externall nav\n  $(&quot;.to-start&quot;).on(&quot;click&quot;, function(){\n\t  animateTo(0);\n  });\n\t\t\t   \n  $(&quot;.to-middle&quot;).on(&quot;click&quot;, function(){\n\t  animateTo(298);  \n  });\n\t\t\t   \n  $(&quot;.to-end&quot;).on(&quot;click&quot;, function(){\n\t  animateTo(598);\n  });\n\t\t\t   \n  function animateTo(_left){\n\t  TweenLite.to( $dragMe, 1, {left: _left, onUpdate: updateImages });\n  }\n  \n  \/\/V2 Click added\n  $beforeAfter.on(&quot;click&quot;, function(event){\t\t\t   \t\t\n\t  var eventLeft = event.clientX - $beforeAfter.offset().left;\n\t  animateTo(eventLeft);\n  });\n    \n\t\t\t\t\n});\/\/end jQuery wrapper<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1468,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[17,39],"class_list":["post-1467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other","tag-jquery","tag-tweenmax"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1467","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=1467"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1467\/revisions"}],"predecessor-version":[{"id":1469,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1467\/revisions\/1469"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1468"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}