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/25winter/wi2025_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: 25%;
  75.   right: 0;
  76.   width: 85%;
  77.   color: #fff;
  78.   padding-left: 24%;
  79.   padding-right: ;
  80.   line-height: 1.4;
  81.   font-size: clamp(18px,1.4vw,24px);
  82.   {#-webkit-text-stroke: 0.04rem #fff;#}
  83.   {#text-stroke: 0.04rem #fff;#}
  84. }  
  85. /* Staggered Vertical Items ------------------------------------------------------*/
  86. .item-header {
  87.   position: absolute;
  88.   top: 28%;
  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 c {
  113.   display: inline-block;
  114.   transform: translateY(100%);
  115.   padding-bottom: -6px;
  116.   margin-bottom: -6px;
  117. }        
  118. .item-header .vertical-part c {
  119.   transition: .6s;
  120.   padding-bottom: -6px;
  121.     margin-bottom: -6px;
  122. }        
  123. .item-description .vertical-part c {
  124.   padding-left: 0px;
  125.   transition: .21s;
  126.   padding-bottom: -6px;
  127.     margin-bottom: -6px;
  128. }       
  129. .item.active .item-header .vertical-part c {
  130.   transform: translateY(0);
  131.   padding-bottom: -6px;
  132.     margin-bottom: -6px;
  133. }       
  134. .item.active .item-description .vertical-part c {
  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="ナカトミ2025ウィンター">
  241.     <title>ナカトミ2025ウィンター</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/index.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/25winter/2025winter_catalog.png" alt="Image 1">    
  272.                     </div>
  273.                     <!-- Staggered Header Elements -->
  274.                     <div class="item-header">
  275.                        <span class="vertical-part"></span>
  276.                     </div>
  277.                     <!-- Staggered Description Elements -->
  278.                     <div class="item-description">
  279.                         <span class="vertical-part"><c><font color="red">NAKATOMI</font></c></span>
  280.                         <span class="vertical-part"><c><font color="#00ffcc">ウィンターカタログになります。</font></c></span>
  281.                         <span class="vertical-part"><c>新商品をはじめ冬に役立つ製品をラインナップしていますので是非、ご覧ください。</c></span>
  282.                     </div>
  283.                 </div>
  284.                 <div class="item">
  285.                     <div class="item-image-container">
  286.                         <img class="item-image" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/heater_top.png" alt="Image 2">
  287.                     </div>
  288.                     <!-- Staggered Header Elements -->
  289.                     <div class="item-header">
  290.                         <span class="vertical-part"></span>
  291.                     </div>
  292.                     <!-- Staggered Description Elements -->
  293.                     <div class="item-description">
  294.                         <font color="#00ffcc">
  295.                         <span class="vertical-part"><c>ナカトミの暖房機器で</c></span>
  296.                         <span class="vertical-part"><c>シーンに合わせて最適な暖め方を～</c></span>
  297.                         </font>
  298.                         <font size="4px">
  299.                         <br><span class="vertical-part"><c>【選べる４シリーズ】</c></span>
  300.                         <br><span class="vertical-part"><c>・スポットヒーター</c></span>
  301.                         <br><span class="vertical-part"><c>・赤外線ヒーター</c></span>
  302.                         <br><span class="vertical-part"><c>・遠赤外線ヒーター</c></span>
  303.                         <br><span class="vertical-part"><c>・電気ファンヒーター</c></span>
  304.                         </font>
  305.                     </div>
  306.                 </div>
  307.                  <div class="item">
  308.                     <div class="item-image-container">
  309.                         <img class="item-image" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/electric_heater_top.png" alt="Image 3">
  310.                     </div>
  311.                     <!-- Staggered Header Elements -->
  312.                     <div class="item-header">
  313.                         <span class="vertical-part"></span>
  314.                     </div>
  315.                     <!-- Staggered Description Elements -->
  316.                     <div class="item-description">
  317.                         <span class="vertical-part"><c><font color="#00ffcc">遠赤外線ヒーターにNEW MODELが登場しました！</font></c></span>
  318.                         <br><span class="vertical-part"><c>豊富なラインナップから100V・200Vとご使用シーンに合わせてお選びいただけます。</c></span>
  319.                     </div>
  320.                 </div>
  321.                 <div class="item">
  322.                     <div class="item-image-container">
  323.                         <img class="item-image" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/ventilation_fan.png" alt="Image 4">
  324.                     </div>
  325.                     <!-- Staggered Header Elements -->
  326.                     <div class="item-header">
  327.                         <span class="vertical-part"></span>
  328.                     </div>
  329.                     <!-- Staggered Description Elements -->
  330.                     <div class="item-description">
  331.                         <span class="vertical-part"><c><font color="#00ffcc">一般（台所）用換気扇シリーズ</font></c></span>
  332.                         <br><span class="vertical-part"><c>設置環境に合わせて選べる２タイプ、全５機種をシリーズラインナップさせていただきました。</c></span>
  333.                     </div>
  334.                 </div>
  335.                 <div class="item">
  336.                     <div class="item-image-container">
  337.                         <img class="item-image" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/dehumidifier_top.png" alt="Image 5">
  338.                     </div>
  339.                     <!-- Staggered Header Elements -->
  340.                     <div class="item-header">
  341.                         <span class="vertical-part"></span>
  342.                     </div>
  343.                     <!-- Staggered Description Elements -->
  344.                     <div class="item-description">
  345.                         <span class="vertical-part"><c><font color="#00ffcc">パワフル除湿で快適空間を！</font></c></span>
  346.                         <br><span class="vertical-part"><c>乾燥・貯蔵・生産工程など様々なシーンに</c></span>
  347.                         <br><span class="vertical-part"><c><font color="#00ffcc">天吊り/床置き式【TFDM-25】</font>が追加ラインナップされてより幅広いシーンでの活用が可能になりました！</c></span>
  348.                     </div>
  349.                 </div>
  350.             </div>            
  351.             <div class="controls">
  352.                 <ul>
  353.                     <li class="control" data-index="0"></li>
  354.                     <li class="control" data-index="1"></li>
  355.                     <li class="control" data-index="2"></li>
  356.                     <li class="control" data-index="3"></li>
  357.                     <li class="control" data-index="4"></li>
  358.                </ul>
  359.             </div>
  360.         </div>
  361.         <div class="box_sm25_b">
  362.             {#<a href="#" class="link_btn _off">#}
  363.             <a href="https://www.nakatomi-sangyo.com/catalog/index.html">
  364.                 <img class="fit-picture_sl25" src="https://nakatomishop.sakura.ne.jp/prod//merchandiseimage/25winter/2025winter_catalog.png" alt="Image 1"></a>    
  365.             <a href="https://www.nakatomishop.com/products/list?category_id=3">
  366.                 <img class="fit-picture_sl25"  src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/heater_top.png" alt="Image 2"></a>
  367.             <a href="https://www.nakatomishop.com/products/list?category_id=35">
  368.                 <img class="fit-picture_sl25"  src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/electric_heater_top.png" alt="Image 3"></a> 
  369.             <a href="https://www.nakatomishop.com/products/list?category_id=101">
  370.                 <img class="fit-picture_sl25"  src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/ventilation_fan.png" alt="Image 4"></a> 
  371.             <a href="https://www.nakatomishop.com/products/list?category_id=36">
  372.                 <img class="fit-picture_sl25"  src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/dehumidifier_top.png" alt="Image 5"></a> 
  373.         </div>    
  374.     </div>
  375. </div>
  376. <script>
  377.     // Master DOManipulator v2 ------------------------------------------------------------
  378.     const items = document.querySelectorAll('.item'),
  379.       controls = document.querySelectorAll('.control'),
  380.       headerItems = document.querySelectorAll('.item-header'),
  381.       descriptionItems = document.querySelectorAll('.item-description'),
  382.       activeDelay = 0.76,
  383.       interval = 6000;
  384.     
  385.     let current = 0;
  386.     
  387.     const slider = {
  388.       init: () => {
  389.         controls.forEach(control => control.addEventListener('click', (e) => { slider.clickedControl(e) }));
  390.         controls[current].classList.add('active');
  391.         items[current].classList.add('active');
  392.       },
  393.       nextSlide: () => { // Increment current slide and add active class
  394.         slider.reset();
  395.         if (current === items.length - 1) current = -1; // Check if current slide is last in array
  396.         current++;
  397.         controls[current].classList.add('active');
  398.         items[current].classList.add('active');
  399.         slider.transitionDelay(headerItems);
  400.         slider.transitionDelay(descriptionItems);
  401.       },
  402.       clickedControl: (e) => { // Add active class to clicked control and corresponding slide
  403.         slider.reset();
  404.         clearInterval(intervalF);
  405.     
  406.         const control = e.target,
  407.           dataIndex = Number(control.dataset.index);
  408.     
  409.         control.classList.add('active');
  410.         items.forEach((item, index) => { 
  411.           if (index === dataIndex) { // Add active class to corresponding slide
  412.             item.classList.add('active');
  413.           }
  414.         })
  415.         current = dataIndex; // Update current slide
  416.         slider.transitionDelay(headerItems);
  417.         slider.transitionDelay(descriptionItems);
  418.         intervalF = setInterval(slider.nextSlide, interval); // Fire that bad boi back up
  419.       },
  420.       reset: () => { // Remove active classes
  421.         items.forEach(item => item.classList.remove('active'));
  422.         controls.forEach(control => control.classList.remove('active'));
  423.       },
  424.       transitionDelay: (items) => { // Set incrementing css transition-delay for .item-header & .item-description, .vertical-part, b elements
  425.         let seconds;
  426.         
  427.         items.forEach(item => {
  428.           const children = item.childNodes; // .vertical-part(s)
  429.           let count = 1,
  430.             delay;
  431.           
  432.           item.classList.value === 'item-header' ? seconds = 0.15 : seconds = 0.007;
  433.     
  434.           children.forEach(child => { // iterate through .vertical-part(s) and style b element
  435.             if (child.classList) {
  436.               item.parentNode.classList.contains('active') ? delay = count * seconds + activeDelay : delay = count * seconds;
  437.               child.firstElementChild.style.transitionDelay = `${delay}s`; // b element
  438.               count++;
  439.             }
  440.           })
  441.         })
  442.       },
  443.     }
  444.     let intervalF = setInterval(slider.nextSlide, interval);
  445.     slider.init();
  446. </script>
  447. {% endblock %}