CreateIT
CreateIT

3D Curtain Template

For DesignersFor DevelopersWordpress

Creating the structure

The HTML structure is quite basic: for each block of content we created a element containing a div.cd-block and 2 div.cd-half-block. 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%);
  }
}

example1

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(){
	triggerAnimation();
});
 
function triggerAnimation(){
	if(MQ == 'desktop') {
		//if on desktop screen - animate sections
		window.requestAnimationFrame(animateSection);
	} // .....
}
 
function animateSection () {
	$('.cd-section').each(function(){
		var actualBlock = $(this),
			scale,
			translate,
			opacity;
 
		//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) {
	elem.css({
	 	//...
		'transform': 'translateX(' + value + ')',
	});
}
 
function scaleBlock(elem, value, opac) {
	elem.css({
	    //...
		'transform': 'scale(' + value + ')',
		'opacity': opac
	});
}

example2


Here is the link to see the demo:

http://codyhouse.co/demo/3d-curtain-template

Here is the link to download files:

Download


example3

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.

ADD COMMENT

Your email address will not be published. Required fields are marked *

createIT Contact