{"id":4866,"date":"2021-08-06T12:16:29","date_gmt":"2021-08-06T12:16:29","guid":{"rendered":"https:\/\/www.bearloga.space\/?page_id=4866"},"modified":"2021-08-06T12:16:29","modified_gmt":"2021-08-06T12:16:29","slug":"jquery-pilling","status":"publish","type":"page","link":"https:\/\/www.bearloga.space\/uk\/jquery-pilling\/","title":{"rendered":"JQuery \u2014 Pilling"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>\r\npagePiling.js \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d jQuery \u0434\u043b\u044f \u00ab\u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u00bb \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432 \u043c\u0430\u043a\u0435\u0442\u0430 \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043d\u0438\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.\r\n\r\n\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0435\u043c\u044b, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435 \u2014\r\n\r\r\n&lt;!DOCTYPE html>\r\n&lt;html xmlns = \"https:\/\/www.w3.org\/1999\/xhtml\">\r\n   &lt;head>\r\n      &lt;meta http-equiv = \"Content-Type\" content = \"text\/html; charset = utf-8\" \/>\r\n      &lt;link rel = \"stylesheet\" type = \"text\/css\" \r\n         href = \"https:\/\/fonts.googleapis.com\/css?family=Lato:300,400,700\" \/>\r\n\t\t\t\r\n      &lt;link rel = \"stylesheet\" type = \"text\/css\" \r\n         href = \"\/jquery\/src\/pagepilling\/jquery.pagepiling.css\" \/>\r\n\t\t\t\r\n      &lt;link rel = \"stylesheet\" type = \"text\/css\" \r\n         href = \"\/jquery\/src\/pagepilling\/examples.css\" \/>\r\n\r\n      &lt;script \r\n         src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js\">\r\n      &lt;\/script>\r\n\r\n      &lt;script type = \"text\/javascript\" \r\n         src = \"\/jquery\/src\/pagepilling\/jquery.pagepiling.min.js\">\r\n      &lt;\/script>\r\n\t\t\r\n      &lt;script type = \"text\/javascript\">\r\n         $(document).ready(function() {\r\n            $('#pagepiling').pagepiling({\r\n               menu: '#menu',\r\n               anchors: &#91;'page1', 'page2', 'page3', 'page4'],\r\n               sectionsColor: &#91;'#bfda00', '#2ebe21', '#2C3E50', '#51bec4'],\r\n\t\t\t\t\t\r\n               navigation: {\r\n                  'position': 'right',\r\n                  'tooltips': &#91;'Page 1', 'Page 2', 'Page 3', 'Pgae 4']\r\n               },\r\n               afterRender: function(){\r\n                  \/\/playing the video\r\n                  $('video').get(0).play();\r\n               }\r\n            });\r\n         });\r\n      &lt;\/script>\r\n\r\n      &lt;style>\r\n    \t   .section {\r\n            text-align:center;\r\n         }\r\n         #myVideo {\r\n            position: absolute;\r\n            z-index: 4;\r\n            right: 0;\r\n\t\t\t\t\r\n            bottom: 0;\r\n            top:0;\r\n            right:0;\r\n            width: 100%;\r\n            height: 100%;\r\n\t\t\t\t\r\n            background-size: 100% 100%;\r\n            background-color: black; \/* in case the video doesn't fit the whole page*\/\r\n            background-image: \/* our video *\/;\r\n            background-position: center center;\r\n            background-size: contain;\r\n            object-fit: cover; \/*cover video background *\/\r\n         }\r\n         #section1 .layer {\r\n            position: absolute;\r\n            z-index: 5;\r\n            width: 100%;\r\n            left: 0;\r\n            top: 43%;\r\n            height: 100%;\r\n         }\r\n         #section1 h1 {\r\n            color:#fff;\r\n         }\r\n         #infoMenu li a {\r\n            color: #fff;\r\n         }\r\n      &lt;\/style>\r\n   &lt;\/head>\r\n\t\r\n   &lt;body>\r\n      &lt;ul id = \"menu\">\r\n         &lt;li data-menuanchor = \"page1\" class = \"active\">\r\n            &lt;a href = \"#page1\">Page 1&lt;\/a>&lt;\/li>\r\n         \r\n         &lt;li data-menuanchor = \"page2\">&lt;a href = \"#page2\">\r\n            Page 2&lt;\/a>&lt;\/li>\r\n         \r\n         &lt;li data-menuanchor = \"page3\">&lt;a href = \"#page3\">\r\n            Page 3&lt;\/a>&lt;\/li>\r\n      &lt;\/ul>\r\n\r\n      &lt;div id = \"pagepiling\">\r\n        &lt;div class = \"section\" id = \"section1\">\r\n            &lt;video autoplay loop muted id = \"myVideo\">\r\n               &lt;source src = \"imgs\/flowers.mp4\" type = \"video\/mp4\">\r\n               &lt;source src = \"imgs\/flowers.webm\" type = \"video\/webm\">\r\n            &lt;\/video>\r\n         &lt;\/div>\r\n\t\t\t\r\n         &lt;div class = \"section\" id = \"section2\">\r\n            &lt;div class = \"intro\">\r\n               &lt;h1>No limits&lt;\/h1>\r\n               &lt;p>Anything is possible with Tutorialspoint&lt;\/p>\r\n            &lt;\/div>\r\n         &lt;\/div>\r\n\t\t\t\r\n         &lt;div class = \"section\" id = \"section4\">\r\n            &lt;div class = \"intro\">\r\n               &lt;h1>&lt;\/h1>\r\n               &lt;p>Simple Easy Learning&lt;\/p>\r\n            &lt;\/div>\r\n         &lt;\/div>\r\n         \r\n      &lt;\/div>\r\n   &lt;\/body>\r\n&lt;\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[154],"tags":[],"class_list":["post-4866","page","type-page","status-publish","hentry","category-jquery"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/pages\/4866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/comments?post=4866"}],"version-history":[{"count":0,"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/pages\/4866\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/media?parent=4866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/categories?post=4866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/tags?post=4866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}