app/template/user_data/about.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% block main %}
  3.     {{ include('Block/banner.twig', { 'image': asset('assets/img/about.png', "user_data"), 'title': 'ABOUT', 'subtitle': '企業情報' }) }}
  4.     <div class="about">
  5.         <div class="about__container">
  6.             <div class="about__section__wrapper js-fixed-group">
  7.                 <div class="about__section__wrapper__left js-fixed-area">
  8.                     <section id="vision" class="about__section group__area scroll-fadein">
  9.                         <h2 class="about__section__title">VISION</h2>
  10.                         <p class="about__section__subtitle">ビジョン</p>
  11.                         <p class="about__section__txt">
  12.                             {{
  13.                                 '私たちは、あらゆる可能性を感じ、
  14.                                 新しい場所（箱）を提供し続けることを目指しますJukeboxは、
  15.                                 多様な「ヒト」「モノ」「コト」を集め、
  16.                                 ワクワクする箱を提供していく
  17.                                 「このヒトに会えば」
  18.                                 「こんなモノがあれば」
  19.                                 「こんなコトができたら」
  20.                                 人生にちょっとしたスパイスを'|nl2br
  21.                             }}
  22.                         </p>
  23.                     </section>
  24.                     <section id="mission" class="about__section group__area scroll-fadein">
  25.                         <h2 class="about__section__title">MISSION</h2>
  26.                         <p class="about__section__subtitle">ミッション</p>
  27.                         <p class="about__section__txt">
  28.                             {{
  29.                                 '​​豊かな社会の実現に貢献すべく、新しい価値を創造します
  30.                                 急激に進化していく世の中で、良いモノやコト、文化は残り続ける
  31.                                 一方、変わっていくモノ、変わらなきゃいけないコトもある
  32.                                 また、変わってはいけないコトもあるかもしれない
  33.                                 本質を見抜き、３世代にマッチした新たな価値を見出す為、これらは融合すべきだと考える
  34.                                 全ては、豊かな社会の実現の為に'|nl2br
  35.                             }}
  36.                         </p>
  37.                     </section>
  38.                     <section id="value" class="about__section group__area scroll-fadein">
  39.                         <h2 class="about__section__title">VALUE</h2>
  40.                         <p class="about__section__subtitle">バリュー</p>
  41.                         <p class="about__section__txt">
  42.                             {{
  43.                                 '”​その先へ”
  44.                                 私たちは、まだ見ぬ日本へ
  45.                                 そして、まだ見ぬ世界へ
  46.                                 苦悩の先へ
  47.                                 努力の先へ
  48.                                 熱中した先へ
  49.                                 信頼する仲間、愛すべき人の先へ
  50.                                 熱狂の先へ
  51.                                 まだ見ぬその先へ'|nl2br
  52.                             }}
  53.                         </p>
  54.                     </section>
  55.                 </div>
  56.                 <div class="about__section__wrapper__right">
  57.                     <div class="js-fixed-elm">
  58.                         <a href="#vision" class="target-content">Vision</a>
  59.                         <a href="#mission" class="target-content">Mission</a>
  60.                         <a href="#value" class="target-content">Value</a>
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.         </div>
  65.         <section class="info__section">
  66.             <div class="info__section__title">
  67.                 <img src="{{ asset('assets/img/information_title.png', "user_data") }}" alt="" class="rellax" data-rellax-vertical-scroll-axis="x" data-rellax-horizontal-speed="-10">
  68.             </div>
  69.             <div class="about__container">
  70.                 <div class="ec-secNewHeading is-center text-center bgextend bgLRextendTrigger">
  71.                     <div class="bgappearTrigger">
  72.                         <p class="info__section__subtitle">
  73.                             会社概要
  74.                         </p>
  75.                     </div>
  76.                 </div>
  77.                 <div class="info__list">
  78.                     <div class="info__row scroll-fadein">
  79.                         <p class="info__col">会社名</p>
  80.                         <p class="info__col">株式会社ジュークボックス</p>
  81.                     </div>
  82.                     <div class="info__row scroll-fadein">
  83.                         <p class="info__col">設立日</p>
  84.                         <p class="info__col">2019年4月3日</p>
  85.                     </div>
  86.                     <div class="info__row scroll-fadein">
  87.                         <p class="info__col">代表取締役</p>
  88.                         <p class="info__col">{{ '池田 久美子'|nl2br }}</p>
  89.                     </div>
  90.                     <div class="info__row scroll-fadein">
  91.                         <p class="info__col">所在地</p>
  92.                         <p class="info__col">{{ 
  93.                                             '〒106-0032
  94.                                             東京都港区六本木6‐3‐1
  95.                                             六本木ヒルズクロスポイント10F'|nl2br
  96.                             }}
  97.                         </p>
  98.                     </div>
  99.                     <div class="info__row scroll-fadein">
  100.                         <p class="info__col">取引銀行</p>
  101.                         <p class="info__col">{{
  102.                             'みずほ銀行 六本木支店
  103.                             三菱UFJ銀行 六本木支店
  104.                             三井住友銀行 六本木支店'|nl2br
  105.                         }}</p>
  106.                     </div>
  107.                 </div>
  108.             </div>
  109.         </section>
  110.     </div>
  111. {% endblock %}
  112. {% block javascript %}
  113.  <script src="{{ asset('assets/js/rellax.min.js', 'user_data') }}"></script>
  114.   <script>
  115.    const rellax = new Rellax('.rellax', {
  116.     horizontal: true
  117.     });
  118. </script>
  119. <script>
  120. 'use strict';
  122. document.addEventListener('DOMContentLoaded', function () {
  123.     //指定エリア内に要素を追従させる関数（追従要素,追従エリア）
  124.     const areaFixedFunk = (fixedGroup) => {
  125.     //グループチェック
  126.     const groups = document.querySelectorAll(fixedGroup);
  127.     if(groups.length === 0) {
  128.         return;
  129.     }
  131.     //追従チェック関数
  132.     const checkFixed = (group,target,area) => {
  133.         //要素の位置と高さを取得
  134.         const startPosi = group.getBoundingClientRect().top;
  135.         const targetHeight = target.clientHeight;
  136.         const groupHeight = group.clientHeight;
  137.         const endPosi = startPosi + groupHeight;
  138.         //エリア内の処理
  139.         if(0 > startPosi && targetHeight < endPosi) {
  140.         target.classList.add('is-fixed');
  141.         target.style.top = '';
  142.         const groupAreas = area.querySelectorAll('.group__area')
  143.         const targetContents = target.querySelectorAll('.target-content')
  144.         // 各targetContentに対して処理
  145.         groupAreas.forEach((groupArea, index) => {
  146.             const startAreaPosi = groupArea.getBoundingClientRect().top;
  147.             const groupAreaHeight = groupArea.clientHeight;
  148.             const endAreaPosi = startAreaPosi + groupAreaHeight;
  149.             // contentがgroupArea内にある場合にクラスを付与
  150.             if (startAreaPosi < 0 && 0 < endAreaPosi) {
  151.             if (targetContents[index].classList.contains('is-current')) return;
  152.             targetContents[index].classList.add('is-current');
  153.             } else{
  154.             if (!targetContents[index].classList.contains('is-current')) return;
  155.             targetContents[index].classList.remove('is-current');
  156.             }
  157.         });
  158.         //エリアより上の処理
  159.         } else if(0 <= startPosi) {
  160.         target.classList.remove('is-fixed');
  161.         target.style.top = '';
  163.         //エリアより下の処理
  164.         } else {
  165.         target.classList.remove('is-fixed');
  166.         //停止位置を設定
  167.         target.style.top = (groupHeight - targetHeight) + 'px';
  168.         }
  169.     }
  171.     //エリア毎に処理
  172.     groups.forEach((group) => {
  173.         //エリア内に追従要素が存在する場合のみ処理する
  174.         const target = group.querySelector('.js-fixed-elm');
  175.         const area = group.querySelector('.js-fixed-area');
  176.         if(target && area) {
  177.         checkFixed(group,target,area);
  178.         window.addEventListener('resize', ()=> {
  179.             if(window.innerWidth <= 768) return;
  180.             checkFixed(group,target,area);
  181.         });
  182.         window.addEventListener('scroll', ()=> {
  183.             if(window.innerWidth <= 768) return;
  184.             checkFixed(group,target,area);
  185.         }, {passive: true});
  186.         }
  187.     });
  188.     }
  189.     //関数呼び出し（追従要素,追従エリア）
  190.     areaFixedFunk('.js-fixed-group');
  191. });
  192. </script>
  193. {% endblock javascript %}