tinloof 사이트 참고 디자인

첫화면

index.html

<div class="container">
 <ul>
  <li><span>We make fast</span></li>
  <li><span>and stunning</span></li>
  <li><span>websites</span></li>
 </ul>
</div>

css

.container ul{
    width:100%;
    overflow: hidden;
    margin:0 0 0 2rem;
}

.container ul li{
    overflow: hidden;
    display: flex;
    height:201px;
}

.container ul li:nth-child(2) span{
    transition-delay: 0.3s;
}

.container ul li:nth-child(3) span{
    transition-delay: 0.9s;
}

.container ul li span{
    font-size: 16rem;
    display: block;
    line-height: 85%;
    letter-spacing: -8px;
    transform: translateY(200%);
    font-size: 12rem;
    transition: 2s ease;
}

.container ul li span.active{
    transform: translateY(0%);
}

app.js

let listItems = [...document.querySelectorAll('.container ul li')];

let options = {
    rootMargin: '20%',
    threshold: 0.0
}

let observer = new IntersectionObserver(showItem, options);

function showItem(entries) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            if (entries.length > 1) {
                let letters = [...entry.target.querySelectorAll('span')]
                letters.forEach((letter, idx) => {
                    setTimeout(() => {
                        letter.classList.add('active');
                    }, idx * 70)
                })
            }else{
                entry.target.classList.add('active');
            }
        }
    })
}

listItems.forEach(item => {
    let newString = '';
    let itemText = item.children[0].innerHTML.split('');
    itemText.map(letter => (newString += letter == ' ' ? `<span class="gap"></span>` : `<span>${letter}</span>`))
    item.innerHTML = newString;
    observer.observe(item);
})

두번째

index.html

<div class="feature">
   <h1>
     Featured work
   </h1>
</div>

css

.feature{
    margin:35rem 3rem 0 3rem;
    border-bottom: 1px solid #000;
}

.feature h1{
    font-size: 6rem;
    font-weight:400;
    display: block;
    transform: translateX(-50%);
    transition: 0.8s;
}

.feature h1.active{
    transform: translateX(0%);
}

app.js

let featureItem = document.querySelector('.feature h1');

observer.observe(featureItem);

다 이런 식으로 해줬다.