octocatstartv

3D Inset Parallax Effect

A Pen By Captain Anonymous

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>3D Inset Parallax Effect</h1>

<p class="inset">The following is an example of how you can create the illusion of a 3D inset block-level element (with parallax on scroll position) using some basic CSS and jQuery. To see the effect in action, just scroll the page.</p>

<h2>Example Form:</h2>

<form>
  <label>
    First Name:
    <input class="inset" type="text" placeholder="Enter First Name" />
  </label>
  <label>
    Last Name:
    <input class="inset" type="text" placeholder="Enter Last Name" />
  </label>
  <label>
    Email Address:
    <input class="inset" type="text" placeholder="Enter Email Address" />
  </label>
  <label>
    Address:
    <input class="inset" type="text" placeholder="Enter Address" />
  </label>
  <label>
    Phone Number:
    <input class="inset" type="text" placeholder="Enter Phone Number" />
  </label>
</form>

<h2>Example of Tall Elements:</h2>

<p class="inset">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in felis sem, eget scelerisque risus. Integer mollis lorem sit amet justo pellentesque cursus. Quisque et eleifend ligula. Quisque malesuada mauris quis enim lacinia ultricies. In nec odio euismod nulla elementum vehicula. Mauris purus quam, sodales vel mollis cursus, volutpat ac odio. Vestibulum in iaculis tellus. Fusce lectus eros, blandit a tristique sit amet, interdum id est. Integer varius ultrices tempor. Vestibulum volutpat ipsum a leo volutpat pretium. Proin vitae dolor urna, a dapibus nunc. Mauris volutpat ornare commodo. Nunc vehicula feugiat nisi ac vulputate. Ut ultrices sem non nulla vulputate imperdiet. Proin ipsum enim, molestie ac varius quis, mattis non felis. Phasellus orci eros, tristique eget iaculis eget, ornare non ligula. Pellentesque porta dui et turpis sodales ac sodales purus tristique. Aliquam dictum nibh magna. Aliquam hendrerit ultricies sem. Sed porttitor interdum faucibus. Nunc ac mollis lectus. Suspendisse dui urna, dictum sed condimentum nec, tristique sit amet ipsum. Ut non augue sit amet magna accumsan ullamcorper sit amet ut mauris. Pellentesque venenatis dapibus quam vitae egestas. Ut pulvinar, est sed sagittis porttitor, dui leo semper quam, vel euismod mauris purus eu lacus. Aliquam erat volutpat. Suspendisse justo urna, rhoncus eu bibendum eu, posuere eget ligula.</p>

<p class="inset">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in felis sem, eget scelerisque risus. Integer mollis lorem sit amet justo pellentesque cursus. Quisque et eleifend ligula. Quisque malesuada mauris quis enim lacinia ultricies. In nec odio euismod nulla elementum vehicula. Mauris purus quam, sodales vel mollis cursus, volutpat ac odio. Vestibulum in iaculis tellus. Fusce lectus eros, blandit a tristique sit amet, interdum id est. Integer varius ultrices tempor. Vestibulum volutpat ipsum a leo volutpat pretium. Proin vitae dolor urna, a dapibus nunc. Mauris volutpat ornare commodo. Nunc vehicula feugiat nisi ac vulputate. Ut ultrices sem non nulla vulputate imperdiet. Proin ipsum enim, molestie ac varius quis, mattis non felis. Phasellus orci eros, tristique eget iaculis eget, ornare non ligula. Pellentesque porta dui et turpis sodales ac sodales purus tristique. Aliquam dictum nibh magna. Aliquam hendrerit ultricies sem. Sed porttitor interdum faucibus. Nunc ac mollis lectus. Suspendisse dui urna, dictum sed condimentum nec, tristique sit amet ipsum. Ut non augue sit amet magna accumsan ullamcorper sit amet ut mauris. Pellentesque venenatis dapibus quam vitae egestas. Ut pulvinar, est sed sagittis porttitor, dui leo semper quam, vel euismod mauris purus eu lacus. Aliquam erat volutpat. Suspendisse justo urna, rhoncus eu bibendum eu, posuere eget ligula.</p>
            
          
!
            
              html {
  background: #f5f5f5;
}

body {
  width: 470px;
  margin: 20px auto;
	color: #333;
  font: 14px/1.6em Arial, Helvetica, sans-serif;
}

h1 {
  padding: 15px 30px 15px;
  color: #f5f5f5;
  font-size: 32px;
  text-align: center;
  background-color: #900;
}

label {
  display: block;
  margin-bottom: 1em;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}

input[type=text] {
  margin-bottom: 0.5em;
}

input[type=text]:focus {
  outline: none;
  background: #f9f9e9;
}

p {
  margin-bottom: 2em;
}

.inset {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.5em;
  background: #f9f9f9;
  border-style: solid;
  border-width: 30px;
  border-top-color: #e5e5e5;
  border-right-color: #eee;
  border-bottom-color: #e5e5e5;
  border-left-color: #eee;
}
            
          
!
            
              var origBorderWidth = parseInt($('.inset').css('border-top-width')),
    win = $(window),
    insets = $('.inset');

function set3D() {
  var windowHeight = win.height();
  
	insets.each(function() {
		var self = $(this),
			scrollHeight = win.scrollTop(),
			elementPosition = self.position(),
			positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100),
      positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);
		
		self.css({
			'border-top-width' : origBorderWidth - (origBorderWidth * (positionPercentTop / 100)) + 'px',
			'border-bottom-width' : origBorderWidth * (positionPercentBottom / 100) + 'px'
		});		
	});
};

set3D();
	
win.on('load scroll resize', function() {
	set3D();
});

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console