Parallax backgrounds with centered content

Developer
Mike
Size
3,207 Kb
Views
8,096
  1. Parallax backgrounds with centered content Previews
  2. Parallax backgrounds with centered content HTML Codes
  3. Parallax backgrounds with centered content CSS Codes
  4. Parallax backgrounds with centered content JS Codes

How do I make an parallax backgrounds with centered content?

Http://www.minimit.com/articles/lets-animate/parallax-backgrounds-with-centered-content. What is a parallax backgrounds with centered content? How do you make a parallax backgrounds with centered content? This script and codes were developed by Mike on 13 January 2023, Friday.

Parallax backgrounds with centered content Previews
IQ Test

Parallax backgrounds with centered content - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax backgrounds with centered content</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="not-fullscreen background parallax" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100"> <div class="content-a"> <div class="content-b"> Centered content </div> </div>
</div>
<div class="not-fullscreen background parallax" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_9857.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100"> <div class="content-a"> <div class="content-b"> <br>Content overflow<br>Content overflow <br>Content overflow<br>Content overflow <br><br> </div> </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>

Parallax backgrounds with centered content - Script Codes CSS Codes

/* background setup */
.background { background-repeat:no-repeat; /* custom background-position */ background-position:50% 50%; /* ie8- graceful degradation */ background-position:50% 50%\9 !important;
}
/* fullscreen setup */
html, body { /* give this to all tags from html to .fullscreen */ height:100%;
}
.content-a { width:100%; height:100%; overflow:hidden;
}
/* content centering styles */
.content-a { display:table;
}
.content-b {	display:table-cell; position:relative;	vertical-align:middle;	text-align:center;
}
/* visual styles */
body{ margin:0; font-family:sans-serif; font-size:28px; line-height:100px;	color:#ffffff; text-align:center;
}
section {	background:#9ed100;
}
.not-fullscreen { height:70%;
}

Parallax backgrounds with centered content - Script Codes JS Codes

/* detect touch */
if("ontouchstart" in window){ document.documentElement.className = document.documentElement.className + " touch";
}
if(!$("html").hasClass("touch")){ /* background fix */ $(".parallax").css("background-attachment", "fixed");
}
/* fix vertical when not overflow
call fullscreenFix() if .fullscreen content changes */
function fullscreenFix(){ var h = $('body').height(); // set .fullscreen height $(".content-b").each(function(i){ if($(this).innerHeight() > h){ $(this).closest(".fullscreen").addClass("overflow"); } });
}
$(window).resize(fullscreenFix);
fullscreenFix();
/* resize background images */
function backgroundResize(){ var windowH = $(window).height(); $(".background").each(function(i){ var path = $(this); // variables var contW = path.width(); var contH = path.height(); var imgW = path.attr("data-img-width"); var imgH = path.attr("data-img-height"); var ratio = imgW / imgH; // overflowing difference var diff = parseFloat(path.attr("data-diff")); diff = diff ? diff : 0; // remaining height to have fullscreen image only on parallax var remainingH = 0; if(path.hasClass("parallax") && !$("html").hasClass("touch")){ var maxH = contH > windowH ? contH : windowH; remainingH = windowH - contH; } // set img values depending on cont imgH = contH + remainingH + diff; imgW = imgH * ratio; // fix when too large if(contW > imgW){ imgW = contW; imgH = imgW / ratio; } // path.data("resized-imgW", imgW); path.data("resized-imgH", imgH); path.css("background-size", imgW + "px " + imgH + "px"); });
}
$(window).resize(backgroundResize);
$(window).focus(backgroundResize);
backgroundResize();
/* set parallax background-position */
function parallaxPosition(e){ var heightWindow = $(window).height(); var topWindow = $(window).scrollTop(); var bottomWindow = topWindow + heightWindow; var currentWindow = (topWindow + bottomWindow) / 2; $(".parallax").each(function(i){ var path = $(this); var height = path.height(); var top = path.offset().top; var bottom = top + height; // only when in range if(bottomWindow > top && topWindow < bottom){ var imgW = path.data("resized-imgW"); var imgH = path.data("resized-imgH"); // min when image touch top of window var min = 0; // max when image touch bottom of window var max = - imgH + heightWindow; // overflow changes parallax var overflowH = height < heightWindow ? imgH - height : imgH - heightWindow; // fix height on overflow top = top - overflowH; bottom = bottom + overflowH; // value with linear interpolation var value = min + (max - min) * (currentWindow - top) / (bottom - top); // set background-position var orizontalPosition = path.attr("data-oriz-pos"); orizontalPosition = orizontalPosition ? orizontalPosition : "50%"; $(this).css("background-position", orizontalPosition + " " + value + "px"); } });
}
if(!$("html").hasClass("touch")){ $(window).resize(parallaxPosition); //$(window).focus(parallaxPosition); $(window).scroll(parallaxPosition); parallaxPosition();
}
Parallax backgrounds with centered content - Script Codes
Parallax backgrounds with centered content - Script Codes
Home Page Home
Developer Mike
Username honchoman
Uploaded January 13, 2023
Rating 3
Size 3,207 Kb
Views 8,096
Do you need developer help for Parallax backgrounds with centered content?

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!

Mike (honchoman) Script Codes
Name
Free App Template for Bootstrap 3
Click Carousel
Jumbotron from Bootstrap Billboard
Tabbed pos mockup slider
Landing-Pages Panel
Social Media Button Design
A Pen by Mike
Animated Intro Section
Product page with fancy hover effect
Flat UI Button
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!