So what I was looking for is a subtle radial gradient background effect which will move from left to right when the page is scrolled, like this site - https://hellonesh.io/ . So when I inspected the code of that site, I found the responsible HTML and CSS for that effect -
HTML
<body>
<main>
<div class="bg" style="background-image: radial-gradient(88.33% 60.62% at 100.87% 48.33%, rgb(86, 53, 173) 0%, rgb(20, 9, 78) 100%);"></div>
<section id="sec-1">
...
</section>
<section id="sec-2">
...
</section>
<section id="sec-3">
...
</section>
</main>
<script>
// Need help here
</script>
</body>
CSS
.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
section {
height: 100vh;
}
jQuery/js
$(window).on('scroll', function () {
//When a new section(100Vh) comes into view move the radial gradient left to right or right to left
// completely lost here
// $('.bg').css({background-image: "radial-gradient()"});
});
But I've no idea how to make the radial gradient move in the viewport when scrolled. If it's a plugin please let me know the name. If not then how can I achieve that effect using JavaScript or jQuery? Thanks!
There are two parts to this question: how to sense when another section comes into view and when it does how to move the background image depending on which section is now in view.
For the first we can use InterSectionObserver. If we attach the observer to each section, it will get fired when that section comes into (or goes out of, but we aren't interested in that) the viewport.
For the second, this snippet uses a CSS variable --x to say where the background image radial gradient is to have its 'at' x coord set. I don't know what values you want for each section, so this snippet just looks at the id of the section that is in view and calculates the offset just for the demo.
function callback(entries) {
entries.forEach( entry => {
if (entry.isIntersecting) {
let x = 50 * Number(entry.target.id.replace('sec-', '') - 1); //change to whatever you want the x to be for sec-n
bg.style.setProperty('--x', x + '%');
}
});
}
const bg = document.querySelector('.bg');
const sections = document.querySelectorAll('section');
const observer = new IntersectionObserver(callback);
sections.forEach( section => {
observer.observe(section);
});
.bg {
--x: 0;
--y: 48.33%;
position: fixed;
display: block;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: radial-gradient(88.33% 60.62% at var(--x) var(--y), rgb(86, 53, 173) 0%, rgb(20, 9, 78) 100%);
}
section {
height: 100vh;
}
<main>
<div class="bg"></div>
<section id="sec-1">
...
</section>
<section id="sec-2">
...
</section>
<section id="sec-3">
...
</section>
</main>
Related
I'm trying to replicate this overlay phone effect from this website:
https://www.beemit.com.au/
Basically, when you scroll down, the contents inside the fixed div (phone) also change.
I cannot grasp my head around the revealing effect created when you scroll down. I have only managed to create the fixed div and the various sections on the webpage.
Here's a simple version of the overlay-on-scroll.
There are 3 elements, the first image you want to be shown in the 'phone', the second image which gradually gets revealed and the footer element. They have different z-indexes so footer is behind both first and second and second is behind first.
The phone has a fixed position so it doesn't move on scrolling. The footer is placed relative to the body (or whatever container you have) just out of view at 100%.
We introduce a simple event listener on scrolling which tests whether there is an overlap between the footer and the phone. If there is then we set the height of the first image element to be its original height minus the overlap. This reveals the bottom part of the second element.
Without seeing your code I can't tell whether you need more sophistication (for example, you have to be aware of stacking contexts if your phone and footer are not in the same one).
const footer = document.querySelector('.footer');
const first = document.querySelector('.first');
const firstBottom = first.getBoundingClientRect().bottom;
const firstHeight = firstBottom - first.getBoundingClientRect().top;
function checkOverlay() {
const top = footer.getBoundingClientRect().top;
if ( top < firstBottom) {
first.style.height = firstHeight - firstBottom + top + 'px';
}
}
body {
width:100vw;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
}
.first, .second {
position: fixed;
top: 50%;
left: 50%;
border: 1px solid black;
width: 20vmin;
height: 30vmin;
overflow:hidden;
}
.first {
background-image: linear-gradient(magenta, pink);
z-index: 0;
}
.second {
background-image: linear-gradient(cyan, lime);
z-index: -1;
}
.footer {
width: 100%;
height: 50%;
background-image: linear-gradient(red,blue);
position: relative;
top: 100%;
z-index: -2;
}
<body onscroll="checkOverlay();">
<div class="first"></div>
<div class="second"></div>
<div class="footer"></div>
</body>
This site I am developing is using HTML5, CSS3, Bootstrap 4, and Jquery. I would like to have a scroll effect on a full-screen background-image that is at the very top of my page (100vh hero banner type thing). I am trying to gradually increase the contrast (css filter: contrast(some%)) of an image as the user scrolls down (its fine if the image is completely unrecognizable by the time it leaves viewport).
I have some Jquery that somewhat does the effect I am looking for, however I would like the effect to be more gradual.
The main issue I am having is that when the user scrolls back to the top of the page the contrast value gets set to 0% leaving a completely grayed out image. What I would like is for the contrast to gradually decrease back to normal (100%) as the user scrolls back up all the way to the top of the page.
I have set up a very simplified codepen. I couldn't get a css background-image url value to reference an external link from codepen, so I am targeting the effect on a full screen image ().
Thanks!
Link to the Pen: [codepen-link][1]
[1]: http://codepen.io/wdzajicek/pen/MVovZE
See code below in snippet
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = $(window).scrollTop();
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
There is the main problem in $(window).scrollTop(); it will return 0 value
that's why contrast value gets set to 0% leaving a completely grayed out image
var pixelstop = $(window).scrollTop();
replace the code with
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
don't just copy this code please understand thanks.
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
console.log(pixelstop);
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
100 is default value of filter contrast not 0. that's why the background is grey out because it reaches zero.
So I have this image as a background for a "parallax-divider" div, which I wish to stay on the page as it is, but I would like to make the image scroll slower than other content in order to accomplish a parallax effect. I know that I'm targeting something wrong way, but can't figure out how to fix it. Only thing I get is to move the whole div up and down/stretching in a very undesireable way. Any opinions how to fix this?
Here's the Codepen: http://codepen.io/anon/pen/vxOYrQ
.section {
height: 300px;
background-color: blue;
}
.parallax-divider {
background: url('http://www.planwallpaper.com/static/images/Cool-Background-Wallpaper-Dekstop.jpg') top center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 200px;
}
<div class="section"></div>
<div class="parallax-divider" id="parlx">
<div class="wrapper">
<div class="parallax-divider__image">
<h2>lorem ipsum</h2>
</div>
</div>
</div>
<div class="section"></div>
function parallax() {
var parlx = document.getElementById('parlx');
parlx.style.position = "relative";
parlx.style.top = -(window.pageYOffset / 8) + 'px';
}
window.addEventListener("scroll", parallax, false)
Use transform: translateY() instead of top property. Also set parallax elemen to position: absolute, width: 100% and it wont strech. Like so :
translate('+ (-(window.pageYOffset / 8)) + 'px';
On my website, I want to use a kind of parallax effect. But normally you only fix a background picture to the screen and so allow the scrolling 'over' it, what I want is kind of the same thing with all of my content.
The website is a one-page side with several sections. Ea h of the sections has a min-height of 100vh on landscape screens. If say section 1, is in the viewport, the user should scroll normally, until the very bottom of the section reaches the bottom of the screen. At the moment of which the next container enters the viewport, section 1 should be fixed, so that section 2 slides over section 1 like a sheet of paper and covers first the content of the bottom.
Have you any idea on how to do this? I don't need fully coded examples, just some ideas on how you would do this.
Thanks in advance.
Some more details
I think that my explanation of what I'm trying to get is a bit vague, so I'm going to extend this a bit.
Imagine you have 5 sheets of paper, on every sheet, there is some content, let's say an About section, on another sheet some Features and so on. Now every sheet has a height of your viewport, so all that you see is that sheet of paper. If the content is bigger than your viewport, the sheet gets bigger too. This is quite obvious I think. If you scroll down the page, the sheet of paper, you're seeing should scroll up until its end matches with the viewport border. Now instead of moving up when scrolling this sheet of paper stays at that exact place. The new content on sheet 2 slides over it, like a new layer.
Perhaps you mean something like this?
<main>
<section class="orange fixed">
<h2>
Some text
</h2>
</section>
<section class="blue">
<h2>
Some text
</h2>
</section>
<section class="orange">
<h2>
Some text
</h2>
</section>
</main>
JS:
var $sections = $('main section');
var sectionHeight = $sections.eq(0).outerHeight();
var setCurrent = function(position ) {
$sections.eq(position).addClass('fixed').siblings().removeClass('fixed');
}
$(window).on('scroll', function() {
var scTop = $(window).scrollTop();
var position = Math.ceil( scTop / sectionHeight );
setCurrent( position - 1 );
})
And some sass
body {
margin: 0;
}
main {
padding: 0;
padding-top: 100vh; // this is the trick
section {
height: 100vh;
text-align: center;
color: white;
padding-top: 200px;
position: relative;
margin: 0;
h2 {
margin: 0;
padding: 0;
}
&.orange {
background: orange;
}
&.blue {
background: blue;
}
&.fixed { // this is the trick
position: fixed;
left: 0;
top: 0;
width: 100%;
}
}
}
You can test it here
https://jsfiddle.net/3r1Lm4ha/8/ ( Maybe more updated )
PS: Could be improved but still don't know if this is what you are looking for
I am following this parallax tutorial that uses only jQuery. I slightly modified the HTML:
<section id="home" data-type="background" data-speed="10">
<article data-speed="1">One</article>
<article data-speed="20">Two</article>
</section>
<section id="about" data-type="background" data-speed="10">
</section>
css
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
#about {
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
And the jQuery:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
This code moves everything in a section at the same speed, but I would like to have the <article> text move at a variable speed different (defined in the <article data-speed>) from the background image.
I wasn't sure how to move the text because background-position is for images, and I tried adjusting top but that didn't have any effect. I also tried setting transform: translateZ(); on the article css, but this also did not work.
How can I add different speeds to the <article> texts? I'd also like to stick to jQuery in the spirit of the example.
try modifying markup always wrapping the article with a section, for ex.:
<section id="about" data-speed="4" data-type="background">
<article>One</article>
</section>
<section id="home" data-speed="20" data-type="background" >
<article >Two</article>
</section>
edit--explanation
this is the source of your parallax jquery script:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
as you can tell what it's doing is slowing down the scroll of the section[data-type="background"] with a factor of data('speed');
This kind of script is built in a way to have one layer of parallax, if you want more parallax layers check wagersfield's parallax script