{"id":2174,"date":"2021-09-14T16:47:31","date_gmt":"2021-09-14T07:47:31","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=2174"},"modified":"2023-01-04T22:16:44","modified_gmt":"2023-01-04T13:16:44","slug":"javascript12","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2021\/09\/14\/javascript12\/","title":{"rendered":"JavaScript12(\u30b5\u30a4\u30c8\u4f5c\u6210(4))"},"content":{"rendered":"

1:\u30d8\u30c3\u30c0\u30fc\u3084\u30b5\u30a4\u30c9\u30d0\u30fc\u3092\u4f5c\u6210\u3057\u30d9\u30fc\u30b9\u3092\u5b8c\u6210\u3055\u305b\u308b<\/h3>\n

\u30e2\u30d0\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc<\/strong>\u306e\u3068\u3053\u308d\u3067\u4f5c\u6210\u3057\u305fstyle.scss<\/strong>\u3092\u6d41\u7528\u3059\u308b<\/p>\n

\"\"<\/p>\n

_mobile-menu.scss<\/strong>\u306b\u30ea\u30cd\u30fc\u30e0\u3057\u3066modules\u306b\u8cbc\u308a\u4ed8\u3051\u3059\u308b<\/p>\n

style.scss\u3067\u8aad\u307f\u8fbc\u3080\u306e\u3082\u5fd8\u308c\u305a\u306b<\/p>\n

\"\"<\/p>\n

_mobile-menu.scss\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0<\/h3>\n
\n
$cMenuClose: Black;\r\n$cMenuOpen: Black;\r\n\r\n.mobile-menu {\r\n  position: fixed;\r\n  right: 0;\r\n\/\/ \u4e0a\u304b\u308960px\r\n  top: 60px;\r\n  width: 300px;\r\n\r\n  & .logo {\r\n    padding: 0 40px;\r\n    font-size: 38px;\r\n}\r\n\/\/ BEM(Block Element Modifier)\r\n  &__btn {\r\n    background-color: unset;\r\n    border: none;\r\n    outline: none !important;\r\n    cursor: pointer;\r\n\u00a0\r\n    & > span {\r\n      background-color: $cMenuClose;\r\n      width: 35px;\r\n      height: 2px;\r\n      display: block;\r\n      margin-bottom: 9px;\r\n      transition: transform 0.7s;\r\n\u00a0\r\n    &:last-child {\r\n      margin-bottom: 0;\r\n  }\r\n }\r\n}\r\n\/\/ \u9ed2\u3044\u819c\u3092\u3064\u3051\u308b\r\n    &__cover {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color: rgba(0, 0, 0, 0.3);\r\n      opacity: 0;\r\n      visibility: hidden; \r\n      transition: opacity 1s;\r\n      cursor: pointer;\r\n      z-index: 200;\r\n }\r\n  &__main {\r\n    padding: 0;\r\n\/\/ \uff13D\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u3057\u305f\u3044\u3068\u304d\u89aa\u306e\u8981\u7d20\u306b\u3064\u3051\u308b\r\n    perspective: 2000px;\r\n    transform-style: preserve-3d;\r\n}\r\n  &__item {\r\n\/\/ \u30fb\u3092\u3051\u3059\r\n    list-style: none;\r\n    display: block;\r\n    transform: translate3d(0, 0, -1000px);\r\n    padding: 0 40px;\r\n    transition: transform 0.3s, opacity 0.2s;\r\n    opacity: 0;\r\n}\r\n  &__link {\r\n\/\/ \u5de6\u53f3\u3044\u3063\u3071\u3044\u306b\u5e83\u304c\u308b\u3088\u3046\u306b\u3059\u308b\r\n    display: block;\r\n    margin-top: 30px;\r\n    color: $cBlack;\r\n\/\/ \u4e0b\u7dda\u3092\u524a\u9664\r\n   text-decoration: none !important;\r\n  }\r\n}\r\n\r\n.menu-open {\r\n\/\/ \u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306b\u5de6\u4e0b\u306b\u305a\u308c\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\r\n  & #container {\r\n    transform: translate(-300px, 60px);\r\n    box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8);\r\n}\r\n \/\/ \u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u306e\u8a18\u8ff0\u3092\u66f8\u304f\r\n  & .mobile-menu {\r\n  &__cover {\r\n    opacity: 1;\r\n    visibility: visible;\r\n}\r\n  &__item {\r\n    transform: none;\r\n    opacity: 1;\r\n\/\/ \u8981\u7d20\u3092\u5c11\u3057\u305a\u3064\u9045\u5ef6\u3057\u3066\u8868\u793a\r\n@for $i from 1 through 5 {\r\n&:nth-child(#{$i}) {\r\ntransition-delay: $i * 0.07s;\r\n  }\r\n }\r\n}\r\n  &__btn {\r\n    & > span {\r\n      background-color: $cMenuOpen;\r\n\u00a0\r\n  &:nth-child(1) {\r\n    transition-delay: 70ms;\r\n    transform: translateY(11px) rotate(135deg);\r\n}\r\n  &:nth-child(2) {\r\n    transition-delay: 0s;\r\n    transform: translateX(-18px) scaleX(0);\r\n}\r\n  &:nth-child(3) {\r\n    transition-delay: 140ms;\r\n    transform: translateY(-11px) rotate(-135deg);\r\n    }\r\n   }\r\n  }\r\n }\r\n}<\/code><\/pre>\n<\/div>\n
<\/p>\n
\u3053\u3053\u3067\u30b9\u30de\u30db\u753b\u9762\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3084\u30b9\u30bf\u30a4\u30eb\u306e\u8a2d\u5b9a\u3092\u3057\u3066\u3044\u308b<\/p>\n
index.html\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0(<body>\u304b\u3089)\u3057\u3066\u30d8\u30c3\u30c0\u30fc\u3068\u30b5\u30a4\u30c9\u30d0\u30fc\u8ffd\u52a0<\/h3>\n
\n
<body>\r\n  <div id=\"global-container\">\r\n   <div id=\"container\">\r\n    <div class=\"mobile-menu__cover\"><\/div>\r\n<!-- \u30b9\u30af\u30ed\u30fc\u30eb\u76e3\u8996\u306e\u305f\u3081\u306e\u30bf\u30b0-->\r\n     <div class=\"nav-trigger\"><\/div>\r\n<!-- \u3053\u3053\u304b\u3089\u30d8\u30c3\u30c0\u30fc-->\r\n<header class=\"header\">\r\n  <div class=\"header__inner\">\r\n   <div class=\"logo item\">\r\n    <img src=\"images\/logo.svg\" alt=\"\" class=\"logo__img\" \/>\r\n     <span class=\"logo__Flower\">Flower<\/span>\r\n     <span class=\"logo__Garden\">\u00a0Garden\r\n <\/div>\r\n<nav class=\"header__nav\">\r\n <ul class=\"header__ul\">\r\n  <li class=\"header__li item\"><a href=\"#\">Service<\/a><\/li>\r\n  <li class=\"header__li item\"><a href=\"#\">Company<\/a><\/li>\r\n  <li class=\"header__li item\">\r\n    <a class=\"btn filled\" href=\"#\">Contact<\/a>\r\n  <\/li>\r\n <\/ul>\r\n<\/nav>\r\n<!-- \u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc-->\r\n  <button class=\"mobile-menu__btn\">\r\n   <span><\/span>\r\n   <span><\/span>\r\n   <span><\/span>\r\n  <\/button>\r\n <\/div>\r\n<\/header>\r\n<!-- \u30d8\u30c3\u30c0\u30fc\u7d42\u308f\u308a-->\r\n <div id=\"content\">\r\n<!-- \u30d2\u30fc\u30ed\u30b9\u30e9\u30a4\u30c0\u30fc\u3053\u3053\u304b\u3089-->\r\n  <div class=\"hero\">\r\n   <div class=\"swiper-container\">\r\n    <div class=\"swiper-wrapper\">\r\n<!-- \u30b9\u30e9\u30a4\u30c9\u306e\u90e8\u5206 -->\r\n <div class=\"swiper-slide\">\r\n   <!-- \u753b\u50cf\u306e\u771f\u3093\u4e2d\u306e\u6587\u5b57 -->\r\n    <div class=\"hero__title\">Magnificence<\/div>\r\n     <image src=\"images\/Dahlia.jpg\" alt=\"\"><\/image>\r\n <\/div>\r\n   <div class=\"swiper-slide\">\r\n    <div class=\"hero__title\">Solidarity<\/div>\r\n     <image src=\"images\/Gaillardia.jpg\" alt=\"\"><\/image>\r\n <\/div>\r\n <div class=\"swiper-slide\">\r\n  <div class=\"hero__title\">Gentility<\/div>\r\n    <image src=\"images\/Geranium.jpg\" alt=\"\"><\/image>\r\n  <\/div>\r\n <\/div>\r\n   <div class=\"hero__footer\">\r\n <!-- \u2193\u77e2\u5370\u306e\u90e8\u5206 -->\r\n    <img class=\"hero__downarrow\" src=\"images\/arrow.svg\" \/>\r\n     <span class=\"hero__scrolltext\">scroll<\/span>\r\n  <\/div>\r\n <\/div>\r\n<\/div>\r\n <div id=\"main-content\">\r\n<!-- \u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u5de6\u90e8\u5206-->\r\n  <aside class=\"side left\">\r\n    <div class=\"side__inner\">\r\n     <a class=\"twitter icon tween-animate-title\" href=\"#\">Twitter<\/a>\r\n     <a class=\"fb icon tween-animate-title\" href=\"#\">Facebook<\/a>\r\n <\/div>\r\n<\/aside>\r\n<main>\r\n<!--World\u306e\u59cb\u307e\u308a -->\r\n <section class=\"world\">\r\n   <div class=\"world__inner\">\r\n    <div class=\"world__img cover-slide\">\r\n     <img class=\"img-zoom\" src=\"images\/Rose-banquet3.jpg\" alt=\"\"\/>\r\n <\/div>\r\n <div class=\"world__texts appear left\">\r\n  <div class=\"world__texts-inner\">\r\n<!--\u6a2a\u7dda\u306e\u8a2d\u5b9a -->\r\n   <div class=\"world__title main-title item\">\r\n    <span class=\"purple\">Flower <\/span>\r\n     <span>of the World<\/span>\r\n<\/div>\r\n<div class=\"world__sub sub-title item\">\u4e16\u754c\u306e\u304a\u82b1\u3092\u3042\u306a\u305f\u306b<\/div>\r\n <div class=\"world__description item\">\r\n  <p>\u4e16\u754c\uff11\uff15\uff10\u30f6\u56fd\u306e\u82b1\u3092<br \/>\u3042\u306a\u305f\u306b\u304a\u5c4a\u3051\u3057\u307e\u3059\u3002<\/p>\r\n  <p>\u3042\u306a\u305f\u306e\u671b\u3080\u82b1\u304c\u304d\u3063\u3068\u898b\u3064\u304b\u308a\u307e\u3059\u3002<\/p>\r\n   <\/div>\r\n    <div class=\"world__btn item\">\r\n     <button class=\"btn filled\">\u3082\u3063\u3068\u8a73\u3057\u304f<\/button>\r\n    <\/div>\r\n   <\/div>\r\n  <\/div>\r\n <\/div>\r\n<\/section>\r\n<!--world\u7d42\u308a -->\r\n<!--flowers\u3053\u3053\u304b\u3089 -->\r\n<section class=\"flowers\">\r\n <div>\r\n <h2 class=\"main-title tween-animate-title\">Pick up<\/h2>\r\n  <p class=\"sub-title tween-animate-title\">\u65e5\u672c\u306e\u304a\u82b1\u30d4\u30c3\u30af\u30a2\u30c3\u30d7\u7279\u96c6<\/p>\r\n <\/div>\r\n <div class=\"flowers__inner\">\r\n  <div class=\"flowers__item\">\r\n   <div class=\"cover-slide hover-darken\">\r\n    <div class=\"bg-img-zoom img-bg50\" style=\"background-image: url(images\/Alstroemeria.jpg)\">\r\n  <\/div>\r\n  <\/div>\r\n   <p class=\"flowers__title\">\u65ec\u306e\u82b1<\/p>\r\n   <p class=\"sub-title tween-animate-title\">4\u6708\u306e\u65ec\u306e\u82b1\u306f\u30a2\u30eb\u30b9\u30c8\u30ed\u30e1\u30ea\u30a2<\/p>\r\n  <\/div>\r\n <div class=\"flowers__item\">\r\n <div class=\"cover-slide hover-darken\">\r\n  <div class=\"bg-img-zoom img-bg50\" style=\"background-image: url(images\/Birthday2.jpg)\">\r\n  <\/div>\r\n   <\/div>\r\n    <p class=\"flowers__title\">\u8a95\u751f\u65e5\u30d7\u30ec\u30bc\u30f3\u30c8\u7279\u96c6<\/p>\r\n    <p class=\"sub-title tween-animate-title\">\u5927\u5207\u306a\u3042\u306e\u4eba\u306b\u8d08\u308b\u30d7\u30ec\u30bc\u30f3\u30c8<\/p>\r\n   <\/div>\r\n    <div class=\"flowers__item\">\r\n     <div class=\"cover-slide hover-darken\">\r\n   <div class=\"bg-img-zoom img-bg50\" style=\"background-image: url(images\/Rose-banquet.jpg)\">\r\n   <\/div>\r\n  <\/div>\r\n   <p class=\"flowers__title\">\u30d0\u30e9\u7279\u96c6<\/p>\r\n   <p class=\"sub-title tween-animate-title\">\u83ef\u3084\u304b\u306a\u82b1\u3068\u3044\u3048\u3070\u30d0\u30e9<\/p>\r\n  <\/div>\r\n   <div class=\"flowers__item\">\r\n    <div class=\"cover-slide hover-darken\">\r\n    <div class=\"bg-img-zoom img-bg50\" style=\"background-image: url(images\/peach.jpg)\">\r\n   <\/div>\r\n  <\/div>\r\n   <p class=\"flowers__title\">\u6625\u306e\u82b1\u7279\u96c6<\/p>\r\n   <p class=\"sub-title tween-animate-title\">\u6625\u306e\u82b1\u3092\u30d4\u30c3\u30af\u30a2\u30c3\u30d7<\/p>\r\n  <\/div>\r\n   <button class=\"btn slide-bg\">\u3055\u3089\u306b\u8a73\u3057\u304f<\/button>\r\n  <\/section>\r\n<!--\u3053\u3053\u304b\u3089popular -->\r\n <section class=\"popular\">\r\n  <div class=\"popular__header\">\r\n   <h2 class=\"main-title tween-animate-title\">Popular Place<\/h2>\r\n   <p class=\"sub-title tween-animate-title\">\u4eba\u6c17\u306e\u82b1\u7551\u89b3\u5149\u5730\u306e\u30c4\u30a2\u30fc<\/p>\r\n  <\/div>\r\n<!-- \u30b0\u30ec\u30fc\u306e\u80cc\u666f\u306e\u90e8\u5206 -->\r\n  <div class=\"popular__inner appear up\">\r\n  <div class=\"popular__container\">\r\n  <div class=\"popular__item item\">\r\n   <div class=\"popular__img\">\r\n    <img src=\"images\/Georgia.jpg\" alt=\"\" \/>\r\n   <\/div>\r\n  <div class=\"popular__title\">Georgia<\/div>\r\n  <\/div>\r\n<div class=\"popular__item item\">\r\n  <div class=\"popular__img\">\r\n   <img src=\"images\/Montreal.jpg\" alt=\"\" \/>\r\n  <\/div>\r\n   <div class=\"popular__title\">Montreal<\/div>\r\n   <\/div>\r\n  <div class=\"popular__item item\">\r\n  <div class=\"popular__img\">\r\n   <img src=\"images\/Flowers3.jpg\" alt=\"\" \/>\r\n  <\/div>\r\n   <div class=\"popular__title\">\u5317\u6d77\u9053<\/div>\r\n   <\/div>\r\n  <div class=\"popular__item item\">\r\n   <div class=\"popular__img\">\r\n    <img src=\"images\/Shibazakura.jpg\" alt=\"\" \/>\r\n   <\/div>\r\n   <div class=\"popular__title\">\u5343\u8449<\/div>\r\n   <\/div>\r\n  <div class=\"popular__btn appear up\">\r\n   <button class=\"btn cover-3d item\">\r\n    <span>\u4e00\u89a7\u304b\u3089\u63a2\u3059<\/span>\r\n   <\/button>\r\n    <\/div>\r\n   <\/div>\r\n  <\/div>\r\n <\/section>\r\n<!--popular\u3053\u3053\u307e\u3067 -->\r\n\/\/\u30b5\u30a4\u30c9\u30d0\u30fc\u53f3\u306e\u8a2d\u5b9a\r\n <aside class=\"side right\">\r\n   <div class=\"side__inner\">\r\n    <span class=\"tween-animate-title\">\u00a9Ota<\/span>\r\n   <\/div>\r\n  <\/aside>\r\n <\/div>\r\n<\/div>\r\n\/\/\u30d5\u30c3\u30bf\u30fc\u306e\u8a2d\u5b9a\r\n<footer class=\"footer appear up\">\r\n <div class=\"logo item\">\r\n  <img src=\"images\/logo.svg\" alt=\"\" class=\"logo__img\" \/>\r\n   <span class=\"logo__Flower\">Flower <\/span>\r\n   <span class=\"logo__Garden\">\u00a0Garden<\/span>\r\n <\/div>\r\n <nav class=\"footer__nav\">\r\n   <ul class=\"footer__ul\">\r\n    <li class=\"footer__li item\"><a href=\"#\">Service<\/a><\/li>\r\n    <li class=\"footer__li item\"><a href=\"#\">Contact<\/a><\/li>\r\n    <li class=\"footer__li item\"><a href=\"#\">Company<\/a><\/li>\r\n    <li class=\"footer__li item\"><a href=\"#\">Sitemap<\/a><\/li>\r\n   <\/ul>\r\n    <div class=\"footer__copyright item\">\u00a9 Ota\r\n   <\/div>\r\n  <\/nav>\r\n <\/footer>\r\n<\/div>\r\n<!--\u30e2\u30d0\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc\u306e\u8a2d\u5b9a-->\r\n<nav class=\"mobile-menu\">\r\n  <div class=\"logo\">\r\n    <img src=\"images\/logo.svg\" alt=\"\" class=\"logo__img\" \/>\r\n   <span class=\"logo__Flower \">Flower <\/span>\r\n   <span class=\"logo__Garden\">Garden<\/span>\r\n  <\/div>\r\n   <ul class=\"mobile-menu__main\">\r\n    <li class=\"mobile-menu__item\">\r\n     <a class=\"mobile-menu__link\" href=\"#\">\r\n      <span class=\"main-title\">Our Service<\/span>\r\n      <span class=\"sub-title\">\u30b5\u30fc\u30d3\u30b9\u306b\u3064\u3044\u3066<\/span>\r\n     <\/a>\r\n    <\/li>\r\n    <li class=\"mobile-menu__item\">\r\n     <a class=\"mobile-menu__link\" href=\"#\">\r\n      <span class=\"main-title\">About Us<\/span>\r\n      <span class=\"sub-title\">\u79c1\u305f\u3061\u306b\u3064\u3044\u3066<\/span>\r\n     <\/a>\r\n    <\/li>\r\n    <li class=\"mobile-menu__item\">\r\n     <a class=\"mobile-menu__link\" href=\"#\">\r\n      <span class=\"main-title\">Contact Us<\/span>\r\n      <span class=\"sub-title\">\u30b3\u30f3\u30bf\u30af\u30c8\u65b9\u6cd5<\/span>\r\n     <\/a>\r\n    <\/li>\r\n   <\/ul>\r\n  <\/nav>\r\n <\/div>\r\n<\/div>\r\n  <script src=\"scripts\/vendors\/swiper.min.js\"><\/script>\r\n  <script src=\"scripts\/vendors\/TweenMax.min.js\"><\/script>\r\n  <script src=\"scripts\/vendors\/scroll-polyfill.js\"><\/script>\r\n  <script src=\"scripts\/libs\/scroll.js\"><\/script>\r\n  <script src=\"scripts\/libs\/text-animation.js\"><\/script>\r\n  <script src=\"scripts\/libs\/hero-slider.js\"><\/script>\r\n  <script src=\"scripts\/libs\/mobile-menu.js\"><\/script>\r\n  <script src=\"scripts\/main.js\"><\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\n
\u30b3\u30e1\u30f3\u30c8\u3067\u3069\u3053\u304c\u4f55\u3092\u62c5\u5f53\u3057\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3059\u308b\u3068\u3088\u3044<\/h4>\n
_base.scss\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0<\/h3>\n
\u30d8\u30c3\u30c0\u30fc\u306e\u90e8\u5206<\/h3>\n
\n
.header {\r\n\/\/ \u753b\u9762\u306e\u4e0a\u90e8\u306b\u56fa\u5b9a\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: $navHeight;\r\n\/\/ \u80cc\u666f\u8272\u3092\u900f\u660e\u306b\r\n  background-color: transparent;\r\n  display: flex;\r\n  align-items: center;\r\n\/\/ \u30d8\u30c3\u30c0\u30fc\u3092\u6700\u524d\u9762\u306b\u304f\u308b\u3088\u3046\u306b\u3059\u308b\r\n  z-index: 100;\r\n\r\n  &.triggered {\r\n    background-color: rgba(255, 255, 255, 0.9);\r\n    box-shadow: 10px 0 25px -10px rgba(0, 0, 0, 0.5);\r\n}\r\n\/\/ \u30b9\u30de\u30db\u753b\u9762\u3067\u306f\u30d8\u30c3\u30c0\u30fc\u8868\u793a\u3057\u306a\u3044\r\n  &__nav {\r\n    display: none;\r\n}\r\n\r\n  &__ul {\r\n    display: flex;\r\n\/\/ \u4e0a\u4e0b\u4e2d\u592e\u63c3\u3048\u306b\u3059\u308b\r\n    align-items: center;\r\n    padding: 0;\r\n    margin: 0;\r\n    list-style: none;\r\n}\r\n\r\n  &__li {\r\n    margin-left: 20px;\r\n\r\n  & > a {\r\n    color: $cBlack;\r\n    text-decoration: none !important;\r\n\/\/ \u3059\u3079\u3066\u5927\u6587\u5b57\u306b\u3059\u308b\r\n    text-transform: uppercase;\r\n }\r\n}\r\n\r\n  & .logo {\r\n    font-size: 38px;\r\n    justify-content: center;\r\n}\r\n\r\n  &__inner {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n\/\/ nav\u3068\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30e9\u30a4\u30f3\u3092\u540c\u3058\u306b\u3059\u308b\r\n    @extend .content-width;\r\n }\r\n}<\/code><\/pre>\n<\/div>\n
main.js\u3092\u4ee5\u4e0b\u306e\u8a18\u8ff0\u306b\u3059\u308b(\u5b8c\u6210\u7248)<\/h3>\n
\n
document.addEventListener('DOMContentLoaded', function () {\r\n  \/\/ main\u306bMain\u3092\u683c\u7d0d\u3057\u3066\u547c\u3073\u51fa\u3059\r\n  const main = new Main();\r\n});\r\n\/\/ \u65b0\u3057\u304f\u30e1\u30a4\u30f3\u30af\u30e9\u30b9\u3092\u4f5c\u308a\u305d\u306e\u306a\u304b\u306b\u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u30e1\u30bd\u30c3\u30c9\u3092\u683c\u7d0d\r\nclass Main {\r\n  constructor() {\r\n\/\/ header\u3084side\u306eDOM\u3092\u30af\u30a8\u30ea\u30fc\u30bb\u30ec\u30af\u30bf\u30fc\u3067\u53d6\u5f97\r\n  this.header = document.querySelector('.header');\r\n  this.sides = document.querySelectorAll('.side');\r\n\/\/ \u914d\u5217\u306bScrollObserver\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u683c\u7d0d\u3059\u308b\u3002\u5909\u6570_observers\u3092\u521d\u671f\u5316\r\n  this._observers = [];\r\n\/\/ _scrollInit\u3092\u547c\u3076\r\n  this._init();\r\n}\r\n\/\/ \u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\u3055\u308c\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u914d\u5217\u306b\u683c\u7d0d\u3055\u308c\u308b(\u30bb\u30c3\u30bf\u30fc\u30e1\u30bd\u30c3\u30c9)\r\n  set observers(val) {\r\n    this._observers.push(val);\r\n}\r\n\/\/ \u30b2\u30c3\u30bf\u30fc\u30e1\u30bd\u30c3\u30c9(\u5024\u3092\u53d6\u5f97\u3059\u308b\u65b9\u306e\u30e1\u30bd\u30c3\u30c9)\r\n  get observers() {\r\n    return this._observers;\r\n}\r\n\r\n_init() {\r\n  new MobileMenu();\r\n  this.hero = new HeroSlider('.swiper-container');\r\n  Pace.on('done', this._paceDone.bind(this));\r\n}\r\n\/\/ \u30ed\u30fc\u30c9\u304c\u5b8c\u4e86\u3057\u305f\u6bb5\u968e\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3059\u308b\u3088\u3046\u306b\u3059\u308b\r\n_paceDone() {\r\n  this._scrollInit();\r\n}\r\n\r\n_inviewAnimation(el, inview) {\r\n\/\/ \u3082\u3057\u753b\u9762\u5185\u306b\u5165\u3063\u3066\u304d\u305f\u3089inview\u3092\u4ed8\u52a0\r\n  if(inview) {\r\n    el.classList.add('inview');\r\n\/\/ \u753b\u9762\u5916\u306b\u306a\u3063\u305f\u3089inview\u3092\u524a\u9664\r\n  }else {\r\n    el.classList.remove('inview');\r\n }\r\n}\r\n_navAnimation(el, inview) {\r\n\/\/ \u753b\u9762\u306e\u4e2d\u306b\u5165\u3063\u305f\u3089triggered\u3092\u524a\u9664\r\n  if(inview) {\r\n    this.header.classList.remove('triggered');\r\n\/\/ \u753b\u9762\u306e\u5916\u306b\u51fa\u305f\u3089triggered\u3092\u4ed8\u4e0e\r\n  } else {\r\n    this.header.classList.add('triggered');\r\n }\r\n}\r\n\r\n_sideAnimation(el, inview) {\r\n  if(inview) {\r\n    this.sides.forEach(side => side.classList.add('inview'));\r\n  } else {\r\n    this.sides.forEach(side => side.classList.remove('inview'));\r\n }\r\n}\r\n_textAnimation(el, inview) {\r\n  if(inview) {\r\n\/\/ tween\u3092\u4f7f\u3046\u3068\u304d\u306f\u66f8\u304d\u63db\u3048\u308b(Tween\u3092\u8ffd\u52a0)\r\n    const ta = new TweenTextAnimation(el);\r\n    ta.animate();\r\n }\r\n}\r\n_toggleSlideAnimation(el, inview) {\r\n\/\/ \u753b\u9762\u306e\u4e2d\u306b\u5165\u3063\u305f\u3089\u30d2\u30fc\u30ed\u30fc\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u958b\u59cb\r\n  if(inview) {\r\n    this.hero.start();\r\n\/\/ \u753b\u9762\u306e\u5916\u306b\u51fa\u305f\u3089\u30d2\u30fc\u30ed\u30fc\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u6b62\u3081\u3066\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u4e0b\u3052\u306a\u3044\u3088\u3046\u306b\u3059\u308b\r\n  } else {\r\n    this.hero.stop();\r\n}\r\n}\r\n_destroyObservers() {\r\n  this.observers.forEach(ob => {\r\n  ob.destroy();\r\n});\r\n}\r\n\/\/ \u30c7\u30b9\u30c8\u30ed\u30a4\u30e1\u30bd\u30c3\u30c9\u306e\u8ffd\u52a0\r\ndestroy() {\r\n  this._destroyObservers();\r\n}\r\n\r\n_scrollInit() {\r\n\/\/ \u30bb\u30c3\u30bf\u30fc\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3093\u3067\u3044\u3066\u53f3\u8fba\u306e\u5024\u304c(val)\u306b\u683c\u7d0d\u3055\u308c\u308b\r\n\/\/ this._navAnimation.bind(this)\u3067\u306a\u3044\u3068\u30a8\u30e9\u30fc(\u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u30e1\u30bd\u30c3\u30c9\u5185\u3067this\u3092\u4f7f\u3063\u3066\u3044\u308b\u305f\u3081)\r\n\/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u76e3\u8996\u304c\u4f55\u5ea6\u3067\u3082\u767a\u52d5\u3059\u308b\u3088\u3046\u306b{once: false}\u3059\u308b\r\nthis.observers = new ScrollObserver('.nav-trigger', this._navAnimation.bind(this), {once: false});\r\n\/\/ \u30ab\u30d0\u30fc\u30b9\u30e9\u30a4\u30c9\u306b\u5bfe\u3057\u3066\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\r\nthis.observers = new ScrollObserver('.cover-slide', this._inviewAnimation);\r\n\/\/ this._navAnimation.bind(this)\u3067\u306a\u3044\u3068\u30a8\u30e9\u30fc(\u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u30e1\u30bd\u30c3\u30c9\u5185\u3067this\u3092\u4f7f\u3063\u3066\u3044\u308b\u305f\u3081)\r\nthis.observers = new ScrollObserver('.appear', this._inviewAnimation, {rootMargin: \"-100px 0px\"});\r\nthis.observers = new ScrollObserver('.tween-animate-title', this._textAnimation, {rootMargin: \"-200px 0px\"});\r\n\/\/ \u30b9\u30ef\u30a4\u30d1\u30fc\u30b3\u30f3\u30c6\u30ca\u30fc\u3092\u76e3\u8996\u3059\u308b\r\nthis.observers = new ScrollObserver('.swiper-container', this._toggleSlideAnimation.bind(this), {once: false});\r\n\/\/ rootMargin\u3067\u767a\u706b\u3059\u308b\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u5236\u5fa1 \r\nthis.observers = new ScrollObserver('#main-content', this._sideAnimation.bind(this), {once: false, rootMargin: \"-300px 0px\"});\r\n}\r\n}<\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
1:\u30d8\u30c3\u30c0\u30fc\u3084\u30b5\u30a4\u30c9\u30d0\u30fc\u3092\u4f5c\u6210\u3057\u30d9\u30fc\u30b9\u3092\u5b8c\u6210\u3055\u305b\u308b \u30e2\u30d0\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc\u306e\u3068\u3053\u308d\u3067\u4f5c\u6210\u3057\u305fstyle.scss\u3092\u6d41\u7528\u3059\u308b _mobile-menu.scss\u306b\u30ea\u30cd\u30fc\u30e0\u3057\u3066modules\u306b\u8cbc\u308a\u4ed8\u3051\u3059\u308b style.scss\u3067\u8aad […]<\/p>\n","protected":false},"author":1,"featured_media":2196,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[17,27],"tags":[],"class_list":["post-2174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-programming-note"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t