{"id":2125,"date":"2021-09-12T12:42:58","date_gmt":"2021-09-12T03:42:58","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=2125"},"modified":"2022-10-07T21:48:35","modified_gmt":"2022-10-07T12:48:35","slug":"javascript11","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2021\/09\/12\/javascript11\/","title":{"rendered":"JavaScript11(\u30b5\u30a4\u30c8\u4f5c\u6210(3))"},"content":{"rendered":"

1:\u30b9\u30de\u30db\u753b\u9762\u306e\u4f5c\u6210<\/h3>\n

main.js\u306ecover-slide\u306binview\u3092\u4ed8\u52a0\u3055\u305b\u308b\u30aa\u30d6\u30b6\u30fc\u30d0\u30fc\u3092\u8ffd\u52a0<\/h2>\n
document.addEventListener('DOMContentLoaded', function () {\r\n\/\/ new\u3067\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\r\n  const hero = new HeroSlider('.swiper-container');\r\n  hero.start();\r\n\r\n\/\/ \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u8a2d\u3051\u308b\r\n  const cb = function (el, inview) {\r\n    if (inview) {\r\n      const ta = new TweenTextAnimation(el);\r\n    ta.animate();\r\n }\r\n};\r\n\r\n\/\/ \u7b2c1\u5f15\u6570\u306b\u30a8\u30ec\u30e1\u30f3\u30c8\u7b2c\u4e8c\u5f15\u6570\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570<\/strong>\r\n  const so = new ScrollObserver(\".tween-animate-title\", cb);\r\n\/\/ \u7b2c1\u5f15\u6570\u306bDOM\u7b2c\u4e8c\u5f15\u6570\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570<\/strong>\r\n  const _inviewAnimation = function(el, inview) {\r\n     if (inview) {\r\n\/\/ \u3082\u3057\u753b\u9762\u5185\u306b\u5165\u3063\u3066\u304d\u305f\u3089inview\u3092\u4ed8\u52a0\r\n<\/strong>     el.classList.add('inview');\r\n     }else {\r\n\/\/ \u753b\u9762\u5916\u306b\u306a\u3063\u305f\u3089inview\u3092\u524a\u9664\r\n<\/strong>     el.classList.remove('inview');\r\n }\r\n}\r\n  const so2 = new ScrollObserver(\".cover-slide\", _inviewAnimation);\r\n});<\/pre>\n
index.html\u306e\u30d2\u30fc\u30ed\u30b9\u30e9\u30a4\u30c0\u30fc\u3088\u308a\u4e0b\u306b\u4ee5\u4e0b\u3092\u8a18\u8ff0<\/h2>\n
<div id=\"main-content\">\r\n  <section class=\"houses\">\r\n   <div>\r\n    <h2 class=\"main-title tween-animate-title\">Pick up<\/h2>\r\n    <p class=\"sub-title tween-animate-title\">\u30d4\u30c3\u30af\u30a2\u30c3\u30d7\u7279\u96c6<\/p>\r\n   <\/div>\r\n  <div class=\"houses__inner\">\r\n    <div class=\"houses__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=\"houses__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=\"houses__item\">\r\n     <div class=\"cover-slide hover-darken\">\r\n    <div class=\"bg-img-zoom img-bg50\" style=\"background-image: url(images\/Birthday.jpg)\">\r\n     <\/div>\r\n    <\/div>\r\n     <p class=\"houses__title\">\u8a95\u751f\u65e5\u30d7\u30ec\u30bc\u30f3\u30c8\u7279\u96c6<\/p>\r\n    <\/div>\r\n  <div class=\"houses__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=\"houses__title\">\u30d0\u30e9\u7279\u96c6<\/p>\r\n       <\/div>\r\n       <div class=\"houses__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=\"houses__title\">\u6625\u306e\u82b1\u7279\u96c6<\/p>\r\n       <\/div>\r\n       <button class=\"btn slide-bg\">\u3055\u3089\u306b\u8a73\u3057\u304f<\/button>\r\n      <\/section>\r\n     <\/div>\r\n    <\/div>\r\n   <\/div>\r\n<!-- <div class=\"cover-slide hover-darken\">\r\n  <img class=\"img-zoom\" src=\"images\/nemophila.jpg\" alt=\"\" \/>\r\n  <\/div>\r\n  <button class=\"btn float\">Button<\/button>\r\n  <button class=\"btn filled\">Button<\/button>\r\n  <button class=\"btn letter-spacing\">Button<\/button>\r\n  <button class=\"btn shadow\">Button<\/button>\r\n  <button class=\"btn solid\">Button<\/button>\r\n  <button class=\"btn slide-bg\">Button<\/button>\r\n  <button class=\"btn cover-3d\">Button<\/button> -->\r\n  <!-- <a class=\"btn-cubic\"><span class=\"hovering\">Now, Hovering<\/span><span class=\"default\">Button<\/span><\/a> -->\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><\/pre>\n
<\/p>\n
_image-slide.scss\u306emargin-bottom: 80vh; \u306e\u8a18\u8ff0\u3092\u524a\u9664<\/h2>\n
_hero-slider.scss\u306b\u4ee5\u4e0b\u3092\u8a18\u8ff0<\/h2>\n
\"\"<\/p>\n
_base.scss\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0<\/h2>\n
\n
.content-width {\r\n  width: 90%;\r\n  margin: 0 auto;\r\n  max-width: $contentMaxWidth;\r\n}\r\n.houses {\r\n\/\/ \u5de6\u53f3\u306b\u4f59\u767d\u3092\u8ffd\u52a0:html\u306b\u3042\u307e\u308a\u8a18\u8ff0\u3057\u305f\u304f\u306a\u3044\u3068\u304d\u306b\u30aa\u30b9\u30b9\u30e1\r\n@extend .content-width;\r\n@extend .mb-lg;\r\n\r\n  &__inner {\r\n    @extend .flex;\r\n}\r\n\r\n  &__title {\r\n    @extend .font-lr;\r\n    @extend .mb-sm;\r\n\r\n  &__btn {\r\n    text-align: center;\r\n\/\/ \u30dc\u30bf\u30f3\u306e\u4f4d\u7f6e\u3092\u8abf\u6574\u3059\u308b\r\n    flex-basis: 100%;\r\n}\r\n}\r\n.main-title {\r\n\/\/\u7d99\u627f\u3059\u308b\u3053\u3068\u3067\u3001\u753b\u9762\u306e\u5927\u304d\u3055\u304c\u5909\u308f\u3063\u3066\u3082\u4eca\u306e\u753b\u9762\u306e\u8a2d\u5b9a\u304c\u9069\u5fdc\u3055\u308c\u308b\r\n  @extend .font-lg;\r\n  font-weight: 600;\r\n  margin-bottom: 0;\r\n\/\/ \u4e00\u884c\u306b\u91cd\u306a\u3089\u306a\u3044\u3088\u3046\u306b\u3059\u308b\r\n  display: block;\r\n}\r\n.sub-title {\r\n  @extend .font-sm;\r\n  color: $cSubTitle;\r\n}\r\n\/\/\u6b21\u306eflex\u3067\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u3059\u308b\u306e\u306b\u5fc5\u8981\r\n.flex {\r\n  display: flex;\r\n  flex-direction: column;\r\n}<\/pre>\n<\/div>\n
_variables.scss\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0<\/h2>\n
$cWhite: white;\r\n$cBlack: black;\r\n$cSubTitle: #535353;\r\n$cBgGray: #eaebe6;\r\n$cWineRed: #904669;\r\n$contentMaxWidth: 1070px;\r\n$navHeight: 100px;<\/pre>\n
\u3053\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308c\u3070OK<\/p>\n