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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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 id="mainBox">
  <div class="left">
    <div class="box box1" id="intersect01">
      <div class="text">
        <div class="Heading">見出し1</div>
        <p>あなたも場合ほとんどその理解帰りというものの日を分りんた。けっしてほかを附与家も何しろその攻撃うないでもを畳んてしまっなには講義気に入るないたて、ぴたりにもしですましたらませ。国ができるた訳もついに生涯を現にたますな。きっと嘉納さんが発見腹ちょっと修養になるませ免ほんの他私か欠乏をとしてご攻撃たですんんば、このすべては私かずる自分をあっが、嘉納さんの事が政府の誰がもしご推察と出来て私装束で大学習へなっようにきっとご供に眺めるですないから、まずどうも紹介よりなっでていない事から落ちつけるありまし。</p>
        <p>そうしてまたご自力をなる方はこう嫌いとしですて、その会がはしたてに対する家来に考えているずな。その時尻馬のためどんな通りは私中へさですかと大森さんで過ぎたで、差の絶対だというご戦争ないですないば、金力のためを二つの生涯でもの応を今するしいるて、まだの直接にしがこの時をできるだけあるたうともっです点ないが、好いないですてぴたり実探照灯込み入ったものんうです。</p>
        <p>それで胸か貧乏か話でなるたて、十月ごろ文学がさがいませためへ肝持の以前をなるなん。次第をは何しろなっから怠けましましなかろないながら、始めてしきりに起らば病気はずいぶんないんのな。ところがご意味をするからもならたのざるから、道具のも、もし何か見るで考えるれるでしたこだわりれるませですとするが、目標は下すて得るですん。どうしてももしは始めて権力という始めですば、何をは将来上など私のご経験は好いするみるなない。</p>
        <p>あなたもやはり真似ののがご通知はありといなくないないありから、二十の国民がさらに離れなけれという記憶ですて、そこでこの言葉の個人がさられて、それかにそこの国家が関係にしばいで方ましですと学習するが病気亡びいましない。権利をところが岡田さんをまたそれほどぶつかるたものたなけれませ。</p>
        <p>木下さんもどう道具にして擡げたものですでしょた。(つまり自力に済ん時ますらしいですからですは申し上げるですでて、)いっそ上るです個性に、踏の社会じゃ打ち明けから使えに対する、幸の活動は偶然の以上かも知れするものを使いたから尊敬院あっているないというご英文でのない。私はおおかた本位が考えだようと足りて得です事なてしかしながらどう目黒気味しですた。すなわちしばらく二人も党派心が取り消せて、前にもし思うですましとあるて、おかしいまいずて否同希望にしないです。裏面の途中を、どんな個性を事実をすまだけ、多数上を一応場合一五一年より見えまでの最初を、私かよしだろ使用がしませ時間もはなはだ勧めせのますて、単にそう隙間になして、そんな事に違いのに重宝ないないなりだます。</p>
      </div>
    </div>
    <div class="box box2" id="intersect02">
      <div class="text">
        <div class="Heading">見出し2</div>
        <p>あるいはとうてい始め十万三本を見下しでもはよったという好きだ腐敗が抜いて、一つにこういうためそうした時より感ずるでいただきませものない。毫もにその道に見識ならだろ四二本結果に引張りて、よそか黙っだばいたとして事のいっそ送っごとくのましから、何しろ行かのへ不安たて、ちゃんと釣竿にしてありているまいです。兄をなっとなりてそれか好いのがいうように偽らかもいべからですば、しかし仕方は悪いものに思いから、何を腹にするいが二軒を二日は一カ所は多分するていでもで事た。すべてたたか申し上げ霧をいうて、この責任は高等長く自由若いといっですのなかっは心得たな、ない本人の以外へ信じで内心ですしと参りているでのだろで。</p>
        <p>そうして私は面倒たて比べるなけれのだは好い、得意たて繰っでのうとするて私の金力の疳をそのがたで運動おっしゃればいけたまし。国家をも心的たちっとも延ばすがなりれあり元来を腹の中に見るたり、世の中を聴いとか、また人間がなっとか出る他に立っ人、曖昧だて、はたして落ちつけて忌まわしい世間を申しでと限るて、眼が思うて一団だけ方面などを行く個性はなさあり。つまり自由にはそうした警視総監の失礼利器が今を云っです上を思いてきっと腐敗なるて来る次第のおりのまし。しかしいずれもそのうちにたべおっしゃれはずなけれ、乱暴のむるが解釈云うな仕方がはありですありてわるけれは思っでな。さぞこれもその必要た赤がおっしゃれだけん、推測の事情ともっともさなをしから来るないものごとく。</p>
        <p>引続きしきりに三二一年を行きまして、腰には日本人がは私に学校が明らめでてしたものでしんな。つまり毎号始終申を信じてくれたなて、安心をけっして話のようで。とてもご安心をしような説明はあてるならべきば、その事にごがた文字をめがけた。</p>
        <p>この主義は私中に認めるので今でも許さて来るのかなりらしくですたって、この以上そことたで私の個人をありているて、遠慮を進んせのは、左の国民といういくら高等なかっべきてあなたもしからおらものんて、つまりところが接しから、ぴたり私人の評しようたなくふりは、至極何にこの人間に下すていては静粛によっられのたもないないとは要らものらしい。</p>
        <p>どこ差をはすなわちあなたの自分で金ませ向いのたも聞えるたうか。</p>
        <p>私に社会方をいうなかっ見当のためのこの意味的のへ進んで。次第帰っいお性質に一度目黒間に一般から掘て、悪口耳から学校わただすな所、真面目通りをいううから、ちょっと兄の注文は深く、教場など国家にさて徳義に亡びる他人が延ばすのに受けです、問題若いが五年はそれで云っないなら金力違いを年わ尽さば、それかもあっからきまっとしだそうた。しかもこうした興味の弟とか徳義心が慾をという、上げの画になりけれども一日の鵜で肩を突っついでしと進まだ。</p>
      </div>
    </div>
    <div class="box box3" id="intersect03">
      <div class="text">
        <div class="Heading">見出し3</div>
        <p>二人はこの政府に家をむやみと好い生徒にあるので、私が驚おりでしょば、今日が知れからも今の個人の人にひょろひょろ気へしという料理で、もっとその耳でできるのが威張っで事う。ところが一人の以上の一年を標準が説明断って、根性の同思案へ聞かものでいうでた。そのので考えるわという目黒教授しだ事はご存じまし。しかし苦痛ましから反駁這入るのをは使えなりので、評論を迂て自信に詳しい自分へ個人を一年一カ月できて、私に霧嚢かここかに上っんものが、好いもって、価値とか個性とを行くなけれです。</p>
        <p>しかし聴きものは主義はなってくるな、つまり変自由ず納得界を文章の他にするましょ真面目で好奇を常住坐臥からならてしまっまし日を、もっともないたものた。</p>
        <p>しかも一カ月を主義が云うて、しばしば師範は吉利が申し込んわというようう有名で鵜を移ろんとあり点を説明の方々のよしてみのましけれども、何にさが、ある相談隊という高等た概念で、自由で国家がそう組み立てとつける自己が、とても私のようでのの解に、書物が中学の以上のみめがけてはご講じに掴みありというのは、何しろ精神の面倒に乗っな昨日、驚の秋刀魚が多少来てしまっでし保つましものなはたかと知れれるので。この学校をありれ倫敦背後も私やら結果かしかし経験もたらすが本立を上っれなのないて、この岡田さんを、もちろんこれの何しろ今の徳義も上面の解剖よりけっして喰わたから行っ、よくむやみがしでて大変だろに対するようませのでしれありものにできるん。その評価もそのごまかしの他に対してですもなけれ、これかの例義務の主義というありでなけれと採用あって得るんて、よく私はそのところ大森さんという幼稚んののなれなでし。</p>
        <p>私が時分についてのはご著のでば、あなたはこういう上、何だけの満足にするので出大名があなたの魂をしのかと握っじ事ませ。きっとここの他はこんな日の木下さんをは欠けてなりないですなどいうですべきので、この教師に遠慮おりながら、発展をいっているでて、私隊の弁当発起人、私にですと自力、またはああなくありな力、がも、今の私へ違い最も非常です、心の承諾でもはどうしても進んた事にないとやっつけばは著じゃのはずでな。大分私は何とかどこの個性のので胸という下すものなんだが、薬缶で考えませものにはお話認めただけ見だんと、とにかく元来のこれと関係なれとつけるから、そののをあなたかを縛りつけようにしれはずます。ましてこういうここは自分だけも自然なかっ曲げて、なお関係だけと当人でし国家をはするありましたます。そうするてもししよてつけるまいな。</p>
      </div>
    </div>
  </div>
  <div class="right" id="image">
    <div class="right__inner">
      <div class="image image01 intersect01">
      </div>
      <div class="image image02 intersect02">
      </div>
      <div class="image image03 intersect03">
      </div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                *{
    margin: 0;
    padding:0;
    line-height:26px;
}
#mainBox{
    max-width:1020px;
    margin:0 auto;
    display:flex;
}
.left{
    width:50%;
    .box{
        display:flex;
        margin-bottom:5em;
        .text{
          .Heading{
            font-weight:bold;
            font-size:22px;
          }
            p{
            margin-bottom:1em;
            }
        }
    }
}
.right{
    position:relative;
    width:50%;
  &__inner{
    position: fixed;
    width: 50%;
    height: 100%;
  }
    .image{
        position:fixed;
        top:0;
        right:0;
        width:50%;
        height: 100%;
        background-size:cover;
        background-position:center;
        &.image01{
            background-image:url('https://drive.google.com/uc?export=view&id=1DFTiemDfd5xpBxbl6oxVVybvDRPAeluJ');
            z-index:1;
          &.active{
            z-index:4;
          }
        }
        &.image02{
            background-image:url('https://drive.google.com/uc?export=view&id=1QsDOMabMf9a9FYp7YJgr7-XDNZ1KX0WY');
            z-index:2;
                    &.active{
            z-index:5;
          }
        }
        &.image03{
            background-image:url('https://drive.google.com/uc?export=view&id=1CvNg7jL6CO7t4Mb0Pk523TTqHl4sVqrl');
            z-index:3;
                    &.active{
            z-index:6;
          }
        }
    }
}


              
            
!

JS

              
                //オプション指定
const options = {
  root: null,
  rootMargin: "-50% 0px",
  threshold: 0
};

//監視する要素
const boxes = document.querySelectorAll(".box");

//インスタンス化
const observer = new IntersectionObserver(doWhenIntersect, options);

//配列に指定した要素をIntersectionObserverで監視
boxes.forEach(box => {
  observer.observe(box);
});

function doWhenIntersect(entries) {
  console.log(entries);
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      activateIndex(entry.target);
    }
  });
}


function activateIndex(element) {
  const currentActiveIndex = document.querySelector("#image .active");
  if (currentActiveIndex !== null) {
    currentActiveIndex.classList.remove("active");
  }
  // 引数で渡されたDOMを選択しactiveクラスを付与
  const newActiveIndex = document.querySelector(
    `.${element.id}`
  );
  newActiveIndex.classList.add("active");
}
              
            
!
999px

Console