Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="contents">

  <!-- loading画面 -->
  <div id="js-loader" class="loader"></div>

  <!-- header -->
  <header id="header" class="header">
    <div class="header-inner">
      <h1 class="logo">JS Snippets</h1>
      <nav class="nav">
        <ul class="nav-list">
          <li><a href="#menu1">Menu1</a></li>
          <li><a href="#menu2">Menu2</a></li>
          <li><a href="#menu3">Menu3</a></li>
        </ul><!-- /.nav-list -->
      </nav><!-- /.nav -->
    </div><!-- /.header-inner -->
  </header><!-- /#header.header -->

  <!-- menus -->
  <section class="menus">
    <div id="menu1" class="menu menu1">
      <h2 class="menus-ttl">menu1</h2>
    </div><!-- /#menu1.menus -->
    <div id="menu2" class="menu menu2">
      <h2 class="menus-ttl">menu2</h2>
    </div><!-- /#menu1.menus -->
    <div id="menu3" class="menu menu3">
      <h2 class="menus-ttl">menu3</h2>
    </div><!-- /#menu1.menus -->
  </section><!-- /.menus -->

  <!-- accordion -->
  <section class="accordion">
    <div class="accordion__container">
      <h4 class="accordion__title js-accordion-title">Accordion Title 1</h4>
      <div class="accordion__content">Accordion Content 1</div>
      <h4 class="accordion__title js-accordion-title">Accordion Title 2</h4>
      <div class="accordion__content">Accordion Content 2</div>
      <h4 class="accordion__title js-accordion-title">Accordion Title 3</h4>
      <div class="accordion__content">Accordion Content 3</div>
    </div><!-- accordion__container -->
  </section><!-- /.accordion -->

  <!-- acc single -->
  <div class="accordion-single js-acc-single">
    <div class="accordion-single-item js-acc-item">
       <h2 class="accordion-single-title js-acc-single-trigger">Question 1</h2>
       <div class="accordion-single-content">
         <p>This is an Answer 2</p>
       </div>
     </div>
    <div class="accordion-single-item js-acc-item">
       <h2 class="accordion-single-title js-acc-single-trigger">Question 2</h2>
       <div class="accordion-single-content">
         <p>This is an Answer 2</p>
       </div>
     </div>
    <div class="accordion-single-item js-acc-item">
       <h2 class="accordion-single-title js-acc-single-trigger">Question 3</h2>
       <div class="accordion-single-content">
         <p>This is an Answer 3</p>
       </div>
     </div>
 </div><!-- accordion-single -->


  <div class="boxes">
    <div class="fade-in fade-in-up box"></div>
    <div class="fade-in fade-in-up box"></div>
    <div class="fade-in fade-in-left box"></div>
    <div class="fade-in fade-in-left box"></div>
    <div class="fade-in fade-in-right box"></div>
    <div class="fade-in fade-in-right box"></div>
    <div class="fade-in fade-in-down box"></div>
    <div class="fade-in fade-in-down box"></div>
  </div><!-- /.boxes -->

  <div class="modal-container">
    <button class="modal-btn modal-open" type="button" id="modalOpen">Open</button>
  </div><!-- /. modal-container -->

  <div id="modal" class="modal">
    <div class="modal-overlay js-modal-close">
      <div class="modal-container">
        <div class="modal-content">
          <h2 class="modal-content-ttl">モーダルのタイトルです</h2>
          <p class="modal-content-txt">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam dignissimos delectus quia ducimus quae architecto repellat expedita rem ipsam quisquam esse, cum atque, veritatis quos reprehenderit unde explicabo neque facere?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam dignissimos delectus quia ducimus quae architecto repellat expedita rem ipsam quisquam esse, cum atque, veritatis quos reprehenderit unde explicabo neque facere?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam dignissimos delectus quia ducimus quae architecto repellat expedita rem ipsam quisquam esse, cum atque, veritatis quos reprehenderit unde explicabo neque facere?</p>
        </div><!-- /.modal-content -->
        <button class="modal-btn modal-close js-modal-close">Close</button>
      </div><!-- /.modal-container -->
    </div><!-- /.modal-overlay -->
  </div><!-- /.modal -->

  <div class="gallery">
    <ul class="gallery-list">
      <li class="gallery-main gallery-main01 js-mainGallery is_active"></li>
      <li class="gallery-main gallery-main02 js-mainGallery"></li>
      <li class="gallery-main gallery-main03 js-mainGallery"></li>
    </ul><!-- gallery-list -->
      <div class="thumbnail">
        <ul class="thumbnail-list">
          <li class="thumbnail01 js-thumbnail is_selected"></li>
          <li class="thumbnail02 js-thumbnail"></li>
          <li class="thumbnail03 js-thumbnail"></li>
        </ul>
      </div>
  </div><!-- /.gallery -->

  </div><!-- /.contents -->

  <div class="for-scroll"></div><!-- /.for-scroll -->

  <div id="js-scroll-top" class="scroll-top">TOP</div>
              
            
