Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by chester

  1. Hi, I would like to do the scroll effect. With the scroll down the first line of text would be animated (blur effect), and the last line would remove blur. And a new line with a blur would appear. And conversely. A new line would appear with an animation from left to right. Please, help Screen: My code html (twig) : <section class="menu-container"> <nav class="menu"> <img src="{{ template_url }}/lib/img/Judgement.png"> <ul id="menu"> {% for word in dictionary %} <li data-id="{{ loop.index }}" class="menu__item"><a href="{{ word.link }}">{{ word.title }}</a></li> {% endfor %} </ul> </nav> </section> css: #menu { height: 500px; overflow-y: scroll; } .menu-container { margin-top: 70px; margin-bottom: 100px; .menu { text-align: center; width: 100%; position: relative; &__item { margin-bottom: 20px; a { font-size: 60px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.42; letter-spacing: normal; text-align: center; color: #1b1725; mix-blend-mode: difference; } &:last-of-type { -webkit-filter: blur(6px); filter: blur(6px); } } } }