{"id":1479,"date":"2023-05-21T19:33:25","date_gmt":"2023-05-21T16:33:25","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1479"},"modified":"2023-05-21T19:33:26","modified_gmt":"2023-05-21T16:33:26","slug":"masked-circle-slider","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/1479\/","title":{"rendered":"Masked Circle Slider"},"content":{"rendered":"<figure class=\"wp-block-embed is-provider-youtube wp-block-embed-youtube\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Masked Circle Slider\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/5cMeVzvizQY?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;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/slick-carousel\/1.8.1\/slick.min.css&quot;&gt;\n  &lt;link href=&#039;https:\/\/fonts.googleapis.com\/css?family=Roboto:300|400&#039; rel=&#039;stylesheet&#039; type=&#039;text\/css&#039;&gt;\n\n  &lt;div class=&quot;slider&quot; id=&quot;slider-1&quot;&gt;\n    &lt;div class=&quot;item&quot;&gt;\n      &lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; class=&quot;original&quot;&gt;\n        &lt;image width=&quot;100%&quot; height=&quot;100%&quot; preserveaspectratio=&quot;xMidYMid slice&quot; xlink:href=&quot;https:\/\/github.com\/supahfunk\/supah-codepen\/blob\/master\/flowers\/1.jpg?raw=true&quot; mask=&quot;url(#donutmask)&quot;&gt;&lt;\/image&gt;\n      &lt;\/svg&gt;\n      &lt;div class=&quot;tit&quot;&gt;DAISY&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;item&quot;&gt;\n      &lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; class=&quot;original&quot;&gt;\n        &lt;image width=&quot;100%&quot; height=&quot;100%&quot; preserveaspectratio=&quot;xMidYMid slice&quot; xlink:href=&quot;https:\/\/github.com\/supahfunk\/supah-codepen\/blob\/master\/flowers\/3.jpg?raw=true&quot;  mask=&quot;url(#donutmask)&quot;&gt;&lt;\/image&gt;  \n      &lt;\/svg&gt;\n      &lt;div class=&quot;tit&quot;&gt;CANDIDUM&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;item&quot;&gt;\n      &lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; class=&quot;original&quot;&gt;\n        &lt;image width=&quot;100%&quot; height=&quot;100%&quot; preserveaspectratio=&quot;xMidYMid slice&quot; xlink:href=&quot;https:\/\/github.com\/supahfunk\/supah-codepen\/blob\/master\/flowers\/4.jpg?raw=true&quot; mask=&quot;url(#donutmask)&quot;&gt;&lt;\/image&gt;  \n      &lt;\/svg&gt;\n      &lt;div class=&quot;tit&quot;&gt;MARIGOLD&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;item&quot;&gt;\n      &lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; class=&quot;original&quot;&gt;\n        &lt;image width=&quot;100%&quot; height=&quot;100%&quot; preserveaspectratio=&quot;xMidYMid slice&quot; xlink:href=&quot;https:\/\/github.com\/supahfunk\/supah-codepen\/blob\/master\/flowers\/2.jpg?raw=true&quot; mask=&quot;url(#donutmask)&quot;&gt;&lt;\/image&gt;  \n        \n      &lt;\/svg&gt;\n      &lt;div class=&quot;tit&quot;&gt;BLOSSOM&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  \n  &lt;svg&gt;\n    &lt;defs&gt;\n      &lt;mask id=&quot;donutmask&quot;&gt;\n        &lt;circle id=&quot;outer&quot; cx=&quot;250&quot; cy=&quot;250&quot; r=&quot;400&quot; fill=&quot;white&quot;\/&gt;\n        &lt;circle id=&quot;inner&quot; cx=&quot;250&quot; cy=&quot;250&quot; r=&quot;300&quot;\/&gt;\n      &lt;\/mask&gt;\n    &lt;\/defs&gt;\n  &lt;\/svg&gt;\n  \n  &lt;div class=&quot;cursor&quot;&gt;&lt;\/div&gt;\n\n\n  &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js&quot;  &gt;&lt;\/script&gt; \n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-easing\/1.4.1\/jquery.easing.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/slick-carousel\/1.8.1\/slick.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;}\">html, body {\n\theight: 100vh;\n\toverflow: hidden;\n\tcursor: none;\n  }\n  @media (pointer: coarse) {\n\thtml, body {\n\t  cursor: default;\n\t}\n  }\n  \n  .slider {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100vw;\n\theight: 100vh;\n\ttransition: 0.5s ease-in-out;\n  }\n  .down .slider {\n\ttransform: scale(0.9);\n  }\n  .down .slider .item .tit {\n\topacity: 0;\n  }\n  .slider * {\n\toutline: none;\n  }\n  .slider .item {\n\tposition: relative;\n\tz-index: 1;\n\twidth: 100vw;\n\theight: 100vh;\n  }\n  .slider .item svg {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100vw;\n\theight: 100vh;\n\tz-index: 1;\n  }\n  .slider .item .tit {\n\ttext-align: center;\n\tposition: absolute;\n\tz-index: 10;\n\ttop: 50%;\n\tleft: 0;\n\twidth: 100%;\n\ttransform: translateY(-50%);\n\tletter-spacing: 2rem;\n\tcolor: #fff;\n\tfont-family: Roboto, sans-serif;\n\tfont-size: 7vw;\n\ttransition: all 0.3s ease-in-out;\n  }\n  \n  #slider-1 {\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 0;\n\tleft: 0;\n  }\n  #slider-1 .tit {\n\tdisplay: none;\n  }\n  \n  #slider-2 {\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 0;\n\tleft: 0;\n\ttransform: scale(1) !important;\n\tpointer-events: none;\n  }\n  \n  .cursor {\n\tpointer-events: none;\n\tposition: absolute;\n\twidth: 30px;\n\theight: 30px;\n\tmargin-top: -15px;\n\tmargin-left: -15px;\n\tborder-radius: 50%;\n\tbackground: rgba(255, 255, 255, 0.2);\n\tbox-shadow: 0 0 0 5px rgba(0, 0, 0, 0.05);\n\ttransition: transform ease-in-out 0.2s, background ease-in-out 0.2s;\n\ttransform: translateZ(0);\n\tz-index: 100;\n\tleft: -9999px;\n  }\n  .cursor:before, .cursor:after {\n\tcontent: &quot;&quot;;\n\tposition: absolute;\n\tborder-left: 6px solid rgba(255, 255, 255, 0.5);\n\tborder-top: 6px solid transparent;\n\tborder-bottom: 6px solid transparent;\n\ttop: 10px;\n\tleft: 52px;\n\topacity: 0;\n\ttransition: left ease-in-out 0.1s, opacity ease-in-out 0.2s;\n  }\n  .cursor:after {\n\tborder-left: none;\n\tborder-right: 6px solid rgba(255, 255, 255, 0.5);\n\tleft: -27px;\n  }\n  .down .cursor {\n\ttransform: scale(0.7) translateZ(0);\n\tbackground: rgba(255, 255, 255, 0.4);\n  }\n  .down .cursor:before, .down .cursor:after {\n\topacity: 1;\n\tleft: 49px;\n  }\n  .down .cursor:after {\n\tleft: -24px;\n  }\n  @media (pointer: coarse) {\n\t.cursor {\n\t  display: none;\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;}\">$('.slider').clone().removeAttr('id').attr('id', 'slider-2').appendTo('body');\n\n$('#slider-1').slick({\n    arrows: false,\n    speed: 750,\n    asNavFor: '#slider-2',\n    dots: false\n}).on('mousedown touchstart', function () {\n    $('body').addClass('down');\n}).on('mouseleave mouseup touchend', function () {\n    $('body').removeClass('down');\n});\n\n$(window).on('keydown', function () {\n    $('body').addClass('down');\n}).on('keyup', function () {\n    $('body').removeClass('down');\n});\n\n$('#slider-2').slick({\n    fade: true,\n    arrows: false,\n    speed: 300,\n    asNavFor:\n    '#slider-1',\n    dots: false\n});\n\nsetTimeout(function(){\n  $(window).trigger('keydown');\n  setTimeout(function(){\n    $('#slider-1').slick('slickNext');\n    setTimeout(function(){\n      $(window).trigger('keyup');\n    }, 500);\n  }, 600);\n}, 1500);\n\n$('#slider-1 image').removeAttr('mask');\n\n$(window).on('resize', function () {\n    $('#donutmask circle').attr({\n        cx: $(window).width() \/ 2,\n        cy: $(window).height() \/ 2\n    });\n    $('#donutmask #outer').attr({\n        r: $(window).height() \/ 2.6\n    });\n    $('#donutmask #inner').attr({\n        r: $(window).height() \/ 4.5\n    });\n}).resize();\n\n$(window).on('mousemove', function(e){\n  $('.cursor').css({\n    top: e.pageY + 'px',\n    left: e.pageX + 'px',\n  })\n});\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1480,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[17],"class_list":["post-1479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1479","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=1479"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1479\/revisions"}],"predecessor-version":[{"id":1481,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1479\/revisions\/1481"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1480"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}