Fixed banners and parallax backgrounds

Developer
Aurer
Size
3,526 Kb
Views
38,456
  1. Fixed banners and parallax backgrounds Previews
  2. Fixed banners and parallax backgrounds HTML Codes
  3. Fixed banners and parallax backgrounds CSS Codes
  4. Fixed banners and parallax backgrounds JS Codes

How do I make an fixed banners and parallax backgrounds?

What is a fixed banners and parallax backgrounds? How do you make a fixed banners and parallax backgrounds? This script and codes were developed by Aurer on 03 August 2022, Wednesday.

Fixed banners and parallax backgrounds Previews
IQ Test

Fixed banners and parallax backgrounds - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fixed banners and parallax backgrounds</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; font-family: "Gill sans", sans-serif;
}
.col { max-width: 300px; margin: auto;
}
.mast { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAN79+797+zszIgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQCxZSc/VMDIVQAAAABJRU5ErkJggg==) #eee; background: url(http://31.media.tumblr.com/78624123599fc7fcb256840736f6987b/tumblr_n4vbdf0dgm1st5lhmo1_1280.jpg); padding: 40px 0;
}
.off-top .mast { position: fixed; top: 0; width: 100%; padding: 10px 0;
}
.off-top .mast img { height: 50px;
}
.off-top .content { margin-top: 150px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="mast"> <div class="col"> <img src="http://placehold.it/80x80/333/fff/&text=A" alt="" /> </div>
</div>
<div class="content"> <div class="col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fixed banners and parallax backgrounds - Script Codes CSS Codes

body { margin: 0; font-family: "Gill sans", sans-serif;
}
.col { max-width: 300px; margin: auto;
}
.mast { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAN79+797+zszIgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQCxZSc/VMDIVQAAAABJRU5ErkJggg==) #eee; background: url(http://31.media.tumblr.com/78624123599fc7fcb256840736f6987b/tumblr_n4vbdf0dgm1st5lhmo1_1280.jpg); padding: 40px 0;
}
.off-top .mast { position: fixed; top: 0; width: 100%; padding: 10px 0;
}
.off-top .mast img { height: 50px;
}
.off-top .content { margin-top: 150px;
}

Fixed banners and parallax backgrounds - Script Codes JS Codes

$(function(){ var docheight = $(document).height(); var winheight = $(window).height(); var mast = $('.mast'); var bgp = parseInt(mast.css('backgroundPositionY')); var mast = $('.mast'); $(window).scroll(function(){ var padding = parseInt(mast.css('paddingTop')); // var scrollpercent = (this.scrollY/(docheight-winheight))*100; if(this.scrollY < 60){ $('body').removeClass('off-top'); bgp = this.scrollY / 2; } else { $('body').addClass('off-top'); bgp = -this.scrollY / 2; } mast.css({backgroundPositionY: Math.ceil(bgp)}); });
});
Fixed banners and parallax backgrounds - Script Codes
Fixed banners and parallax backgrounds - Script Codes
Home Page Home
Developer Aurer
Username aurer
Uploaded August 03, 2022
Rating 3
Size 3,526 Kb
Views 38,456
Do you need developer help for Fixed banners and parallax 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!

Aurer (aurer) Script Codes
Name
Homepage layout
Super Clock
A Pen by Aurer
Vue form theme
Webkit CSS Scrollbars
Tomcat chrome extension UI
Learning canvas drawing
Squished forms mockup
Update manager experimental UI
Letter fountain
Create amazing sales emails 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!