3D Curtain Template

3D Curtain Template


Creating the structure

The HTML structure is quite basic: for each block of content we created a element containing a and 2 The first .cd-half-block is always empty and is used to set the background-image, while the second contains the text paragraph.

Here’s the structure code:

creating the structure

Adding style

On small devices we didn’t implement the curtain effect so you’ll see a basic layout with the list of all the sections (you can give a look at the source code for more details).

On desktop devices (viewport width more than 1170px) we assigned a position: fixed and a top: 0 to the .cd-block elements in order to place them on top of the screen (this way they are one on top of the other). Since their containers – .cd-section – have a height: 100vh (and position: static) , they still occupy their own space (and that’s way we can scroll the page).

Besides, we assigned a translateX to each .cd-half-block element (translateX(-100%) and translateX(100%) alternatively to :first-of-type and :nth-of-type(2)) so that they are moved outside the viewport.

@media only screen and (min-width: 1170px) {
  .cd-section {
    height: 100vh;
  .cd-block {
    position: fixed;
    top: 0;
    left: 0;
  .cd-half-block {
    height: 100vh;
    width: 50%;
    position: absolute;
    top: 0;
  .cd-section:nth-of-type(even) .cd-half-block:first-of-type, 
  .cd-section:nth-of-type(odd) .cd-half-block:nth-of-type(2) {
    left: 0;
    transform: translateX(-100%);
  .cd-section:nth-of-type(odd) .cd-half-block:first-of-type, 
  .cd-section:nth-of-type(even) .cd-half-block:nth-of-type(2) {
    right: 0;
    transform: translateX(100%);


Events Handling

Each section animation is basically made up of two phases: in the first one, the 2 .cd-half-block elements are moved back in the viewport (the translateX value varies from 100%/-100% to 0); in the second one the .cd-block is scaled down and its opacity is reduced (to simulate a 3D movement).

To do so, we attached the triggerAnimation() function to the window scroll event. When the user scrolls, for each .cd-section element we evaluate – using the animateSection() function – the translateX and scale value according to the window scrollTop (and the section offset().top).

$(window).on('scroll', function(){
function triggerAnimation(){
	if(MQ == 'desktop') {
		//if on desktop screen - animate sections
	} // .....
function animateSection () {
		var actualBlock = $(this),
		//evaluate scale/translate values
		scaleBlock(actualBlock.find('.cd-block'), scale, opacity);
		translateBlock(actualBlock.find('.cd-half-block').eq(0), '-'+translate);
		translateBlock(actualBlock.find('.cd-half-block').eq(1), translate);	
function translateBlock(elem, value) {
		'transform': 'translateX(' + value + ')',
function scaleBlock(elem, value, opac) {
		'transform': 'scale(' + value + ')',
		'opacity': opac


Here is the link to see the demo:

Here is the link to download files:



About the article Author:

Hi, we are createIT!

As a passionate group of professionals with a love for Web and mobile technologies, we have been successfully serving our clients for the past 15 years. Through these years we have continuously striven to create the best IT solutions our clients seek.

Our 70+ developer team creates cutting-edge complex B2B and B2C web systems and apps as well as delivers top-notch direct outsourcing services.

We work in multiple frameworks but we hold special feelings and are experts in PHP (Symfony, OXID, WordPress), JavaScript (React, AngularJS), Flutter and Blockchain. We do enjoy working in the scalable cloud environment like AWS.

We are located in Warsaw, Poland, in the heart of Europe. Concentrated on delivering durable web solutions of high integrity, we do not always try to be the cheapest. However, thanks to our location you will be surprised how reasonable our prices are.

Fluent in English we offer services worldwide. Among others, in countries such as the U.S.A., Great Britain, Germany, Australia, Sweden and Poland.

Need help?

  • Looking for support from experienced programmers?

  • Need to fix a bug in the code?

  • Want to customize your webste/application?


Your email address will not be published.

createIT Contact