"bearallax"

Developer
Brandon Kennedy
Size
3,246 Kb
Views
22,264
  1. "bearallax" Previews
  2. "bearallax" HTML Codes
  3. "bearallax" CSS Codes
  4. "bearallax" JS Codes

How do I make an "bearallax"?

Its exactly what it sounds like.... What is a "bearallax"? How do you make a "bearallax"? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.

"bearallax" Previews
IQ Test

"bearallax" - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>"bearallax"</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="c-page__title js-parallax-title">bearallax</h1>
<section class="c-section--angle c-section--parallax-bg js-parallax-bg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected]" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected] 1x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected] 2x" class="c-image--responsive">
</section>
<section class="c-section--angle c-section--parallax-bg js-parallax-bg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected]" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected] 1x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected] 2x" class="c-image--responsive">
</section>
<section class="c-section--angle c-section--parallax-bg js-parallax-bg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected]" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected] 1x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected] 2x" class="c-image--responsive">
</section>
<section class="c-section--angle c-section--parallax-bg js-parallax-bg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected]" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected] 1x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected] 2x" class="c-image--responsive">
</section>
<section class="c-section--angle c-section--parallax-bg js-parallax-bg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected]" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected] 1x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/186175/[email protected] 2x" class="c-image--responsive">
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

"bearallax" - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
*, *:focus, *:active, *:focus:active, *:before, *:before:focus, *:before:active, *:before:focus:active, *:after, *:after:focus, *:after:active, *:after:focus:active { outline: none;
}
.c-page__title { color: white; font-size: 36px; margin: 0; padding: 1em; position: fixed; text-align: center; text-shadow: -0.045em 0.06em 0.1em #444, 0.045em 0.06em 0.1em #444, 0 0.09em 0.1em #444; width: 100%; z-index: 1;
}
[class*=' c-section'] > img,
[class^='c-section'] > img { opacity: 0;
}
.c-section--angle { -webkit-clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0% 100%); clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0% 100%);
}
.c-section--angle:first-of-type { -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0% 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0% 100%);
}
.c-section--angle:last-of-type { -webkit-clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0% 100%);
}
.c-section--angle + .c-section--angle { margin-top: -5vw;
}
.c-section--parallax-bg { background-position: center 0; background-size: 120%;
}
.c-image--responsive { width: 100%;
}

"bearallax" - Script Codes JS Codes

var $win = $(window), winH = $win.height(), docH = $(document).height(), $bears = $('.js-parallax-bg'), $title = $('.js-parallax-title');
$bears.each(function() { var $obj = $(this), imgSrc = $obj.find('img').attr('src'); $obj.css({ 'background-image': 'url(' + imgSrc + ')' }); bgPos($obj); $win.on('scroll', function() { bgPos($obj); });
});
titlePos($title);
$win.on('scroll', function() { titlePos($title);
});
function bgPos($obj) { var pos = $win.scrollTop(), bearY = $obj.offset().top, bearH = $obj.height(); if (pos <= (bearY + bearH) && pos > (bearY - winH)) { var newPos = -((pos - bearY) / 3); $obj.css('backgroundPosition', 'center ' + newPos + '%'); }
}
function titlePos($obj) { var pos = $win.scrollTop(), titleH = $obj.height(), newPos = (pos + titleH) / docH; $obj.css({ top: (newPos * 100) + '%', transform: 'scale(' + (newPos + 1) + ')' });
}
"bearallax" - Script Codes
"bearallax" - Script Codes
Home Page Home
Developer Brandon Kennedy
Username brandonkennedy
Uploaded September 18, 2022
Rating 4.5
Size 3,246 Kb
Views 22,264
Do you need developer help for "bearallax"?

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!

Brandon Kennedy (brandonkennedy) Script Codes
Name
CSS Only Banner Rotation
SCSS Tick Marks Function
And yet another box shadow loader
Compare Some Different Grid Systems
Change the Slide Behavior on Bootstrap Carousels
More loading
Slug loader
CSS Animated Search Box Concepts
Browser Detection
Crooked section dividers
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!