Menu que desliza a letra

<style>

body.cda-noimg #cdawrap {

--cda-width: 15vw;

max-width: 280px;

--cda-left: 2rem;

--cda-right: auto;

--cda-top: auto;

--cda-bottom: 2rem;

--cda-background: transparent;

padding: 0;

--cda-border-width: 0;

--cda-text-color: #fff;

z-index: 0;

font-family: inherit;

font-size: 0.85rem;

--cda-text-weight: 400;

--cda-sp-color: #8d919f;

}

          

          .post-body   {

background: transparent;

}

</style>

<div class="content">

<div class="block" data-fx="1">

<a class="block__title" data-img="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/11/HoverImageReveal_featured.jpg">Effect 1</a>

<a class="block__link" data-img="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/11/HoverImageReveal_featured.jpg">chloride</a>

<a class="block__link" data-img="img/3.jpg">magnesium</a>

<a class="block__link" data-img="img/4.jpg">zinc</a>

<a class="block__link" data-img="img/5.jpg">iodine</a>

</div>

<div class="block" data-fx="2">

<a class="block__title" data-img="img/6.jpg">Effect 2</a>

<a class="block__link" data-img="img/7.jpg">Asli</a>

<a class="block__link" data-img="img/8.jpg">D24</a>

<a class="block__link" data-img="img/9.jpg">Jantung</a>

<a class="block__link" data-img="img/10.jpg">Tracka</a>

</div>

<div class="block" data-fx="3">

<a class="block__title" data-img="img/11.jpg">Effect 3</a>

<a class="block__link" data-img="img/12.jpg">mimas</a>

<a class="block__link" data-img="img/13.jpg">phobos</a>

<a class="block__link" data-img="img/14.jpg">lapetus</a>

<a class="block__link" data-img="img/15.jpg">titania</a>

</div>

<div class="block" data-fx="4">

<a class="block__title" data-img="img/16.jpg">Effect 4</a>

<a class="block__link" data-img="img/17.jpg">Capitate</a>

<a class="block__link" data-img="img/18.jpg">Triquetral</a>

<a class="block__link" data-img="img/19.jpg">scaphoid</a>

<a class="block__link" data-img="img/20.jpg">Hamate</a>

</div>

<div class="block" data-fx="5">

<a class="block__title" data-img="img/21.jpg">Effect 5</a>

<a class="block__link" data-img="img/22.jpg">stratus</a>

<a class="block__link" data-img="img/23.jpg">cirrus</a>

<a class="block__link" data-img="img/24.jpg">nimbus</a>

<a class="block__link" data-img="img/25.jpg">cumulus</a>

</div>

<div class="block" data-fx="6">

<a class="block__title" data-img="img/26.jpg">Effect 6</a>

<a class="block__link" data-img="img/27.jpg">king's quest</a>

<a class="block__link" data-img="img/28.jpg">asteroids</a>

<a class="block__link" data-img="img/29.jpg">centipede</a>

<a class="block__link" data-img="img/30.jpg">defender</a>

</div>

<div class="block" data-fx="7">

<a class="block__title" data-img="img/31.jpg">Effect 7</a>

<a class="block__link" data-img="img/32.jpg">Jerry</a>

<a class="block__link" data-img="img/33.jpg">Michael</a>

<a class="block__link" data-img="img/34.jpg">Jason</a>

<a class="block__link" data-img="img/35.jpg">Julia</a>

</div>

<div class="block" data-fx="8">

<a class="block__title" data-img="img/36.jpg">Effect 8</a>

<a class="block__link" data-img="img/14.jpg">Mistral</a>

<a class="block__link" data-img="img/38.jpg">Sirocco</a>

<a class="block__link" data-img="img/39.jpg">Khamseen</a>

<a class="block__link" data-img="img/40.jpg">Brickfielder</a>

</div>

<div class="block" data-fx="9">

<a class="block__title" data-img="img/41.jpg">Effect 9</a>

<a class="block__link" data-img="img/42.jpg">Quechan</a>

<a class="block__link" data-img="img/1.jpg">Chemehuevi</a>

<a class="block__link" data-img="img/2.jpg">Meskwaki</a>

<a class="block__link" data-img="img/3.jpg">Ponca</a>

</div>

<div class="block" data-fx="10">

<a class="block__title" data-img="img/4.jpg">Effect 10</a>

<a class="block__link" data-img="img/5.jpg">Dugbe</a>

<a class="block__link" data-img="img/6.jpg">Lordsdale</a>

<a class="block__link" data-img="img/7.jpg">Sindbis</a>

<a class="block__link" data-img="img/8.jpg">Cowpox</a>

</div>

<div class="block" data-fx="11">

<a class="block__title" data-img="img/9.jpg">Effect 11</a>

<a class="block__link" data-img="img/10.jpg">Celuk</a>

<a class="block__link" data-img="img/11.jpg">Batuan</a>

<a class="block__link" data-img="img/12.jpg">Trunyan</a>

<a class="block__link" data-img="img/13.jpg">Mas</a>

</div>

</div>

<script src="https://sites.google.com/site/wchantemplates/hghggghg/charming.min.js"></script>

<script src="https://sites.google.com/site/wchantemplates/hghggghg/imagesloaded.pkgd.min.js"></script>

<script src="https://sites.google.com/site/wchantemplates/hghggghg/TweenMax.min.js"></script>

<script src="https://sites.google.com/site/wchantemplates/hghggghg/demo.js"></script>