parallax scrolling using css

parallax featured image

What is parallax scrolling

Parallax scrolling, also known as “Asymmetrical scrolling”, is a technique in computer graphics and web design, where background images is moved at a different speed than the foreground content while scrolling, creating an illusion of depth in a 2D scene and adding to the immersion.

Below you can find the CSS and HTML on how to create parallax effect

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: lato;
	font-size: 16px;
	line-height: 24px;
.wrap {
	max-width: 980px;
	margin: 0 auto;
.noncont {
	padding: 50px 30px;
	font-size: 22px;
.noncont h3 {
	text-align: center;
	font-size: 30px;
	margin-bottom: 20px;
html {
	height: 100%;
.parallax {
	/* The image used */
	/* Set a specific height */
	min-height: 100%;
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
.content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 30px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
.bot {
	bottom: 20px;
	top: auto;
.bgimg1 {
	background-image: url("cycle.jpg");
.bgimg2 {
	background-image: url("cycle2.jpg");
	min-height: 500px;
@keyframes transdown {
	0% {
		top: -5px;
	100% {
		top: 5px;
.dwnar {
	animation: transdown 800ms infinite alternate;
	position: relative;
	margin-top: -10px;


	<div class="parallax bgimg1">
		<div class="content bot">SCROLL DOWN <i class="fa fa-angle-double-down dwnar" aria-hidden="true"></i>
	<div class="noncont wrap">
		<h3>What is parallax effect in web design?</h3>
		<p>One fairly recent web design trend is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth.</p>
	<div class="parallax bgimg2">
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam odio, architecto ducimus pariatur, vel eaque temporibus consequuntur placeat voluptas eius repudiandae dicta? Optio harum, laborum velit eligendi necessitatibus accusamus sed.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis nisi fugit, veniam aliquam vero ab commodi, inventore molestias illum praesentium in est reiciendis impedit odio ut quaerat eligendi facilis ipsa.</p>
	<div class="noncont wrap">
		<h3>What is parallax effect in web design?</h3>
		<p>The parallax effect has been around for years in classic video games, but it became a trend in the web design world. This cool effect is now commonly seen as part of the scrolling feature of a web page. It uses multiple backgrounds which seem to move at different speeds to create a sensation of depth (creating a faux-3D effect) and an interesting browsing experience. The term is derived from the Greek "parallaxis", meaning "alteration". Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax scrolling can be used to determine distances.</p>

Demo page: click here

Some mobile devices might have problem with “background-attachment: fixed”. However, you can use media queries to turn off the parallax effect for mobile devices by overriding with “background-attachment: scroll:.
You can adjust the height value of absolute positioned content in mobile devices using media queries.

Float label pattern

label animation

Forms are one of the most important parts of the webpage that needs to be clean and have great user experience at the same time.

In an effort to make forms look nicer visually, designers and developers have sacrificed usability by replacing field labels with placeholders.

Luckily, now we can have the concept of placeholder and the label for user experience by floating the label when the user starts typing( Thanks to Matt D Smith).

Approach for float label

The way this concept(float label/google material design form) has been handled is that the CSS “focus” property has been used to move the label up when it’s been focused, but with JavaScript the label stays top if the user inputs some data.
You can do the float label only via CSS or with the help of little JavaScript. Below demo uses JS(jquery).

The reason behind using script for checking whether data is there or not is to make it work even in older browser including IE lower versions and also if you need CSS alone, the “required” attribute has to been given to the input field which in turn the error pop-up shows if user enter wrong data and it messes with your custom error style if used any. If you like to have the default error pop-up you can go with the CSS only way which I will be mentioning after the JS way.


See the Pen Float Label Pattern by (@webstuff) on CodePen.0

CSS only
To use CSS only without the help of Javascript you need to use “valid” css property

.adiptxt:valid + label{
font-size: 12px;
top: 12px;
color: #6e827b;

Note:The input tag must have “required” attribute so that “valid” property works.

Chrome browser autocomplete fix

You will encounter this overlap issue if you don’t wish to off the autocomplete for the input tag(eg. login form).
chrome autocomplete issue
In that case you can add the below script along with the script mentioned above in the demo to overcome the issue by checking the value onload and also onchange of the other elements.

 $(document).ready(function() {
     $("input").change(function() {
         $('.check').each(function() {
             if ($(this).val() != "") {
             } else {
     $('.check').each(function() {
         if ($(this).val() != '') {
         } else {


Note: If you load the form via ajax, you need to make the script trigger after the form loads.

Custom select dropdown

custom select dropdown

Ever wondered how to hide the arrow in the select dropdown or style the dropdown completely based on your theme.
It’s possible with some CSS code(mentioned below).

If you wish to support only chrome, firefox, safari, IE10+ browsers you can simply hide the default arrow in the select dropdown by using below code.


-webkit-appearance: none;
-moz-appearance: none;
select::-ms-expand {display: none;}/*works in IE10+*/

Common support to all browsers(including lower versions of IE)
The idea deals by using a span/div tag and styling it as per our theme to look like a dropdown and use a default select dropdown and visually hiding it behind the span by using CSS “opacity” property. By using this “opacity” property, we hide the select dropdown but however clicking that position it reveals the options irrespective of the opacity property, so we are using this as an advantage. By selecting a particular option we get that value/text of that selected option via script and show it in the span through small piece of script.


See the Pen custom select dropdown by (@webstuff) on CodePen.0

Arrow using css

arrow using css

Why use image, when you can create arrow with/without borders by using CSS
Below is the CSS code that helps you to create a triangle arrow


.arw-up {
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid black;

  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top:20px solid #f00;
.arw-left {
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;  
  border-right:10px solid blue; 
  border-top:20px solid transparent;
  border-bottom:20px solid transparent;
  border-left: 20px solid #FCD000;

You can use any block level elements or even psuedo elements like before and after to create the arrows; it’s up to you.


See the Pen CSS arrow by (@webstuff) on CodePen.0

Some tweaks:
There are some tweaks where you can use a single arrow &  CSS rotate property to create the different directions of the arrow by just changing the degree in rotate property

-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
/*change the degree according to your need*/

Arrow with borders:
Even you can add border around it by using pseudo elements like before/after and by absolute positioning around the arrow.

/*arrow with borders*/
.brd:before{content: '';
display: block;
position: absolute;
top: -34px;
width: 29px;
height: 28px; 
background: transaprent;
border-right:1px solid #000;
border-bottom:1px solid #000;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);