Snazzy fixed backgrounds
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 - 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); });
});
Developer | Mitch Pruitt |
Username | mitchdot |
Uploaded | November 08, 2022 |
Rating | 3.5 |
Size | 4,927 Kb |
Views | 52,624 |
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!
Name | Size |
A Pen by Mitch Pruitt | 2,416 Kb |
Sample project gallery | 2,987 Kb |
Image caption overlay | 2,107 Kb |
West Eastern Divan rollover | 2,963 Kb |
Sliding image | 2,497 Kb |
Zoomy image rollover | 2,764 Kb |
Snazzy fixed backgrounds | 4,927 Kb |
Simple responsive drop-down menu | 2,178 Kb |
Off-screen navigation | 5,220 Kb |
Segmented control | 3,759 Kb |
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!
Name | Username | Size |
Two column of responsive height | Fixie | 2,908 Kb |
Flip test | Madhes | 1,635 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
PNotify Demo | Adittmar | 1,731 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!