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.

Picture info chrome extension

You might come across a way to check the details about an image for its URL, ALT text, file size and dimension by opening up the developer tool and checking those details and to save an image to check its file size but now you can simply install this chrome extension and you can find all those by just hovering over the respective images.

The below details of an image are shown

  • shows the file url/path and a link to open it in a new window
  • shows original image width and height
  • shows actual image width and height used
  • shows ALT text of an image if available
  • shows actual file size of the image(doesn’t work for local image path)

picinfo screenshot

Add to chrome/Download: click here

How to use

To use the extension you just need to click on picinfo iconicon in chrome and the infobox appears. Now you can hover over any images and the respective details gets updated in the infobox. To close the picinfo dialog box you can either click on the “Close(X)” icon or click the extension picinfo active iconicon.

How to enable plugin for local files

If you wish for extension to work on “file:///” URLs you will need to allow extension access by checking “Allow access to file URLs” in the Extension Manager.


  • The extension can work only when you hover over the image, for example, some carousal/sliders will have arrow elements above image and you will not be able to hover directly on the image. I know that doesn’t mean much to someone who is not a web developer, but it’s a technical limitation of HTML and browsers.
  • Some information like image file size and date are returned from the server, this information depends on the server setup and can sometimes be wrong, which is especially true for the date field.
  • The image format that works are .jpg, .png, .gif, .svg(used within image tag) and it doesn’t show any info if SVG tag is used.

Free Moderate Level Newsletter

email device preview

A moderate level responsive newsletter with its focus on longer copy and image-free content areas, this is an ideal layout for B2B companies and their weekly or monthly round-ups of news, information and content. Also great for B2B lead nurture campaigns and B2C content-heavy newsletters.
It’s a tested copy across various email clients like gmail, yahoo, outlook and devices that you can just copy/download and use as per your needs.

It can be used for

  • To show new contents posted in a website
  • Alert trending and popular topics
  • To show snippet text along with the main contents and preview image


newsletter moderate

Source code

See the Pen Moderate Level Newsletter by (@webstuff) on CodePen.0

Need HTML file() Download it here

Simple welcome Newsletter

devices preview

Need help in creating a newsletter? with no worry on support in various email clients, then you are in the right place

Below is simple welcome email newsletter with responsive template that can be used for

  • Signup notification
  • Alert important message to user
  • Send offer codes / promotions
  • And much more based on your requirement

holding phone-preview

Source code

See the Pen Welcome newsletter -simple by (@webstuff) on CodePen.0

Just copy the code and include the necessary image/contents as per your need and you are good to send your email flyers.

Need HTML file() Download it here !

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.

Download subtitles using VLC

download subs using vlc

Need subtitles for your movies, tired of searching it in different websites to find the exact one which sync’s with your movies correctly. Now you can download all the subs directly using your favourite VLC player.
Below are the steps on how to search and download the subs with VLC player

Step 1: Play the movie in VLC which you need to download subs.

Step 2: Then select “view” option from menu and click “download subtitles”.
vlc player menu

Step 3: In the VLSub(download subtitle) dialog box you can either search by name or search by hash. Select the required file in the search result based on your movie and choose “Download selection”. The sub(.srt file) will be downloaded and loaded to your player.
vlsub download option

And that’s it sit back and enjoy your movie 🙂

Note: If you didn’t find any option as mentioned above, kindly update your VLC player to the latest version(click here).
You can also install an addon called “vlsub” separately to VLC and use the same steps to download but it’s easy to update your player as “vlsub” is pre-installed in newer versions.

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);