!

CSS

              
                * {
  margin: 0;
  padding: 0;
}

body{
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic Pro N', Meiryo, sans-serif;
}

.loader {
  align-items: center;
  background: #fff;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
}

.loader::after {
  -webkit-animation: loader 0.5s linear infinite;
  animation: loader 0.5s linear infinite;
  border: 1px solid #ff9500;
  border-radius: 50%;
  border-right: 1px solid rgba(255, 149, 0, 0.2);
  border-top: 1px solid rgba(255, 149, 0, 0.2);
  content: "";
  height: 70px;
  width: 70px;
}

@keyframes loader {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.contents{
  max-width: 400px;
  padding: 80px 40px 0 40px;
  margin: 0 auto;
}

.header{
  background: #fff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  height: 60px;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 20;
}

.header-inner{
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 600px;
}

.nav{
  align-items: center;
  display: flex;
  height: 60px;
}

.nav-list{
  list-style: none;
  display: flex;
}

.nav-list li{
  margin-right: 20px;
}

.menus{
  margin-top: 80px;
}

.menu{
  align-items: center;
  display: flex;
  height: 400px;
  justify-content: center;
  margin: 50px auto 0;
  width: 400px;
}

.menus-ttl{
  color: #fff;
  font-weight: bold;
  font-size: 32px;
}

.menu1{
  background: gray;
}

.menu2{
  background: orange;
}

.menu3{
  background: green;
}

.accordion {
  margin: 80px auto 0;
}

.accordion__title {
  background-color: #000;
  border: 1px solid transparent;
  color: #fff;
  font-size: 1.25em;
  padding: .625em .625em .625em 2em;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.accordion__title::before, .accordion__title::after {
  content: '';
  display: block;
  background-color: #fff;
  position: absolute;
  top: 50%;
  width: 15px;
  height: 2px;
  right: 25px;
}

.accordion__title::after {
  transform: rotate(90deg);
  transition-duration: .3s;
}

.accordion__title:hover,
.accordion__title:active,
.accordion__title.is-active { 
  background-color: #00aaa7;
}

.accordion__title.is-active::before {
  opacity: 0;
}

.accordion__title.is-active::after {
  transform: rotate(0);
}

.accordion__content {
  border: 1px solid #00aaa7;
  padding: 0 1.5em;
  line-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition-duration: .3s;
}

.accordion__content.is-open {
  border-left: 1px solid #00aaa7;
  border-right: 1px solid #00aaa7;
  padding: .625em 1.5em;
  line-height: normal; /* numberに書き換える*/
  height: auto;
  opacity: 1;
}

.boxes{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px;
}

.box{
  width: calc(50% - 20px);
  height: 180px;
  background-color: orange;
  margin-top: 50px;
}


.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

.modal-container{
  margin: 120px auto;
}

.modal-btn {
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 10px 20px;
}

.modal-open{
  background: orangered;
}

.modal-close{
  background: darkblue;
}

.modal {
  display: none;
}

.modal.is_open {
  display: block;
  opacity: 0;
}

.modal.is_open .modal-overlay {
  /* animation: modalFadeIn 300ms ease-in; */
}

.modal-overlay {
  align-items: center;
  background: rgba(0, 0, 0, .75);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.modal-container {
  background: #fff;
  border-radius: 4px;
  max-height: 100%;
  max-width: 600px;
  padding: 30px 20px;
  overflow: scroll;
}

.modal-content-ttl{
  font-size: 2rem;
}

.modal-content-txt{
  line-height: 1.67;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

ul{
  list-style: none;
}

.gallery-main{
  display: none;
  width: 300px;
  height: 300px;
  margin-bottom: 20px;
}

.gallery-main.is_active{
  display: block;
}

.gallery-main01, .thumbnail01{
  background: #eaeaea;
}
.gallery-main02, .thumbnail02{
  background: #ffbf7f;
}
.gallery-main03, .thumbnail03{
  background: #ff7f7f;
}

.thumbnail-list{
  display: flex;
}

.thumbnail-list li{
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.thumbnail-list li:last-child{
  margin-right: 0;
}

.thumbnail-list li.is_selected{
  border: 2px solid #7fbfff;
}

.scroll-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 100;
  background-color: #ddd;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  line-height: 50px;
  text-align: center;
}

.scroll-top:hover {
  cursor: pointer;
  opacity: 0.7;
}

.scroll-top{
  opacity: 0;
  transition: opacity 350ms ease;
}


.accordion-single  {
  margin-top: 80px;
}

.accordion-single-title {
  border-top: 1px solid #EEE;
  padding: 20px;
  cursor: pointer;
  position: relative;
  font-size: 20px;
  margin: 0;
}

.accordion-single-title::after{
  content: "";
  position: absolute;
  right: 25px;
  top: 50%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #999;
  border-right: solid 2px #999;
  transform: translateY(-50%) rotate(135deg);
}

.accordion-single-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-in-out;
}

.accordion-single-content p {
  padding: 20px;
}

.accordion-single-item.is-open .accordion-single-content  {
  max-height: 150px;
}

.accordion-single-item.is-open .accordion-single-title::after  {
  transform: translateY(-50%) rotate(315deg);
}
              
            
!

JS

              
                // ローディングクルクル
const loader = document.getElementById('js-loader');
window.addEventListener('load', () => {
  // コンテンツ読み込み完了後の処理
  const ms = 400;
  loader.style.transition = 'opacity ' + ms + 'ms';
  
  setTimeout(function(){loader.style.opacity = 0;}, 1);
  setTimeout(function(){loader.style.display = "none";}, ms);
});

document.addEventListener("DOMContentLoaded",() => {
  // DOM利用可能になった場合の処理
  
  // スムーススクロール
  const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');
  for (let i = 0; i < smoothScrollTrigger.length; i++){
    smoothScrollTrigger[i].addEventListener('click', (e) => {
      e.preventDefault(); // デフォルトのイベントをキャンセル
      let href = smoothScrollTrigger[i].getAttribute('href');
      // console.log(smoothScrollTrigger[i]) 結果: <a href="#menu1">menu1</a>
      // console.log(href) 結果: #menu1
      let targetElement = document.getElementById(href.replace('#', ''));
      // console.log(targetElement) 結果: menu1

      const rect = targetElement.getBoundingClientRect().top;
      const offset = window.pageYOffset;
      const gap = 60; // 固定ヘッダー分の高さを引く
      const target = rect + offset - gap; // offsetTop()

      window.scrollTo({
        top: target,
        behavior: 'smooth',
      });
    });
  }

  // アコーディオン
  const title = document.querySelectorAll('.js-accordion-title');
  for (let i = 0; i < title.length; i ++){
    let titleEach = title[i];
    let content = titleEach.nextElementSibling;
    titleEach.addEventListener('click', () => {
      titleEach.classList.toggle('is-active');
      content.classList.toggle('is-open');
    });
  }

  const accSingle = document.querySelector('.js-acc-single');
  const items     = accSingle.querySelectorAll('.js-acc-item');
  const accSingleTriggers = accSingle.querySelectorAll('.js-acc-single-trigger');

  // 最初の要素を開いておく
  const firstChild = accSingle.firstElementChild;
  firstChild.classList.add('is-open');

  accSingleTriggers.forEach(trigger => trigger.addEventListener('click', toggleAccordion));

  function toggleAccordion() {
    const thisItem = this.parentNode;

    items.forEach(item => {
      if (thisItem == item) {
        thisItem.classList.toggle('is-open');
        return;
      }
      item.classList.remove('is-open');
    });
  }

  // fadeInアニメーション
  let fadeInTarget = document.querySelectorAll('.fade-in');
  window.addEventListener('scroll', () => {
    for (let i = 0; i < fadeInTarget.length; i++){
      const rect = fadeInTarget[i].getBoundingClientRect().top;
      const scroll = window.pageYOffset || document.documentElement.scrollTop;
      const offset = rect + scroll;
      const windowHeight = window.innerHeight; // 現在のブラウザの高さ
      if (scroll > offset - windowHeight + 150) {
        fadeInTarget[i].classList.add('scroll-in');
      }
    }
  });

  const modalBtn = document.getElementById('modalOpen');
  const modal = document.getElementById('modal');

  const ms = 400;
  modal.style.transition = 'opacity ' + ms + 'ms';

  modalBtn.addEventListener('click', () =>{
    setTimeout(function(){modal.classList.add('is_open')},1);
    setTimeout(function(){modal.style.opacity = 1}, 50);
  });
  
  let modalClose = document.querySelectorAll('.js-modal-close');
    for (let i =0; i < modalClose.length; i++){
    modalClose[i].addEventListener('click', () => {
      setTimeout(function(){modal.style.opacity = 0}, 1);
      setTimeout(function(){modal.classList.remove('is_open')}, 400)
    });
  }

  // https://qiita.com/makoto1219/items/9d5b71a792025703cdea

  // タブ切り替え
  const tabs = document.querySelectorAll('.js-thumbnail');
  const mainGallery = document.querySelectorAll('.js-mainGallery');
  for (let i = 0; i < tabs.length; i++){
    tabs[i].addEventListener('click', tabSwitch);
    }

  // タブをクリックすると実行する関数
  function tabSwitch(){
    const tabSelected = document.querySelectorAll('.is_selected');
    const galleryActive = document.querySelectorAll('.is_active');
    tabSelected[0].classList.remove('is_selected'); 
    this.classList.add('is_selected');
    galleryActive[0].classList.remove('is_active');
    const arraytab = Array.from(tabs); // nodeList, HTML Collectionを配列に変換
    const index = arraytab.indexOf(this); 
    mainGallery[index].classList.add('is_active');
  };
  
  // スクロールで出現
  const pageTopBtn = document.getElementById('js-scroll-top');
  window.addEventListener("scroll", () => {
    const y = window.pageYOffset;
    if ( y > 100){
      setTimeout(function(){
        pageTopBtn.style.opacity = 1;
      }, 100);
    } else {
      setTimeout(function(){
        pageTopBtn.style.opacity = 0;
      }, 100);
    }
  });
  
  // スクロールトップボタン
  scrollTop('js-scroll-top', 150);

  function scrollTop(elem,duration) {
    let target = document.getElementById(elem); // #js-button
    target.addEventListener('click', function() {
      let currentY = window.pageYOffset; // 現在のスクロール位置を取得
      let step = duration/currentY > 1 ? 10 : 100; // 三項演算子
      let timeStep = duration/currentY * step; // スクロールスピードの速さ調整
      let intervalID = setInterval(scrollUp, timeStep);
      // timeStepの間隔でscrollUpを繰り返す。
      // clearItervalのために返り値intervalIDを定義する。

      function scrollUp(){
        currentY = window.pageYOffset;
        if(currentY === 0) {
            clearInterval(intervalID); // ページ最上部に来たら終了
        } else {
            scrollBy( 0, -step ); // step分上へスクロール
        }
      }
    });
  }

  // スクロールトップモダンな書き方
  /* 
  const PageTopBtn = document.getElementById('js-scroll-top');
  PageTopBtn.addEventListener('click', () =>{
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
  */
});
              
            
!
999px

Console