{"id":1492,"date":"2023-05-24T23:27:30","date_gmt":"2023-05-24T20:27:30","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1492"},"modified":"2023-05-25T00:27:23","modified_gmt":"2023-05-24T21:27:23","slug":"photo-film-gallery","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/1492\/","title":{"rendered":"Photo film gallery"},"content":{"rendered":"\n<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=\"Photo film gallery\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/EJw-FUldRAk?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;div class=&quot;Container&quot;&gt;\n    &lt;!-- last card --&gt;\n    &lt;div class=&quot;Picture&quot;&gt;\n      &lt;img class=&quot;Picture-img&quot; src=&quot;https:\/\/images.unsplash.com\/photo-1684857580926-600f51d54175?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=687&amp;q=80&quot; alt=&quot;&quot; \/&gt;\n\n      &lt;div class=&quot;Picture-note&quot;&gt;&lt;span&gt; Web girls &lt;a class=&quot;Network&quot; href=&quot;&quot; target=&quot;_top&quot;&gt; &lt;\/a&gt;&lt;a class=&quot;Network&quot; href=&quot;#&quot; target=&quot;_top&quot;&gt;&lt;img src=&quot;https:\/\/www.freepnglogos.com\/uploads\/twitter-logo-png\/twitter-logo-vector-png-clipart-1.png&quot; alt=&quot;twitter&quot; \/&gt;&lt;\/a&gt;&lt;\/span&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;!-- other cards --&gt;\n    &lt;div class=&quot;Picture&quot;&gt;\n      &lt;img class=&quot;Picture-img&quot; src=&quot;https:\/\/picsum.photos\/id\/733\/400&quot; alt=&quot;&quot; \/&gt;\n      &lt;div class=&quot;Picture-note&quot;&gt;&lt;span&gt;Over the clouds&lt;\/span&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Picture&quot;&gt;\n      &lt;img class=&quot;Picture-img&quot; src=&quot;https:\/\/picsum.photos\/id\/613\/400&quot; alt=&quot;&quot; \/&gt;\n      &lt;div class=&quot;Picture-note&quot;&gt;&lt;span&gt;Golden Gate Bridge - San Francisco&lt;\/span&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Picture&quot;&gt;\n      &lt;img class=&quot;Picture-img&quot; src=&quot;https:\/\/picsum.photos\/id\/40\/400&quot; alt=&quot;&quot; \/&gt;\n      &lt;div class=&quot;Picture-note&quot;&gt;&lt;span&gt;Cat nose&lt;\/span&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Picture&quot;&gt;\n      &lt;img class=&quot;Picture-img&quot; src=&quot;https:\/\/picsum.photos\/id\/465\/400&quot; alt=&quot;&quot; \/&gt;\n      &lt;div class=&quot;Picture-note&quot;&gt;&lt;span&gt;Mountain&lt;\/span&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Picture&quot;&gt;\n      &lt;img class=&quot;Picture-img&quot; src=&quot;https:\/\/picsum.photos\/id\/1029\/400&quot; alt=&quot;&quot; \/&gt;\n      &lt;div class=&quot;Picture-note&quot;&gt;&lt;span&gt;Central Park - New York&lt;\/span&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Picture&quot;&gt;\n      &lt;img class=&quot;Picture-img&quot; src=&quot;https:\/\/picsum.photos\/id\/923\/400&quot; alt=&quot;&quot; \/&gt;\n      &lt;div class=&quot;Picture-note&quot;&gt;&lt;span&gt;Autumn&lt;\/span&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Picture&quot;&gt;\n      &lt;img class=&quot;Picture-img&quot; src=&quot;https:\/\/picsum.photos\/id\/425\/400&quot; alt=&quot;&quot; \/&gt;\n      &lt;div class=&quot;Picture-note&quot;&gt;&lt;span&gt;Coffee&lt;\/span&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Picture&quot;&gt;\n      &lt;img class=&quot;Picture-img&quot; src=&quot;https:\/\/picsum.photos\/id\/200\/400&quot; alt=&quot;&quot; \/&gt;\n      &lt;div class=&quot;Picture-note&quot;&gt;&lt;span&gt;An Irish cow enjoying the wind on the beach&lt;\/span&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Picture&quot;&gt;\n      &lt;img class=&quot;Picture-img&quot; src=&quot;https:\/\/picsum.photos\/id\/244\/400&quot; alt=&quot;&quot; \/&gt;\n      &lt;div class=&quot;Picture-note&quot;&gt;&lt;span&gt;pelicans at the water's edge&lt;\/span&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;Picture&quot;&gt;\n      &lt;img class=&quot;Picture-img&quot; src=&quot;https:\/\/picsum.photos\/id\/15\/400&quot; alt=&quot;&quot; \/&gt;\n      &lt;div class=&quot;Picture-note&quot;&gt;&lt;span&gt;Waterfall&lt;\/span&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&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;}\">@import url(&quot;https:\/\/fonts.googleapis.com\/css2?family=Caveat&quot;);\n\n.Container {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.Picture {\n  display: inline-block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  border: 5px solid #fff;\n  border-radius: 3px;\n  background: #fff;\n  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);\n  transform: translate(-50%, -50%);\n  user-select: none;\n  cursor: pointer;\n}\n\n.Picture-img {\n  display: block;\n  width: 300px;\n  height: 300px;\n  pointer-events: none;\n}\n\n.Picture-note {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 300px;\n  height: 70px;\n  padding: 12px 24px;\n  font-size: 1.5rem;\n  text-align: center;\n}\n\n.Network {\n  display: inline-block;\n  padding: 0 5px;\n}\n\n.Network img {\n  width: 1.5rem;\n  aspect-ratio: 1 \/ 1;\n  vertical-align: middle;\n}\n\n\/* --------------------- *\/\n\/* Other styles          *\/\n\/* --------------------- *\/\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  font-family: 'Caveat', serif;\n  overflow: hidden;\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 pictures = document.querySelectorAll('.Picture');\nvar previousTouch = undefined;\n\nfunction updateElementPosition(element, event) {\n  var movementX, movementY;\n\n  if (event.type === 'touchmove') {\n    const touch = event.touches[0];\n    movementX = previousTouch ? touch.clientX - previousTouch.clientX : 0;\n    movementY = previousTouch ? touch.clientY - previousTouch.clientY : 0;\n    previousTouch = touch;\n  } else {\n    movementX = event.movementX;\n    movementY = event.movementY;\n  }\n  \n  const elementY = parseInt(element.style.top || 0) + movementY;\n  const elementX = parseInt(element.style.left|| 0) + movementX;\n\n  element.style.top = elementY + &quot;px&quot;;\n  element.style.left = elementX + &quot;px&quot;;\n}\n\nfunction startDrag(element, event) {\n  const updateFunction = (event) =&gt; updateElementPosition(element, event);\n  const stopFunction = () =&gt; stopDrag({update: updateFunction, stop: stopFunction});\n  document.addEventListener(&quot;mousemove&quot;, updateFunction);\n  document.addEventListener(&quot;touchmove&quot;, updateFunction);\n  document.addEventListener(&quot;mouseup&quot;, stopFunction);\n  document.addEventListener(&quot;touchend&quot;, stopFunction);\n}\n\nfunction stopDrag(functions) {\n  previousTouch = undefined;\n  document.removeEventListener(&quot;mousemove&quot;, functions.update);\n  document.removeEventListener(&quot;touchmove&quot;, functions.update);\n  document.removeEventListener(&quot;mouseup&quot;, functions.stop);\n  document.removeEventListener(&quot;touchend&quot;, functions.stop);\n}\n\npictures.forEach(picture =&gt; {\n  const range = 100;\n  const randomX = Math.random() * (range * 2) - range;\n  const randomY = Math.random() * (range * 2) - range;\n  const randomRotate = Math.random() * (range \/ 2) - range \/ 4;\n  const startFunction = (event) =&gt; startDrag(picture, event);\n  picture.style.top = `${randomY}px`;\n  picture.style.left = `${randomX}px`;\n  picture.style.transform = `translate(-50%, -50%) rotate(${randomRotate}deg)`;\n  picture.addEventListener(&quot;mousedown&quot;, startFunction);\n  picture.addEventListener(&quot;touchstart&quot;, startFunction);\n});<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1493,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[],"class_list":["post-1492","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1492","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=1492"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1492\/revisions"}],"predecessor-version":[{"id":1494,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1492\/revisions\/1494"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1493"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}