JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="container" class="container"> 
    <ul id="menu" class="menu"> 
        <li><a href="#" id="effect-a">概要</a></li> 
        <li><a href="#" id="effect-n">地名の由来</a></li> 
        <li><a href="#" id="effect-b">「東京」の範囲 </a></li> 
        <li><a href="#" id="effect-c">東京都区部</a></li> 
        <li><a href="#">全体をオーバーレイ</a></li> 
    </ul> 
    <div class="content"> 
        <p class="effect-a">2010年現在、国際連合の統計によると、東京は世界最大のメガシティと評価されており、世界最大の人口を有する都市圏を形成している。都市単位の経済規模(GDP)ではニューヨークを凌ぎ、世界最大である[2]。2010年8月、アメリカの外交専門誌フォーリンポリシーにより、ニューヨーク、ロンドンに次ぐ、世界第3位の世界都市に選ばれている。.</p> 
        <p class="effect-n">「東京」の地名は、1868年9月（明治元年（慶応4年）7月）に出された江戸ヲ称シテ東京ト為スノ詔書により、江戸の町奉行支配地域を管轄する東京府が設置されたことに始まる。<br /> 
            江戸は東京と称することになったが、読み方については根拠となるような法令が出たわけでもなかった。「とうきやう」（呉音）が正規に使われたが、明治20年代頃までは「とうけい」（漢音）も混在して用いられることも少なくなかった。日刊新聞の発達により人々が情報を共有する機会が広がり、第1期国定国語教科書で「東京」の振り仮名が「トーキョー」と表記され（棒引き仮名遣い）、混在はなくなった。一方、昭和初期までは「東亰」という表記も混用されていた。この「亰」という文字は「京」の俗字である。「亰」を使ったのは、中国の東京(Dongjing,ドンジン)との混同を防ぐためともいわれるが、後に同じ字となった。
        </p> 
        <p class="effect-b">「ここが東京」と明確に示せる場所はなく、非常に概略的で曖昧模糊としている。一般には西部の多摩地域は除かれ、後述の特別区、特に、いわゆる「都心」がそうだというのが共通認識である。</p> 
        <p class="effect-c">東京都区部は、東京都東部の23の特別区から構成される地域である。今日でも、統計などで東京都区部を「東京」という一つの都市として扱う場合もある。しかし1943年7月1日に東京市が廃止されて以降、東京都区部を一体として管轄する地方自治体は存在しない（区長がおり、区議会や区役所があるなど、個々の区が市と同等の扱いをされている）。また、東京都区部（総称：東京）は東京都の都庁所在地として認識される。ちなみに条例上の都庁所在地は「東京都新宿区西新宿二丁目」となっている（参考リンク）。</p> 
    </div> 
</div>

CSS

#menu li{float:left;margin:5px;}
#menu {padding:0 0 25px 25px;}
.content{clear:both;margin:50px;}
.content p{margin-bottom: 25px ;}

JavaScript

$(document).ready(function() {
    var $menu = $('#menu'),
        $container = $('#container'),
        $content = $container.find('.content');

    $content.find('p').addClass('effect e-fade').end().find('h1, h2, h3').addClass('effect e-fade e-color');

    var $elems = $(document).find('.effect'),
        OverlayEffect = (function() {
            var speed = 1000,
                eventOff = 'mouseenter',
                eventOn = 'mouseleave',
                colorOff = '#AAAAAA',

                init = function() {
                    $elems.each(function() {
                        var $el = $(this);
                        if ($el.hasClass('e-color')) $el.data('original-color', $el.css('color'));
                    });
                    initEventsHandler();
                },
                initEventsHandler = function() {
                    $menu.delegate('a', eventOff, function(e) {

                        var relation = $(this).attr('id');
                        animateElems('off', relation);
                        return false;
                    }).delegate('a', eventOn, function(e) {
                        var relation = $(this).attr('id');
                        animateElems('on', relation);
                        return false;
                    });
                },
                animateElems = function(dir, relation) {
                    var $e = $elems;
                    switch (dir) {
                    case 'on':
                        if (relation) $e = $elems.not('.' + relation);

                        $e.each(function() {
                            var $el = $(this),
                                color = $el.data('original-color'),
                                param = {};
                            if ($el.hasClass('e-color')) param.color = color;
                            if ($el.hasClass('e-fade')) param.opacity = 1;
                            $el.stop().animate(param, speed);
                        });
 ...