1. Tutorials
  2. CSS
  3. Twist Text on Scroll

Twist Text on Scroll

In this tutorial, you will learn how to create a twisting text on scroll using CSS and JavaScript. Watch the video below for a detailed tutorial.

HTML

<body>
    <div class="container">
        <p id="p1">Lorem</p>
        <p id="p2">Ipsum</p>
        <p id="p3">Dolor</p>
        <p id="p4">Sit</p>
        <p id="p5">Amet</p>
    </div>

    <script>
        window.onscroll = function() {
            scrollTwist();
        }

        function scrollTwist() {
            var p1 = document.getElementById('p1');
            var p2 = document.getElementById('p2');
            var p3 = document.getElementById('p3');
            var p4 = document.getElementById('p4');
            var p5 = document.getElementById('p5');

            var rotateX = window.scrollY * 0.1;
            var skewY = window.scrollY/5 * 0;

            if(window.scrollY > 10) {
                p1.style.transform = 'rotateY(' + window.scrollY/5 + 'deg) rotateX(' + rotateX + 'deg) skew(0deg, ' + skewY + 'deg)';
                p1.style.opacity = 1;
            } else {
                p1.style.opacity = 0;
            }

            if(window.scrollY > 50) {
                p2.style.transform = 'rotateY(' + window.scrollY/6 + 'deg) rotateX(' + rotateX + 'deg) skew(0deg, ' + skewY + 'deg)';
                p2.style.opacity = 1;
            } else {
                p2.style.opacity = 0;
            }

            if(window.scrollY > 90) {
                p3.style.transform = 'rotateY(' + window.scrollY/7 + 'deg) rotateX(' + rotateX + 'deg) skew(0deg, ' + skewY + 'deg)';
                p3.style.opacity = 1;
            } else {
                p3.style.opacity = 0;
            }

            if(window.scrollY > 130) {
                p4.style.transform = 'rotateY(' + window.scrollY/8 + 'deg) rotateX(' + rotateX + 'deg) skew(0deg, ' + skewY + 'deg)';
                p4.style.opacity = 1;
            } else {
                p4.style.opacity = 0;
            }

            if(window.scrollY > 150) {
                p5.style.transform = 'rotateY(' + window.scrollY/9 + 'deg) rotateX(' + rotateX + 'deg) skew(0deg, ' + skewY + 'deg)';
                p5.style.opacity = 1;
            } else {
                p5.style.opacity = 0;
            }
        }
    </script>
</body>

CSS

body {
	background: #2e3537;
	margin: 0;
	font-family: 'Arial', sans-serif;
}

.container {
	margin-top: 40vh;
	margin-bottom: 100vh;
}

.container p {
	color: white;
	font-size: 150px;
	font-weight: 800;
	line-height: 120px;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	transition: opacity 1s;
	opacity: 0;
}