app/template/default/Block/developsample4.twig line 1

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .main_box_sm25 {
  4.   font-family: 'Georgia','fantasy';
  5.   width: 100%;
  6.   height: 600px;
  7.   background-image: url("https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/sm2025_top.png");  
  8.   margin-left: auto;
  9.   margin-right: auto;
  10.   box-sizing: border-box;
  11.   margin: 0;
  12.   padding: 0;
  13.   background-size: cover;
  14. }  
  15. .content-width {
  16.   width: 83%;
  17.   max-width: 1080px;
  18.   margin: 0 auto;
  19. }       
  20. .slideshow {       
  21.   position: relative;
  22.   width: 100%;
  23.   height: 100%;
  24.   display: flex;
  25.   flex-direction: column;
  26.   justify-content: space-around;
  27. }       
  28. .slideshow-items {
  29.   margin-top: 8rem;
  30.   position: relative;
  31.   width: 100%;
  32. }       
  33. .item {
  34.   position: absolute;
  35.   width: 100%;
  36.   height: auto;
  37.   z-index: 9;
  38. }       
  39. .item-image-container {
  40.   position: relative;
  41.   width: 30%;
  42. }        
  43. .item-image-container::before {
  44.   content: '';
  45.   position: relative;
  46.   top: 0px;
  47.   left: 0;
  48.   width: 30%;
  49.   height: 100%;
  50.   background: #f5f5f5;
  51.   opacity: 0;
  52.   z-index: 0;
  53. }       
  54. .item-image {
  55.   position: relative;
  56.   width: auto;
  57.   max-height: 420px;
  58.   height: auto;
  59.   opacity: 0;
  60.   display: block;
  61.   /* transition: property name | duration | timing-function | delay  */
  62.   transition: opacity .3s ease-out .45s;
  63.   z-index: 0;
  64. }      
  65. .item.active .item-image {
  66.   opacity: 1;
  67. }
  68. .item.active .item-image-container::before {
  69.   opacity: 0;
  70.   z-index: 1;
  71. }  
  72. .item-description {
  73.   position: absolute;
  74.   top: 34%;
  75.   right: 0;
  76.   width: 72%;
  77.   color: #0000cc;
  78.   padding-left: 22%;
  79.   padding-right: ;
  80.   line-height: 1.4;
  81.   font-size: clamp(18px,1.4vw,24px);
  82.   {#-webkit-text-stroke: 0.03rem #fff;
  83.   text-stroke: 0.03rem #555555;#}
  84. }  
  85. /* Staggered Vertical Items ------------------------------------------------------*/
  86. .item-header {
  87.   position: absolute;
  88.   top: 25%;
  89.   left: 1%;
  90.   width: 40%;
  91.   z-index: 100;
  92.   padding-bottom: -6px;
  93.   margin-bottom: -6px;
  94. }       
  95. .item-header .vertical-part {
  96.   margin: 0 auto;
  97.   -webkit-font-smoothing: auto;
  98.   line-height: 1.2;
  99.   font-size: clamp(28px,3vw,38px);
  100.   color: #0066ff;
  101.   padding-bottom: -6px;
  102.   margin-bottom: -6px;
  103.   {#-webkit-text-stroke: 0.03rem #fff; 
  104.    text-stroke: 0.03rem #555555;#}
  105. }      
  106. .vertical-part {
  107.   overflow: hidden;
  108.   display: inline-block;
  109.   padding-bottom: -6px;
  110.   margin-bottom: -6px;
  111. }        
  112. .vertical-part b {
  113.   display: inline-block;
  114.   transform: translateY(100%);
  115.   padding-bottom: -6px;
  116.   margin-bottom: -6px;
  117. }        
  118. .item-header .vertical-part b {
  119.   transition: .6s;
  120.   padding-bottom: -6px;
  121.     margin-bottom: -6px;
  122. }        
  123. .item-description .vertical-part b {
  124.   padding-left: 0px;
  125.   transition: .21s;
  126.   padding-bottom: -6px;
  127.     margin-bottom: -6px;
  128. }       
  129. .item.active .item-header .vertical-part b {
  130.   transform: translateY(0);
  131.   padding-bottom: -6px;
  132.     margin-bottom: -6px;
  133. }       
  134. .item.active .item-description .vertical-part b {
  135.   transform: translateY(0);
  136.   padding-bottom: -6px;
  137.     margin-bottom: -6px;
  138. }       
  139. /* Controls ----------------------------------------------------------------------*/
  140. .controls {
  141.   position: relative;
  142.   text-align: right;
  143.   margin-right: 30px;
  144.   margin-top: 420px;
  145.   margin-bottom: 10px;
  146.   z-index: 1000;
  147. }       
  148. .controls ul {
  149.   list-style: none;
  150. }        
  151. .controls ul li {
  152.   display: inline-block;
  153.   width: 10px;
  154.   height: 10px;
  155.   margin: 2px;
  156.   background:#555555;;
  157.   cursor: pointer;
  158. }       
  159. .controls ul li.active {
  160.   background:#dcdcdc;;
  161. }     
  162. summary { display: block;
  163.   cursor: pointer; 
  164. }
  165. .cp_navi02 ul {
  166.   width: 260px;/*メニューの幅*/
  167.   margin-left: 20px;
  168.   margin: 0 auto;
  169.   padding: 0;
  170.   list-style-type: none;
  171.   background-color: #eeeeee;
  172.   border-radius: 4px 4px 4px 4px;
  173.   position: absolute;
  174.   margin-top: 10rem;
  175.   margin-left: 0.5rem;
  176.   z-index: 9999;
  177. }
  178. .cp_navi02 li a {
  179.   display: block;
  180.   padding: 6px 16px;
  181.   text-decoration: none;
  182.   color: #000000;
  183.   transition: all .3s;
  184.   text-align: left;
  185. }
  186. .cp_navi02 li {
  187.   text-align: center;
  188. }
  189. .cp_navi02 li:last-child {
  190.   border-bottom: none;
  191. }
  192. .cp_navi02 li a.active {
  193.   margin: 0 auto;
  194.   margin-top: px;
  195.   color: #fff;
  196.   background-color: #1b2538;
  197.   border-radius: 4px 4px 0px 0px;
  198.   font-weight: 900;
  199. }
  200. .cp_navi02 li a:hover:not(.active) {
  201.   color: #ffffff;
  202.   background-color: #1b2538;
  203.   text-align: left;
  204. }
  205. .example_cp2 {
  206.   display: inline;
  207.   font-size: 4rem;
  208.   color: #ffffff;
  209.   position: absolute;
  210.   margin-top: 5rem;
  211.   margin-left: 0.5rem;
  212. }
  213. .fit-picture_sl25 {
  214.   width: 5.5rem;    
  215.   padding-right: 1%;
  216. }
  217. .box_sm25_a {
  218.   position: absolute;    
  219.   width: 300px;
  220.   margin: 0 auto;
  221.   justify-content: space-around;
  222.   margin-top: -1rem;
  223.   text-align: center;      
  224. }
  225. .box_sm25_b {
  226.   position: absolute;    
  227.   width: 360px;
  228.   margin: 0 auto;
  229.   justify-content: space-around;
  230.   margin-top: -1rem;
  231.   text-align: center;      
  232.   margin-left: -30px;
  233. }
  234. ._off {
  235.   pointer-events: none;
  236. }
  237. </style>
  238. <head>
  239.     <meta charset="utf-8">
  240.     <meta name="keywords" content="ナカトミ スポットクーラー">
  241.     <title>ナカトミスポットクーラー</title>
  242.     <meta name="viewport" content="width=320, height=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
  243. </head>
  244. <div class="main_box_sm25">
  245.     <details>
  246.         <summary>
  247.             <p class="example_cp2">≡</p>
  248.         </summary>  
  249.     <div class="cp_navi02">
  250.         <ul>
  251.             <li><a href="#" class="active">NAKATOMI SHOP【総合案内】</a></li>
  252.             <li><a href="https://www.nakatomi-sangyo.com/catalog/2025summer.html">総合カタログ【夏】</a></li>
  253.             <li><a href="https://www.nakatomishop.com/products/list?category_id=11">NEW MODEL</a></li>
  254.             <li><a href="#">SHOPオススメ機種（準備中）</a></li>
  255.             <li><a href="https://nakatomishop.sakura.ne.jp/NfNudtBdkd/user_data/spop"><font size="2rem">適合オプション品の確認はこちらから</font></a></li> 
  256.             <li><a href="https://www.nakatomishop.com/products/list?category_id=9">オプション品</a></li>
  257.             <li><a href="https://www.nakatomishop.com/products/list?category_id=10">アウトレット品</a></li>
  258.             <li><a href="https://www.nakatomishop.com/entry">新規会員ポイント</a></li>
  259.             <li><a href="https://www.nakatomishop.com/user_data/3nenhosyoukiyaku">３年保証について</a></li>
  260.             <li><a href="https://www.nakatomishop.com/guide">ご利用ガイド</a></li>
  261.             <li><a href="https://www.nakatomi-sangyo.com/index.html">オフィシャルサイト</a></li>
  262.         </ul>
  263.     </div>
  264.     </details> 
  265.     <div class="content-width">
  266.         <div class="slideshow">
  267.         <!-- Slideshow Items -->
  268.             <div class="slideshow-items">
  269.                 <div class="item">
  270.                     <div class="item-image-container">
  271.                         <img class="item-image" src="https://nakatomishop.sakura.ne.jp/prod//merchandiseimage/25slider/25CATALOG_TOP.png" alt="Image 1">    
  272.                     </div>
  273.                     <!-- Staggered Header Elements -->
  274.                     <div class="item-header">
  275.                        <span class="vertical-part"><b><font color="red">NAKATOMI　</font></b></span>
  276.                        <span class="vertical-part"><b>SUMMER　　</b></span>
  277.                        <span class="vertical-part"><b>CATALOG　　</b></span>
  278.                        <span class="vertical-part"><b>2025　　　　</b></span>
  279.                     </div>
  280.                     <!-- Staggered Description Elements -->
  281.                     <div class="item-description">
  282.                         <span class="vertical-part"><b><font color="red">NAKATOMI </font>2025年　</b></span>
  283.                         <span class="vertical-part"><b>サマーカタログになります。</b></span>
  284.                         <span class="vertical-part"><b>スポットクーラーをはじめ暑い夏を乗り切る</b></span>
  285.                         <span class="vertical-part"><b>イチオシ商品を是非、ご覧ください。</b></span>
  286.                     </div>
  287.                 </div>
  288.                 <div class="item">
  289.                     <div class="item-image-container">
  290.                         <img class="item-image" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-LTD.png" alt="Image 2">
  291.                     </div>
  292.                     <!-- Staggered Header Elements -->
  293.                     <div class="item-header">
  294.                         {#<span class="vertical-part"><b><font color="red">NAKATOMI　　　</font></b></span>
  295.                         <span class="vertical-part"><b><font color="red">SHOP　　　</font></b></span>
  296.                         <span class="vertical-part"><b>Limited MODEL　　　　　　</font></b></span>#}
  297.                     </div>
  298.                     <!-- Staggered Description Elements -->
  299.                     <div class="item-description">
  300.                         <span class="vertical-part"><b><font color="red">NAKATOMI SHOP</font></b></span>
  301.                         <span class="vertical-part"><b>限定 MODEL</b></span>
  302.                         <span class="vertical-part"><b>ナカトミは今年で30周年になります。これを記念してNAKATOMI SHOPだけの限定モデルを販売いたします。是非、ご検討ください。</b></span>
  303.                     </div>
  304.                 </div>
  305.                  <div class="item">
  306.                     <div class="item-image-container">
  307.                         <img class="item-image" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/25NEW_MODEL_.png" alt="Image 3">
  308.                     </div>
  309.                     <!-- Staggered Header Elements -->
  310.                     <div class="item-header">
  311.                         <span class="vertical-part"><b>New　Model　　　</b></span>
  312.                         <span class="vertical-part"><b><font color="#00ffcc">LINEUP</font></b></span>
  313.                     </div>
  314.                     <!-- Staggered Description Elements -->
  315.                     <div class="item-description">
  316.                         <span class="vertical-part"><b>2025年　　　　　　</b></span>
  317.                         <span class="vertical-part"><b><font color="#00ffcc">NEW MODEL</font>をわかりやすくカテゴライズしました。魅力ある新商品をよろしくお願いします。</b></span>
  318.                     </div>
  319.                 </div>
  320.                 <div class="item">
  321.                     <div class="item-image-container">
  322.                         <img class="item-image" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/R32NEWMODEL25_TOP_POP_1.png" alt="Image 4">
  323.                     </div>
  324.                     <!-- Staggered Header Elements -->
  325.                     <div class="item-header">
  326.                         <span class="vertical-part"><b>Pick UP MODEL</b></span>
  327.                         <span class="vertical-part"><b><font color="#00cccc">R32 Series</font></b></span>
  328.                     </div>
  329.                     <!-- Staggered Description Elements -->
  330.                     <div class="item-description">
  331.                         <span class="vertical-part"><b><font color="#00cccc">R32シリーズ</font>は温室効果ガスの排出を抑えた</b></span>
  332.                         <span class="vertical-part"><b>冷媒R32を採用し環境問題に取り組んでいます。</b></span>
  333.                         <span class="vertical-part"><b>R410がGWP2090に対しR32はGWP675と約1/3。環境への負荷が少ない冷媒です。</b></span>
  334.                     </div>
  335.                 </div>
  336.                 <div class="item">
  337.                     <div class="item-image-container">
  338.                         <img class="item-image" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_model.png" alt="Image 5">
  339.                     </div>
  340.                     <!-- Staggered Header Elements -->
  341.                     <div class="item-header">
  342.                         <span class="vertical-part"><b><font size="5px">SPOT COOLER　　　</font></b></span>
  343.                         <span class="vertical-part"><b><font size="5px">OPTION適合表　　　</font></b></span>
  344.                     </div>
  345.                     <!-- Staggered Description Elements -->
  346.                     <div class="item-description">
  347.                         <span class="vertical-part"><b>スポットクーラーのオプション品について</b></span>
  348.                         <span class="vertical-part"><b>適合するかお困りの際はこちらから</b></span>
  349.                         <span class="vertical-part"><b>機種の型式にてご確認いただけます。</b></span>
  350.                     </div>
  351.                 </div>
  352.                 <div class="item">
  353.                     <div class="item-image-container">
  354.                         <img class="item-image" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/outlet_BF-125vz.png" alt="Image 6">
  355.                     </div>
  356.                     <!-- Staggered Header Elements -->
  357.                     <div class="item-header">
  358.                         <span class="vertical-part"><b><font color="red"></font></b></span>
  359.                     </div>
  360.                     <!-- Staggered Description Elements -->
  361.                     <div class="item-description">
  362.                         <span class="vertical-part"><b><font color="red">NAKATOMI SHOP</font></b></span>
  363.                         <span class="vertical-part"><b>アウトレット商品がお買得です！</b></span>
  364.                         <span class="vertical-part"><b>１台限定！ビッグファン「BF-125VZ」が<font color="red">￥69,800</font></b></span>
  365.                     </div>
  366.                 </div>
  367.             </div>            
  369.             <div class="controls">
  370.                 <ul>
  371.                     <li class="control" data-index="0"></li>
  372.                     <li class="control" data-index="1"></li>
  373.                     <li class="control" data-index="2"></li>
  374.                     <li class="control" data-index="3"></li>
  375.                     <li class="control" data-index="4"></li>
  376.                     <li class="control" data-index="5"></li>
  377.                     {#<li class="control" data-index="6"></li>#}
  378.                </ul>
  379.             </div>
  380.         </div>
  381.         <div class="box_sm25_b">
  382.             {#<a href="#" class="link_btn _off">#}
  383.             <a href="https://www.nakatomi-sangyo.com/catalog/index.html">
  384.                 <img class="fit-picture_sl25" src="https://nakatomishop.sakura.ne.jp/prod//merchandiseimage/25slider/25CATALOG_TOP.png" alt="Image 1"></a>    
  385.             <a href="https://www.nakatomishop.com/products/list?category_id=92">
  386.                 <img class="fit-picture_sl25"  src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-LTD.png" alt="Image 2"></a>
  387.             <a href="https://www.nakatomishop.com/products/list?category_id=91">
  388.                 <img class="fit-picture_sl25"  src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/25NEW_MODEL_.png" alt="Image 3"></a> 
  389.             <a href="https://www.nakatomishop.com/products/list?category_id=76">
  390.                 <img class="fit-picture_sl25"  src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/R32NEWMODEL25_TOP_POP_1.png" alt="Image 4"></a> 
  391.             <a href="https://nakatomishop.sakura.ne.jp/NfNudtBdkd/user_data/spop">
  392.                 <img class="fit-picture_sl25"  src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_model.png" alt="Image 5"></a> 
  393.             <a href="https://www.nakatomishop.com/products/detail/1345">
  394.             <img class="fit-picture_sl25" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/outlet_BF-125vz.png" alt="Image 6"></a>
  395.         </div>    
  396.     </div>
  397. </div>
  398. <script>
  399.     // Master DOManipulator v2 ------------------------------------------------------------
  400.     const items = document.querySelectorAll('.item'),
  401.       controls = document.querySelectorAll('.control'),
  402.       headerItems = document.querySelectorAll('.item-header'),
  403.       descriptionItems = document.querySelectorAll('.item-description'),
  404.       activeDelay = 0.76,
  405.       interval = 6000;
  406.     
  407.     let current = 0;
  408.     
  409.     const slider = {
  410.       init: () => {
  411.         controls.forEach(control => control.addEventListener('click', (e) => { slider.clickedControl(e) }));
  412.         controls[current].classList.add('active');
  413.         items[current].classList.add('active');
  414.       },
  415.       nextSlide: () => { // Increment current slide and add active class
  416.         slider.reset();
  417.         if (current === items.length - 1) current = -1; // Check if current slide is last in array
  418.         current++;
  419.         controls[current].classList.add('active');
  420.         items[current].classList.add('active');
  421.         slider.transitionDelay(headerItems);
  422.         slider.transitionDelay(descriptionItems);
  423.       },
  424.       clickedControl: (e) => { // Add active class to clicked control and corresponding slide
  425.         slider.reset();
  426.         clearInterval(intervalF);
  427.     
  428.         const control = e.target,
  429.           dataIndex = Number(control.dataset.index);
  430.     
  431.         control.classList.add('active');
  432.         items.forEach((item, index) => { 
  433.           if (index === dataIndex) { // Add active class to corresponding slide
  434.             item.classList.add('active');
  435.           }
  436.         })
  437.         current = dataIndex; // Update current slide
  438.         slider.transitionDelay(headerItems);
  439.         slider.transitionDelay(descriptionItems);
  440.         intervalF = setInterval(slider.nextSlide, interval); // Fire that bad boi back up
  441.       },
  442.       reset: () => { // Remove active classes
  443.         items.forEach(item => item.classList.remove('active'));
  444.         controls.forEach(control => control.classList.remove('active'));
  445.       },
  446.       transitionDelay: (items) => { // Set incrementing css transition-delay for .item-header & .item-description, .vertical-part, b elements
  447.         let seconds;
  448.         
  449.         items.forEach(item => {
  450.           const children = item.childNodes; // .vertical-part(s)
  451.           let count = 1,
  452.             delay;
  453.           
  454.           item.classList.value === 'item-header' ? seconds = 0.15 : seconds = 0.007;
  455.     
  456.           children.forEach(child => { // iterate through .vertical-part(s) and style b element
  457.             if (child.classList) {
  458.               item.parentNode.classList.contains('active') ? delay = count * seconds + activeDelay : delay = count * seconds;
  459.               child.firstElementChild.style.transitionDelay = `${delay}s`; // b element
  460.               count++;
  461.             }
  462.           })
  463.         })
  464.       },
  465.     }
  466.     let intervalF = setInterval(slider.nextSlide, interval);
  467.     slider.init();
  468. </script>
  469. {% endblock %}