{"id":9061,"date":"2021-11-05T13:29:04","date_gmt":"2021-11-05T04:29:04","guid":{"rendered":"https:\/\/klonklonklon.com\/apps\/note\/?page_id=9061"},"modified":"2021-12-14T13:22:07","modified_gmt":"2021-12-14T04:22:07","slug":"inred_mireikiritani","status":"publish","type":"page","link":"https:\/\/klonklonklon.com\/apps\/note\/inred_mireikiritani\/","title":{"rendered":"\u3010\u6850\u8c37\u7f8e\u73b2\u3011KLON\u00d7InRed\u30b3\u30e9\u30dc\u4f01\u753b\u7279\u8a2d\u30b5\u30a4\u30c8"},"content":{"rendered":"<link rel=\"stylesheet\" href=\"\/\/material-klonklonklon.com\/wp-page\/inred_kiritanimirei\/css\/style.css\"><\/link>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/1.19.1\/TweenMax.min.js?ver=1.0\"><\/script> <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/1.19.1\/TimelineMax.min.js?ver=1.0\"><\/script> <script type=\"text\/javascript\" src=\"https:\/\/file002.shop-pro.jp\/PA01387\/268\/js\/gsap.min.js\"><\/script> <script type=\"text\/javascript\" src=\"https:\/\/file002.shop-pro.jp\/PA01387\/268\/js\/ScrollMagic.js\"><\/script> <script type=\"text\/javascript\" src=\"https:\/\/file002.shop-pro.jp\/PA01387\/268\/js\/plugins\/animation.gsap.js\"><\/script> <script type=\"text\/javascript\" src=\"https:\/\/file002.shop-pro.jp\/PA01387\/268\/js\/plugins\/debug.addIndicators.js\"><\/script>\r\n<div id=\"top\" class=\"cd-main-content\">\r\n<section id=\"mv\">\r\n<div class=\"wrapper\">\r\n<div class=\"contLeft\">\r\n<h2><img src=\"https:\/\/material-klonklonklon.com\/wp-page\/inred_kiritanimirei\/img\/logo.svg\" alt=\"KLON\u00d7InRed\u3000\u6850\u8c37\u7f8e\u73b2\u7740\u7528\u30e2\u30c7\u30eb\" \/><\/h2>\r\n<\/div>\r\n<div class=\"contRight\">\r\n<div class=\"swiper-container\">\r\n<ul class=\"swiper-wrapper\">\r\n<li class=\"swiper-slide\"><img src=\"https:\/\/material-klonklonklon.com\/wp-page\/inred_kiritanimirei\/img\/mv01.jpg\" alt=\"\u6850\u8c37\u7f8e\u73b2\" \/><\/li>\r\n<li class=\"swiper-slide\"><img src=\"https:\/\/material-klonklonklon.com\/wp-page\/inred_kiritanimirei\/img\/mv02.jpg\" alt=\"\u6850\u8c37\u7f8e\u73b2\" \/><\/li>\r\n<\/ul>\r\n<\/div>\r\n<h3 class=\"fadeIn\"><span class=\"ja\">\u6850\u8c37\u3000\u7f8e\u73b2<\/span><span class=\"en\">Mirei Kiritani<\/span><\/h3>\r\n<\/div>\r\n<\/div>\r\n<div class=\"contBox inner\">\r\n<h4 class=\"fadeIn\">\u30b8\u30a7\u30f3\u30c0\u30fc\u30ec\u30b9\u304c<br \/>\u9b45\u529b\u306e\u30e2\u30ce\u30c8\u30fc\u30f3\u6642\u8a08<\/h4>\r\n<div class=\"txtBox fadeIn\">\r\n<p class=\"txt\">\u5973\u6027\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\u8a8c\u300cInRed\uff08\u30a4\u30f3\u30ec\u30c3\u30c9\uff09\u300d2021\u5e7412\u6708\u53f7\u306e\u4f01\u753b\u306b\u3088\u308a\u3001\u5973\u512a\u30fb\u30e2\u30c7\u30eb\u3068\u3057\u3066\u6d3b\u8e8d\u3057\u3066\u3044\u308b\u6850\u8c37\u7f8e\u73b2\uff08\u304d\u308a\u305f\u306b\u307f\u308c\u3044\uff09\u304cKLON WATCH\u3092\u7740\u7528\u3002<\/p>\r\n<p class=\"txt\">\u7a76\u6975\u306e\u30b7\u30f3\u30d7\u30eb\u3055\u3092\u8ffd\u6c42\u3057\u3001\u30b8\u30a7\u30f3\u30c0\u30fc\u30ec\u30b9\u306a\u30c7\u30b6\u30a4\u30f3\u306b\u4f5c\u308a\u3053\u307e\u308c\u305fKLON WATCH\u306e\u4e00\u90e8\u3092\u7d39\u4ecb\u3059\u308b\u3002<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n<div class=\"sectionWrapper\">\r\n<section id=\"sec01\" class=\"section01\">\r\n<div class=\"contMain\">\r\n<div class=\"bg\">\r\n<div class=\"text-block text-white fadeIn\">\r\n<p class=\"text\">\u6d12\u843d\u305f\u624b\u5143\u3092\u53f6\u3048\u308b\u6642\u8a08\u3067<br \/>\u5927\u5207\u306a\u4eba\u3068\u306e\u7d46\u3082\u6df1\u3081\u308b<\/p>\r\n<\/div>\r\n<figure><img src=\"https:\/\/material-klonklonklon.com\/wp-page\/inred_kiritanimirei\/img\/section_image01.jpg\" alt=\"\" \/><\/figure>\r\n<\/div>\r\n<div class=\"text-block text-black fadeIn\">\r\n<div class=\"text-inner\">\r\n<p class=\"text\" aria-hidden=\"true\">\u6d12\u843d\u305f\u624b\u5143\u3092\u53f6\u3048\u308b\u6642\u8a08\u3067<br \/>\u5927\u5207\u306a\u4eba\u3068\u306e\u7d46\u3082\u6df1\u3081\u308b<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"container\">\r\n<div class=\"wrapper\">\r\n<div class=\"block\">\r\n<div class=\"txtBox fadeIn\">\r\n<p class=\"txt\">KLON\u304c\u63d0\u6848\u3059\u308b\u30da\u30a2\u30a6\u30a9\u30c3\u30c1\u306f\u3001\u4eca\u306e\u6642\u4ee3\u3068\u30ea\u30f3\u30af\u3059\u308b\u30b8\u30a7\u30f3\u30c0\u30fc\u30ec\u30b9\u306a\u611f\u899a\u306e\u30c7\u30b6\u30a4\u30f3\u304c\u7279\u5fb4\u3002<br \/>\u6587\u5b57\u76e4\u30922\u3064\u306b\u5206\u3051\u308b\u3053\u3068\u3067\u3044\u3064\u3067\u3082\u6642\u9593\u3092\u5171\u6709\u3057\u3066\u3044\u308b\u6c17\u5206\u3092\u5473\u308f\u3048\u308b\u3002<\/p>\r\n<\/div>\r\n<ul class=\"mainItemList\">\r\n<li class=\"slideFadeIn\">\r\n<figure><a href=\"https:\/\/klonklonklon.com\/?pid=128411951\"><img src=\"https:\/\/img07.shop-pro.jp\/PA01387\/268\/product\/128411951.jpg\" alt=\"KLON CONNECTION DARING -SILVER MESH- 33mm\" \/><\/a><\/figure>\r\n<div class=\"box\">\r\n<h4>KLON CONNECTION DARING -SILVER MESH- 33mm<\/h4>\r\n<ul class=\"links\">\r\n<li>\r\n<h5>PAIR : \u00a533,360(tax in)<\/h5>\r\n<div class=\"btn01\"><a href=\"https:\/\/klonklonklon.com\/?pid=128411951\">CHECK<\/a><\/div>\r\n<\/li>\r\n<li>\r\n<h5>SINGLE(1-6) : \u00a517,380(tax in)<\/h5>\r\n<div class=\"btn01\"><a href=\"https:\/\/klonklonklon.com\/?pid=128411473\">CHECK<\/a><\/div>\r\n<\/li>\r\n<li>\r\n<h5>SINGLE(7-12) : \u00a517,380(tax in)<\/h5>\r\n<div class=\"btn01\"><a href=\"https:\/\/klonklonklon.com\/?pid=128411923\">CHECK<\/a><\/div>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/li>\r\n<li class=\"slideFadeIn\">\r\n<figure><a href=\"https:\/\/klonklonklon.com\/?pid=151002435\"><img src=\"https:\/\/img07.shop-pro.jp\/PA01387\/268\/product\/151002435.jpg\" alt=\"KLON PASS TIME ELFIN 33mm\" \/><\/a><\/figure>\r\n<div class=\"box\">\r\n<h4>KLON PASS TIME ELFIN 33mm<\/h4>\r\n<ul class=\"links\">\r\n<li>\r\n<h5>PAIR : \u00a529,260(tax in)<\/h5>\r\n<div class=\"btn01\"><a href=\"https:\/\/klonklonklon.com\/?pid=151002435\">CHECK<\/a><\/div>\r\n<\/li>\r\n<li>\r\n<h5>SINGLE(\u5947\u6570) : \u00a515,180(tax in)<\/h5>\r\n<div class=\"btn01\"><a href=\"https:\/\/klonklonklon.com\/?pid=\">CHECK<\/a><\/div>\r\n<\/li>\r\n<li>\r\n<h5>SINGLE(\u5076\u6570) : \u00a515,180(tax in)<\/h5>\r\n<div class=\"btn01\"><a href=\"https:\/\/klonklonklon.com\/?pid=\">CHECK<\/a><\/div>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/li>\r\n<\/ul>\r\n<ul class=\"archiveLinks\">\r\n<li><a href=\"https:\/\/klonklonklon.com\/?mode=grp&amp;gid=2352091\">\u30da\u30a2\u30a6\u30a9\u30c3\u30c1\u4e00\u89a7\u306f\u3053\u3061\u3089<\/a><\/li>\r\n<li><a href=\"https:\/\/klonklonklon.com\/?mode=grp&amp;gid=2352152\">CONNECTION\u4e00\u89a7\u306f\u3053\u3061\u3089<\/a><\/li>\r\n<li><a href=\"https:\/\/klonklonklon.com\/?mode=grp&amp;gid=2352153\">PASS TIME\u4e00\u89a7\u306f\u3053\u3061\u3089<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"lineHorizon\"><\/div>\r\n<div class=\"sectionBg inner\">\r\n<div class=\"lineVertical line1\"><\/div>\r\n<\/div>\r\n<\/section>\r\n<section id=\"sec02\" class=\"section01\">\r\n<div class=\"contMain\">\r\n<div class=\"bg\">\r\n<div class=\"text-block text-white fadeIn\">\r\n<p class=\"text\">\u6587\u5b57\u76e4\u3082\u30d9\u30eb\u30c8\u3082\u767d\u3067\u63c3\u3048\u3066<br \/>\u30b9\u30bf\u30a4\u30ea\u30c3\u30b7\u30e5\u306a\u624b\u5143\u3092\u4f5c\u308b<\/p>\r\n<\/div>\r\n<figure><img src=\"https:\/\/material-klonklonklon.com\/wp-page\/inred_kiritanimirei\/img\/section_image02.jpg\" alt=\"\" \/><\/figure>\r\n<\/div>\r\n<div class=\"text-block text-black fadeIn\">\r\n<div class=\"text-inner\">\r\n<p class=\"text\" aria-hidden=\"true\">\u6587\u5b57\u76e4\u3082\u30d9\u30eb\u30c8\u3082\u767d\u3067\u63c3\u3048\u3066<br \/>\u30b9\u30bf\u30a4\u30ea\u30c3\u30b7\u30e5\u306a\u624b\u5143\u3092\u4f5c\u308b<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"container\">\r\n<div class=\"wrapper\">\r\n<div class=\"block\">\r\n<div class=\"txtBox fadeIn\">\r\n<p class=\"txt\">2\u5c64\u306e\u6587\u5b57\u76e4\u3068\u523b\u5370\u306e\u6570\u5b57\u304c\u5f6b\u523b\u306e\u30ec\u30ea\u30fc\u30d5\u306e\u3088\u3046\u306b\u7f8e\u3057\u3044\u300cINFINITY STAIR series\u300d\u3002<br \/>\u6c17\u5206\u306b\u5408\u308f\u305b\u3066\u30d9\u30eb\u30c8\u306e\u4ed8\u3051\u66ff\u3048\u304c\u53ef\u80fd\u3002<\/p>\r\n<\/div>\r\n<ul class=\"mainItemList\">\r\n<li class=\"slideFadeIn\">\r\n<figure><a href=\"https:\/\/klonklonklon.com\/?pid=158213887\"><img src=\"https:\/\/img07.shop-pro.jp\/PA01387\/268\/product\/158213887.jpg\" alt=\"\" \/><\/a><\/figure>\r\n<div class=\"box\">\r\n<h4>KLON INFINITY STAIR series -RONDO TIME- [36\/W-FACE]<\/h4>\r\n<ul class=\"links\">\r\n<li>\r\n<h5>\u00a518,920(tax in)<\/h5>\r\n<div class=\"btn01\"><a href=\"https:\/\/klonklonklon.com\/?pid=158213887\">CHECK<\/a><\/div>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/li>\r\n<li class=\"slideFadeIn\">\r\n<figure><a href=\"https:\/\/klonklonklon.com\/?pid=158214326\"><img src=\"https:\/\/img07.shop-pro.jp\/PA01387\/268\/product\/158214326.jpg\" alt=\"\" \/><\/a><\/figure>\r\n<div class=\"box\">\r\n<h4>KLON INFINITY STAIR series -STANDARD- [36\/B-FACE]<\/h4>\r\n<ul class=\"links\">\r\n<li>\r\n<h5>\u00a518,920(tax in)<\/h5>\r\n<div class=\"btn01\"><a href=\"https:\/\/klonklonklon.com\/?pid=158214326\">CHECK<\/a><\/div>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/li>\r\n<\/ul>\r\n<div class=\"subItemList\">\r\n<p class=\"ttl01\"><span>\u305d\u306e\u4ed6\u306e\u7740\u7528\u30a2\u30a4\u30c6\u30e0<\/span><\/p>\r\n<ul>\r\n<li class=\"slideFadeIn\">\r\n<figure><a href=\"https:\/\/klonklonklon.com\/?pid=139097724\"><img src=\"https:\/\/img07.shop-pro.jp\/PA01387\/268\/product\/139097724.jpg\" alt=\"KLON RING INFINITY LARGE\" \/><\/a><\/figure>\r\n<h4>KLON RING INFINITY LARGE<\/h4>\r\n<p class=\"price\">\u00a514,080(tax in)<\/p>\r\n<\/li>\r\n<li class=\"slideFadeIn\">\r\n<figure><a href=\"https:\/\/klonklonklon.com\/?pid=139097838\"><img src=\"https:\/\/img07.shop-pro.jp\/PA01387\/268\/product\/139097838.jpg\" alt=\"KLON RING INFINITY SMALL\" \/><\/a><\/figure>\r\n<h4>KLON RING INFINITY SMALL<\/h4>\r\n<p class=\"price\">\u00a511,880(tax in)<\/p>\r\n<\/li>\r\n<li class=\"slideFadeIn\">\r\n<figure><a href=\"https:\/\/klonklonklon.com\/?pid=138155321\"><img src=\"https:\/\/img07.shop-pro.jp\/PA01387\/268\/product\/138155321.jpg\" alt=\"KLON BAR PIERCED EARRINGS\" \/><\/a><\/figure>\r\n<h4>KLON BAR PIERCED EARRINGS<\/h4>\r\n<p class=\"price\">\u00a59,240(tax in)<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n<ul class=\"archiveLinks\">\r\n<li><a href=\"https:\/\/klonklonklon.com\/?mode=grp&amp;gid=2549418\">INFINITY STAIR\u4e00\u89a7\u306f\u3053\u3061\u3089<\/a><\/li>\r\n<li><a href=\"https:\/\/klonklonklon.com\/?mode=grp&amp;gid=2352238\">\u30ea\u30f3\u30b0\u4e00\u89a7\u306f\u3053\u3061\u3089<\/a><\/li>\r\n<li><a href=\"https:\/\/klonklonklon.com\/?mode=grp&amp;gid=2352240\">\u30d4\u30a2\u30b9\u4e00\u89a7\u306f\u3053\u3061\u3089<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"lineHorizon\"><\/div>\r\n<div class=\"sectionBg inner\">\r\n<div class=\"lineVertical line2\"><\/div>\r\n<\/div>\r\n<\/section>\r\n<\/div>\r\n<\/div>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/4.5.1\/css\/swiper.min.css\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/7.0.8\/swiper-bundle.min.js\" integrity=\"sha512-TEY9MppoX49BydDCCSsdqDUihEAEdO2S2En3WRjPoM+4wBkLtE7HKJ\/Xt34c46\/XM0Qxf6+F5caDMejengSDdA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"><\/script> <script>\r\n\/* \u6c34\u5e73\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u8a2d\u5b9a *\/\r\nconst horizontalSlider = new Swiper(\".swiper-container\", {\r\n\tloop:true,\r\n\t\/\/direction: \"horizontal\",\r\n\tslidesPerView: 1,\r\n\tspeed: 800,\r\n\teffect:'fade',\r\n\tautoplay: {\r\n\t   delay: 4000,\r\n\t}\r\n});\t\r\n\t\r\n<\/script> <script>\r\nconst controller = new ScrollMagic.Controller();\r\n\t\r\nconst scrollZoomUp = document.querySelectorAll(\".scrollZoomUp\");\r\nscrollZoomUp.forEach(scrollZoomUp => {\r\n\t\/\/tween\u4f5c\u6210\r\n\r\n\tconst tween = TweenMax.from(scrollZoomUp, 2.0, {\r\n\t\tease: Power4.easeOut,\r\n\t\tscale: 1.1, \r\n\t\topacity:0 \r\n\t});\r\n\t\r\n\t\/\/\u30b7\u30fc\u30f3\u3092\u4f5c\u6210\r\n\tconst scene = new ScrollMagic.Scene({\r\n\t\ttriggerElement: scrollZoomUp,\r\n\t\t\/\/triggerHook: \"onCenter\"\r\n\t})\r\n\t.setTween(tween) \/\/trigger a TweenMax tween\r\n    \/\/.addIndicators('scrollZoomUp')\r\n\t.addTo(controller);\r\n});\r\n\t\r\n\r\n\t\r\n\/\/const controller1 = new ScrollMagic.Controller();\r\nconst slideFadeIn = document.querySelectorAll(\".slideFadeIn\");\r\nlet num2 = 0;\r\nslideFadeIn.forEach(slideFadeIn => {\r\n\t\/\/tween\u4f5c\u6210\r\n\tconsole.log('slideFadeIn'+num2);\r\n\tnum2++;\r\n\t\r\n\tconst tween = TweenMax.from(slideFadeIn, 2.5, {\r\n\t\tease: Power4.easeOut,\r\n\t\tdelay:0.2*num2,\r\n\t\topacity:0 \r\n\t});\r\n\t\r\n\t\/\/\u30b7\u30fc\u30f3\u3092\u4f5c\u6210\r\n\tconst scene = new ScrollMagic.Scene({\r\n\t\ttriggerElement: slideFadeIn,\r\n\t\toffset : -200,\r\n\t\ttriggerHook: \"onEnter\"\r\n\t})\r\n\t.setTween(tween) \/\/trigger a TweenMax tween\r\n    \/\/.addIndicators('slideFadeIn')\r\n\t.addTo(controller);\r\n});\t\t\r\n\r\n\r\n\t\r\nconst fadeIns = document.querySelectorAll(\".fadeIn\");\r\nfadeIns.forEach(fadeIn => {\r\n\t\/\/tween\u4f5c\u6210\r\n\tconst tween = TweenMax.fromTo(fadeIn, 2.0, {\r\n\t\tease: Power4.easeOut,\r\n\t\ty:'-1%',\r\n\t\topacity:0 \r\n\t},{\r\n\t\tease: Power4.easeOut,\r\n\t\ty:0,\r\n\t\topacity:1 \r\n\t});\r\n\t\r\n\t\/\/\u30b7\u30fc\u30f3\u3092\u4f5c\u6210\r\n\tconst scene = new ScrollMagic.Scene({\r\n\t\ttriggerElement: fadeIn,\r\n\t\t\/\/duration: \"600%\"\r\n\t\ttriggerHook: \"onCenter\"\r\n\t})\r\n\t.setTween(tween) \/\/trigger a TweenMax tween\r\n    \/\/.addIndicators('fadeIn')\r\n\t.addTo(controller);\r\n});\t\r\n\t\t\r\n\t\r\n\t\r\nconst lineHorizon = document.querySelectorAll(\".lineHorizon\");\r\nlineHorizon.forEach(lineHorizon => {\r\n\t\/\/tween\u4f5c\u6210\r\n\r\n\tconst tween = TweenMax.to(lineHorizon, 1.0, {\r\n\t\tease: Power4.easeOut,\r\n\t\twidth:'100%',\r\n\t});\r\n\t\r\n\t\r\n\t\/\/\u30b7\u30fc\u30f3\u3092\u4f5c\u6210\r\n\tconst scene = new ScrollMagic.Scene({\r\n\t\ttriggerElement: lineHorizon,\r\n\t\ttriggerHook: \"onEnter\"\r\n\t})\r\n\t.setTween(tween) \/\/trigger a TweenMax tween\r\n    \/\/.addIndicators('lineHorizon')\r\n\t.addTo(controller);\r\n});\r\n\t\r\nconst lineVertical = document.querySelectorAll(\".line1\");\r\nlineVertical.forEach(lineVertical => {\r\n\t\/\/tween\u4f5c\u6210\r\n\tconst closest = lineVertical.closest('.section01');\r\n\tconst wrapperHeight = closest.clientHeight;\r\n\tconst nextSibling = closest.nextElementSibling;\r\n\tconst nextSiblingWrapper = nextSibling.getElementsByClassName('wrapper');\r\n\tconst closestOffsetTop = closest.offsetTop;\r\n\t\r\n\t\r\n\tfunction findWrapper(el){\t\r\n\t\tfor (var i = 0; i <= el.length; i++) {\r\n\t\t\tlet nextSiblingWrapperOffsetTop = nextSiblingWrapper[i].offsetTop;\r\n\t\t\t\/\/console.dir('nextSiblingWrapperOffsetTop:'+nextSiblingWrapperOffsetTop);\r\n\t\t\treturn nextSiblingWrapperOffsetTop;\r\n\t\t\tbreak;\r\n\t\t}\r\n\t\t\r\n\t}\r\n\tlet result = findWrapper(nextSiblingWrapper);\r\n\r\n\tconsole.log('result:'+result);\r\n\tconsole.dir('closestOffsetTop:'+closestOffsetTop);\r\n\tconst between = (result*1) + closestOffsetTop;\r\n\tconsole.dir('between:'+between);\r\n\t\r\n\tconst tween = TweenMax.fromTo(lineVertical, 5.0, {\r\n\t\tease: Power4.easeOut,\r\n\t\theight:0,\r\n\t},{\r\n\t\tease: Power4.easeOut,\r\n\t\theight:between+'px',\r\n\t});\r\n\t\r\n\t\r\n\t\/\/\u30b7\u30fc\u30f3\u3092\u4f5c\u6210\r\n\tconst scene = new ScrollMagic.Scene({\r\n\t\ttriggerElement: lineVertical,\r\n\t\toffset: \"500%\",\r\n\t\ttriggerHook: \"onLeave\"\r\n\t})\r\n\t.setTween(tween) \/\/trigger a TweenMax tween\r\n    \/\/.addIndicators('lineVertical')\r\n\t.addTo(controller);\r\n});\r\n\r\n\t\r\nlet lineVertical2 = document.querySelectorAll(\".line2\");\r\nlineVertical2.forEach(lineVertical2 => {\r\n\t\/\/tween\u4f5c\u6210\r\n\tlet closest = lineVertical2.closest('.sectionWrapper');\r\n\t\/\/const wrapperHeight = closest.clientHeight;\r\n\tlet nextSibling = closest.nextElementSibling;\r\n\tlet nextSiblingWrapper = nextSibling.getElementsByClassName('inner');\r\n\tlet closestOffsetTop = closest.offsetTop;\r\n\t\r\n\t\r\n\tfunction findWrapper(el){\t\r\n\t\tfor (var i = 0; i <= el.length; i++) {\r\n\t\t\tlet nextSiblingWrapperOffsetTop = nextSiblingWrapper[i].offsetTop;\r\n\t\t\t\/\/console.dir('nextSiblingWrapperOffsetTop:'+nextSiblingWrapperOffsetTop);\r\n\t\t\treturn nextSiblingWrapperOffsetTop;\r\n\t\t\tbreak;\r\n\t\t}\r\n\t\t\r\n\t}\r\n\tlet result = findWrapper(nextSiblingWrapper);\r\n\r\n\tconsole.log('result:'+result);\r\n\tconsole.dir('closestOffsetTop:'+closestOffsetTop);\r\n\tlet between = (result*1) + closestOffsetTop;\r\n\tconsole.dir('between:'+between);\r\n\t\r\n\tconst tween = TweenMax.fromTo(lineVertical2, 15.0, {\r\n\t\tease: Power4.easeOut,\r\n\t\theight:0,\r\n\t},{\r\n\t\tease: Power4.easeOut,\r\n\t\theight:between+'px',\r\n\t});\r\n\t\r\n\t\r\n\t\/\/\u30b7\u30fc\u30f3\u3092\u4f5c\u6210\r\n\r\n\tconst scene = new ScrollMagic.Scene({\r\n\t\ttriggerElement: lineVertical2,\r\n\t\toffset: \"1200%\",\r\n\t\t\/\/duration:\"5000\",\r\n\t\ttriggerHook: \"onLeave\"\r\n\t})\r\n\t.setTween(tween) \/\/trigger a TweenMax tween\r\n    \/\/.addIndicators('lineVertical2')\r\n\t.addTo(controller);\r\n});\r\n\t\t\r\n\t\r\n\t\r\n<\/script>","protected":false},"excerpt":{"rendered":"\u6850\u8c37\u3000\u7f8e\u73b2Mirei Kiritani \u30b8\u30a7\u30f3\u30c0\u30fc\u30ec\u30b9\u304c\u9b45\u529b\u306e\u30e2\u30ce\u30c8\u30fc\u30f3\u6642\u8a08 \u5973\u6027\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\u8a8c\u300cInRed\uff08\u30a4\u30f3\u30ec\u30c3\u30c9\uff09\u300d2021\u5e7412\u6708\u53f7\u306e\u4f01\u753b\u306b\u3088\u308a\u3001\u5973\u512a\u30fb\u30e2\u30c7\u30eb\u3068\u3057\u3066\u6d3b\u8e8d\u3057\u3066\u3044\u308b\u6850\u8c37\u7f8e\u73b2\uff08\u304d\u308a\u305f\u306b\u307f\u308c\u3044\uff09\u304cKLO [&hellip;]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":33,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/klonklonklon.com\/apps\/note\/wp-json\/wp\/v2\/pages\/9061"}],"collection":[{"href":"https:\/\/klonklonklon.com\/apps\/note\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/klonklonklon.com\/apps\/note\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/klonklonklon.com\/apps\/note\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/klonklonklon.com\/apps\/note\/wp-json\/wp\/v2\/comments?post=9061"}],"version-history":[{"count":20,"href":"https:\/\/klonklonklon.com\/apps\/note\/wp-json\/wp\/v2\/pages\/9061\/revisions"}],"predecessor-version":[{"id":9528,"href":"https:\/\/klonklonklon.com\/apps\/note\/wp-json\/wp\/v2\/pages\/9061\/revisions\/9528"}],"wp:attachment":[{"href":"https:\/\/klonklonklon.com\/apps\/note\/wp-json\/wp\/v2\/media?parent=9061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}