Parallax with only css

Developer
Tommy
Size
3,096 Kb
Views
10,120
  1. Parallax with only css Previews
  2. Parallax with only css HTML Codes
  3. Parallax with only css CSS Codes

How do I make an parallax with only css?

What is a parallax with only css? How do you make a parallax with only css? This script and codes were developed by Tommy on 30 December 2022, Friday.

Parallax with only css Previews
IQ Test

Parallax with only css - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax with only css</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { margin: 0;
}
article h2, article h1 { font-size: 3.6em; line-height: 1em; margin: 25px 0;
}
.content { border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); color: #333; height: 1050px; margin: 0 auto; padding: 0; position: relative; width: 100%;
}
#first { background: url(../img/bg-parallaxsample01.jpg) 50% 0 no-repeat fixed;
}
#second { background: url(../img/bg-parallaxsample02.jpg) 50% 0 no-repeat fixed black;
}
#third { background: url(../img/bg-parallaxsample03.jpg) 50% 0 no-repeat fixed black;
}
#theend { background: url(../img/bg-parallaxsample04.jpg) 50% 0 no-repeat fixed #e6cda4;
}
/* section first */
.logo { color: rgba(255, 255, 255, 0.9); font-size: 4em; font-weight: bold; margin: 0; position: fixed; top: 100px; left: 50px; text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
#first article { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(150, 150, 150, 0.1); box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4); padding: 18px; position: absolute; top: 200px; width: 800px;
}
/* section second */
#second { padding: 80px 0;
}
#second article { background: rgba(51, 51, 51, 0.9); border: 1px solid rgba(150, 150, 150, 0.1); box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4); color: white; margin-left: 100px; padding: 10px 20px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); line-height: 1.5em; width: 445px;
}
/* section third */
#third article { background: rgba(51, 51, 51, 0.9); border: 1px solid rgba(150, 150, 150, 0.1); box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); color: white; padding: 10px 20px; margin: 100px 0 0 60%; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); line-height: 1.5em; color: white; position: absolute; top: 0;
}
#third img { border: 8px solid white; box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4); height: 350px; width: 560px; position: absolute; left: 30px; top: 600px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -ms-transform: rotate(-8deg); -o-transform: rotate(-8deg); transform: rotate(-8deg);
}
/* section the end */
#theend h2 { color: white; font-size: 4em; left: 50%; margin-left: -150px; position: absolute; text-shadow: 0 0 16px rgba(140, 123, 96, 0.8); top: 180px; width: 300px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <html>
<head>
<meta charset="UTF-8">
<title>Only CSS | Learning Parallax effect</title>
<link rel="stylesheet" href="css/parallax.css">
</head>
<body> <section id="first" class="content"> <p class="logo">jQUery x HTML5 x CSS3</p> <article> <h1>Parallax sample.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p> </article> </section> <section id="second" class="content"> <article> <h2 id="toc-only-css">Only CSS.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p> </article> </section> <section id="third" class="content"> <article> <h2 id="toc-without-jquery">Without jQuery</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p> </article> <img src="images/guernica.jpg" /> </section> <section id="theend" class="content"> <h2 id="toc-the-end">The End.</h2> </section>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Parallax with only css - Script Codes CSS Codes

body { margin: 0;
}
article h2, article h1 { font-size: 3.6em; line-height: 1em; margin: 25px 0;
}
.content { border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); color: #333; height: 1050px; margin: 0 auto; padding: 0; position: relative; width: 100%;
}
#first { background: url(../img/bg-parallaxsample01.jpg) 50% 0 no-repeat fixed;
}
#second { background: url(../img/bg-parallaxsample02.jpg) 50% 0 no-repeat fixed black;
}
#third { background: url(../img/bg-parallaxsample03.jpg) 50% 0 no-repeat fixed black;
}
#theend { background: url(../img/bg-parallaxsample04.jpg) 50% 0 no-repeat fixed #e6cda4;
}
/* section first */
.logo { color: rgba(255, 255, 255, 0.9); font-size: 4em; font-weight: bold; margin: 0; position: fixed; top: 100px; left: 50px; text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
#first article { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(150, 150, 150, 0.1); box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4); padding: 18px; position: absolute; top: 200px; width: 800px;
}
/* section second */
#second { padding: 80px 0;
}
#second article { background: rgba(51, 51, 51, 0.9); border: 1px solid rgba(150, 150, 150, 0.1); box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4); color: white; margin-left: 100px; padding: 10px 20px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); line-height: 1.5em; width: 445px;
}
/* section third */
#third article { background: rgba(51, 51, 51, 0.9); border: 1px solid rgba(150, 150, 150, 0.1); box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); color: white; padding: 10px 20px; margin: 100px 0 0 60%; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); line-height: 1.5em; color: white; position: absolute; top: 0;
}
#third img { border: 8px solid white; box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4); height: 350px; width: 560px; position: absolute; left: 30px; top: 600px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -ms-transform: rotate(-8deg); -o-transform: rotate(-8deg); transform: rotate(-8deg);
}
/* section the end */
#theend h2 { color: white; font-size: 4em; left: 50%; margin-left: -150px; position: absolute; text-shadow: 0 0 16px rgba(140, 123, 96, 0.8); top: 180px; width: 300px;
}
Parallax with only css - Script Codes
Parallax with only css - Script Codes
Home Page Home
Developer Tommy
Username hoehoe
Uploaded December 30, 2022
Rating 3
Size 3,096 Kb
Views 10,120
Do you need developer help for Parallax with only css?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tommy (hoehoe) Script Codes
Name
Customise Scroll Bar with css
Web SQL
A Pen by Tommy
Flex box
Get Form value with jQuery
Custom checbox with css
Vue with axios sample
Check box in Bootstrap Drop down list
Materialize css
Timeline with CSS
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!