Snazzy fixed backgrounds

Developer
Mitch Pruitt
Size
4,927 Kb
Views
52,624
  1. Snazzy fixed backgrounds Previews
  2. Snazzy fixed backgrounds HTML Codes
  3. Snazzy fixed backgrounds CSS Codes
  4. Snazzy fixed backgrounds JS Codes

How do I make an snazzy fixed backgrounds?

Super simple technique for fixed background images that's quite nice-looking.. What is a snazzy fixed backgrounds? How do you make a snazzy fixed backgrounds? This script and codes were developed by Mitch Pruitt on 08 November 2022, Tuesday.

Snazzy fixed backgrounds Previews
IQ Test

Snazzy fixed backgrounds - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Snazzy fixed backgrounds</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ @import url(https://fonts.googleapis.com/css?family=Ropa+Sans);
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
div { width: 100%; height: 100%; font-family: 'Ropa Sans', sans-serif;
}
#nav { height: 80px; font-size: 36px; margin-top: 0; padding-left: 20px; padding-right: 20px; background-color: rgba(255, 255, 255, 0.75); position: fixed; z-index: 100; overflow: hidden;
}
#nav .sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 2;
}
#nav .brand { font-size: 40px; line-height: 80px; text-transform: uppercase; float: left; width: 50%; color: rgb(50, 50, 50);
}
#nav menu { float: left; width: 50%;
}
#nav ul { text-align: right;
}
#nav li { list-style-type: none; display: inline; margin-right: 10px; font-size: 20px; line-height: 80px; text-transform: lowercase;
}
a { color: rgb(50, 50, 50); text-decoration: none; transition: all .25s ease-in-out;
}
a:hover { color: rgb(100, 100, 100); border-bottom: 4px solid rgb(100, 100, 100);
}
.black { background-image: url(https://subtlepatterns.com/patterns/gray_sand.png); background-position: initial initial; background-repeat: initial initial; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);
}
.white { background-image: url(https://subtlepatterns.com/patterns/white_carbon.png); background-position: initial initial; background-repeat: initial initial; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);
}
.blank-one { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJUlEQVQIHWP8//8/AwwwMjL+Z0LmACUZwQIgGRAHJAki4ByQAAAg9BADCJJs7QAAAABJRU5ErkJggg==) repeat, url(https://1.bp.blogspot.com/_7xI3tGf5dMY/TUXjiEOE09I/AAAAAAAAAAs/2VgUkofo-ws/s1600/foggy+forest+3.jpg) right bottom no-repeat fixed; text-align: center;
}
.blank-two { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIHWNkYGD4DwSMQBoMGIEcGBtMM8F4jIyMYBkMFQDP0wr/yEGXyAAAAABJRU5ErkJggg==) repeat, url(http://www.chrishoneysett.com/data/photos/174_1trees_in_fog_16bit.jpg) center center no-repeat fixed; text-align: center;
}
.blank-three { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAS0lEQVQYGY2P0QoAIAgDW///z+aCwZSEejHWdUxExPIDIKOAZ7xvDwRxel5AQQxp7PA1OiRTh9nl2UkfJGFzZeMk/AXSULYelflwAPHTKwUaIRJKAAAAAElFTkSuQmCC) repeat, url(http://farm8.staticflickr.com/7191/6802641014_66dc3ddaa1_o.jpg) center center no-repeat fixed; text-align: center;
}
.text { width: 700px; margin: auto; line-height: 30px;
}
h2 { font-size: 80px; text-transform: uppercase; color: rgb(255, 255, 255); text-shadow: 1px 1px 2px #000; line-height: 100vh;
}
p { font-size: 24px; padding: 60px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="nav"> <div class="brand"><h1>a thing</h1></div> <div class="menu"> <ul> <li><a href="#blank-one" class="scroll">One</a></li> <li><a href="#blank-two" class="scroll">Two</a></li> <li><a href="#blank-three" class="scroll">Three</a></li> </ul> </div>
</div>
<div id="blank-one" class="blank-one"> <h2>Magna Sit</h2>
</div>
<div class="white"> <div class="text"><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p></div>
</div>
<div id="blank-two" class="blank-two"> <h2>Cras Tellus</h2>
</div>
<div class="black"> <div class="text"><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p></div>
</div>
<div id="blank-three" class="blank-three"> <h2>Mattis Nibh</h2>
</div>
<div class="white"> <div class="text"><p>Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Snazzy fixed backgrounds - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Ropa+Sans);
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
div { width: 100%; height: 100%; font-family: 'Ropa Sans', sans-serif;
}
#nav { height: 80px; font-size: 36px; margin-top: 0; padding-left: 20px; padding-right: 20px; background-color: rgba(255, 255, 255, 0.75); position: fixed; z-index: 100; overflow: hidden;
}
#nav .sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 2;
}
#nav .brand { font-size: 40px; line-height: 80px; text-transform: uppercase; float: left; width: 50%; color: rgb(50, 50, 50);
}
#nav menu { float: left; width: 50%;
}
#nav ul { text-align: right;
}
#nav li { list-style-type: none; display: inline; margin-right: 10px; font-size: 20px; line-height: 80px; text-transform: lowercase;
}
a { color: rgb(50, 50, 50); text-decoration: none; transition: all .25s ease-in-out;
}
a:hover { color: rgb(100, 100, 100); border-bottom: 4px solid rgb(100, 100, 100);
}
.black { background-image: url(https://subtlepatterns.com/patterns/gray_sand.png); background-position: initial initial; background-repeat: initial initial; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);
}
.white { background-image: url(https://subtlepatterns.com/patterns/white_carbon.png); background-position: initial initial; background-repeat: initial initial; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);
}
.blank-one { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJUlEQVQIHWP8//8/AwwwMjL+Z0LmACUZwQIgGRAHJAki4ByQAAAg9BADCJJs7QAAAABJRU5ErkJggg==) repeat, url(https://1.bp.blogspot.com/_7xI3tGf5dMY/TUXjiEOE09I/AAAAAAAAAAs/2VgUkofo-ws/s1600/foggy+forest+3.jpg) right bottom no-repeat fixed; text-align: center;
}
.blank-two { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIHWNkYGD4DwSMQBoMGIEcGBtMM8F4jIyMYBkMFQDP0wr/yEGXyAAAAABJRU5ErkJggg==) repeat, url(http://www.chrishoneysett.com/data/photos/174_1trees_in_fog_16bit.jpg) center center no-repeat fixed; text-align: center;
}
.blank-three { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAS0lEQVQYGY2P0QoAIAgDW///z+aCwZSEejHWdUxExPIDIKOAZ7xvDwRxel5AQQxp7PA1OiRTh9nl2UkfJGFzZeMk/AXSULYelflwAPHTKwUaIRJKAAAAAElFTkSuQmCC) repeat, url(http://farm8.staticflickr.com/7191/6802641014_66dc3ddaa1_o.jpg) center center no-repeat fixed; text-align: center;
}
.text { width: 700px; margin: auto; line-height: 30px;
}
h2 { font-size: 80px; text-transform: uppercase; color: rgb(255, 255, 255); text-shadow: 1px 1px 2px #000; line-height: 100vh;
}
p { font-size: 24px; padding: 60px;
}

Snazzy fixed backgrounds - Script Codes JS Codes

jQuery.easing.def = "easeInOutCubic";
$(document).ready(function($) {	$(".scroll").click(function(event){	event.preventDefault();	$('html, body').animate({scrollTop:$(this.hash).offset().top}, 1000);	});
});
Snazzy fixed backgrounds - Script Codes
Snazzy fixed backgrounds - Script Codes
Home Page Home
Developer Mitch Pruitt
Username mitchdot
Uploaded November 08, 2022
Rating 3.5
Size 4,927 Kb
Views 52,624
Do you need developer help for Snazzy fixed backgrounds?

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!

Mitch Pruitt (mitchdot) Script Codes
Name
Flexbox-based responsive menu
Off-screen navigation
Threadless-style rollover menu
Flexbox quote box
Sliding image
The Iron Triangle
Animated camera focus ring
Underlined form fields
Image header overlay
West Eastern Divan rollover
Create amazing art & images 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!