{"id":7,"date":"2024-06-19T16:38:13","date_gmt":"2024-06-19T07:38:13","guid":{"rendered":"https:\/\/kano-studio.com\/?page_id=7"},"modified":"2024-07-09T09:24:06","modified_gmt":"2024-07-09T00:24:06","slug":"%e3%81%8a%e5%95%8f%e5%90%88%e3%81%9b%e3%83%9a%e3%83%bc%e3%82%b8","status":"publish","type":"page","link":"https:\/\/kano-studio.com\/?page_id=7","title":{"rendered":"\u304a\u554f\u5408\u305b"},"content":{"rendered":"\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f47-o1\" lang=\"ja\" dir=\"ltr\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F7#wpcf7-f47-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"\u30b3\u30f3\u30bf\u30af\u30c8\u30d5\u30a9\u30fc\u30e0\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"47\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.9.6\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"ja\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f47-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/div>\n<div class=\"contact-form\">\n\t<p><label> \u6c0f\u540d<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"80\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span> <\/label>\n\t<\/p>\n\t<p><label> \u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"80\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email input-field\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span> <\/label>\n\t<\/p>\n\t<p><label> \u96fb\u8a71\u756a\u53f7<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-phone\"><input size=\"40\" maxlength=\"80\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel input-field\" autocomplete=\"tel\" aria-invalid=\"false\" value=\"\" type=\"tel\" name=\"your-phone\" \/><\/span> <\/label>\n\t<\/p>\n\t<p><label> \u984c\u540d<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-subject\"><input size=\"40\" maxlength=\"80\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-subject\" \/><\/span> <\/label>\n\t<\/p>\n\t<p><label> \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u7a2e\u985e<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"project-type\"><select class=\"wpcf7-form-control wpcf7-select wpcf7-validates-as-required input-field\" aria-required=\"true\" aria-invalid=\"false\" name=\"project-type\"><option value=\"Web\u30b5\u30a4\u30c8\u5236\u4f5c\">Web\u30b5\u30a4\u30c8\u5236\u4f5c<\/option><option value=\"EC\u30b5\u30a4\u30c8\u5236\u4f5c\">EC\u30b5\u30a4\u30c8\u5236\u4f5c<\/option><option value=\"SEO\u5bfe\u7b56\">SEO\u5bfe\u7b56<\/option><option value=\"Web\u30b5\u30a4\u30c8\u30ea\u30cb\u30e5\u30fc\u30a2\u30eb\">Web\u30b5\u30a4\u30c8\u30ea\u30cb\u30e5\u30fc\u30a2\u30eb<\/option><option value=\"\u305d\u306e\u4ed6\">\u305d\u306e\u4ed6<\/option><\/select><\/span> <\/label>\n\t<\/p>\n\t<p><label> \u4e88\u7b97<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"budget\"><select class=\"wpcf7-form-control wpcf7-select wpcf7-validates-as-required input-field\" aria-required=\"true\" aria-invalid=\"false\" name=\"budget\"><option value=\"10\u4e07\u5186\u672a\u6e80\">10\u4e07\u5186\u672a\u6e80<\/option><option value=\"10\u4e07\u5186\u301c50\u4e07\u5186\">10\u4e07\u5186\u301c50\u4e07\u5186<\/option><option value=\"50\u4e07\u5186\u301c100\u4e07\u5186\">50\u4e07\u5186\u301c100\u4e07\u5186<\/option><option value=\"100\u4e07\u5186\u4ee5\u4e0a\">100\u4e07\u5186\u4ee5\u4e0a<\/option><\/select><\/span> <\/label>\n\t<\/p>\n\t<p><label> \u5e0c\u671b\u7d0d\u671f<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"desired-deadline\"><input class=\"wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date input-field\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"date\" name=\"desired-deadline\" \/><\/span> <\/label>\n\t<\/p>\n\t<p><label> \u30e1\u30c3\u30bb\u30fc\u30b8\u672c\u6587 (\u4efb\u610f)<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-textarea input-field\" aria-invalid=\"false\" name=\"your-message\"><\/textarea><\/span> <\/label>\n\t<\/p>\n\t<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"\u9001\u4fe1\" \/>\n\t<\/p>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Scroll Animation with Random Image Gallery<\/title>\n<style>\n\/* \u30ae\u30e3\u30e9\u30ea\u30fc\u306e\u753b\u50cf\u3092\u9069\u5207\u306b\u30b9\u30bf\u30a4\u30eb\u3059\u308b\u305f\u3081\u306eCSS *\/\n#gallery {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  max-width: 800px; \/* \u30ae\u30e3\u30e9\u30ea\u30fc\u306e\u6700\u5927\u5e45\u3092\u8a2d\u5b9a *\/\n  margin: 0 auto;\n}\n\n.gallery-item {\n  margin: 10px;\n  width: calc(33.33% - 20px); \/* 3\u5217\u306e\u30ec\u30a4\u30a2\u30a6\u30c8 *\/\n  height: auto;\n  overflow: hidden;\n  border-radius: 10px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  opacity: 0; \/* \u6700\u521d\u306f\u900f\u660e *\/\n  transform: translateY(40px); \/* \u6700\u521d\u306f\u5c11\u3057\u4e0b\u306b\u305a\u3089\u3057\u3066\u304a\u304f *\/\n  transition: opacity 0.6s ease, transform 0.6s ease; \/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8a2d\u5b9a *\/\n}\n\n.gallery-item img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 10px;\n}\n\n\/* \u30b9\u30af\u30ed\u30fc\u30eb\u6642\u306b\u8868\u793a\u3055\u305b\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n.gallery-item.show {\n  opacity: 1;\n  transform: translateY(0);\n}\n<\/style>\n<\/head>\n<body>\n\n<div id=\"gallery\"><\/div>\n\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"><\/script>\n<script>\n$(document).ready(function() {\n  \/\/ \u8868\u793a\u3057\u305f\u3044\u753b\u50cf\u306e\u30d1\u30b9\u306e\u914d\u5217\n  var images = [\n    \"image1.jpg\",\n    \"image2.jpg\",\n    \"image3.jpg\",\n    \"image4.jpg\",\n    \"image5.jpg\",\n    \"image6.jpg\",\n    \"image7.jpg\",\n    \"image8.jpg\",\n    \"image9.jpg\",\n    \"image10.jpg\"\n  ];\n\n  \/\/ \u753b\u50cf\u3092\u30e9\u30f3\u30c0\u30e0\u306b\u30b7\u30e3\u30c3\u30d5\u30eb\u3059\u308b\u95a2\u6570\n  function shuffleArray(array) {\n    for (var i = array.length - 1; i > 0; i--) {\n      var j = Math.floor(Math.random() * (i + 1));\n      var temp = array[i];\n      array[i] = array[j];\n      array[j] = temp;\n    }\n    return array;\n  }\n\n  \/\/ \u753b\u50cf\u306e\u914d\u5217\u3092\u30e9\u30f3\u30c0\u30e0\u306b\u30b7\u30e3\u30c3\u30d5\u30eb\u3059\u308b\n  var shuffledImages = shuffleArray(images);\n\n  \/\/ \u30ae\u30e3\u30e9\u30ea\u30fc\u306b\u753b\u50cf\u3092\u8868\u793a\u3059\u308b\n  var gallery = $(\"#gallery\");\n  shuffledImages.forEach(function(imageSrc, index) {\n    var img = $(\"<img>\").attr(\"src\", imageSrc).attr(\"alt\", \"Image\");\n    var item = $(\"<div>\").addClass(\"gallery-item\").append(img);\n    gallery.append(item);\n\n    \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u6642\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u51e6\u7406\n    $(window).scroll(function() {\n      \/\/ \u5404\u8981\u7d20\u3054\u3068\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u4f4d\u7f6e\u3092\u305a\u3089\u3057\u3066\u8868\u793a\u3059\u308b\n      if ($(window).scrollTop() > item.offset().top - $(window).height() \/ 1.5) {\n        setTimeout(function() {\n          item.addClass(\"show\");\n        }, index * 200); \/\/ \u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u306b\u5fdc\u3058\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u305a\u308c\u3092\u8a2d\u5b9a\n      }\n    });\n  });\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Scroll Animation with Random Image Gallery<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"swell_btn_cv_data":"","footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kano-studio.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kano-studio.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kano-studio.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kano-studio.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kano-studio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":15,"href":"https:\/\/kano-studio.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":801,"href":"https:\/\/kano-studio.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/801"}],"wp:attachment":[{"href":"https:\/\/kano-studio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}