I'm trying to emulate the scrolling effect on http://theoneandonlyboutique.com/
Notice how when you scroll the bottom section overlays the top section as it fades. Currently my code is simple. The layout is separated between sections.
<section class="red">Section 1</section>
<section class="green">Section 2</section>
<section class="orange">Section 3</section>
and the css:
section {
width: 100%;
min-height: 400px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.orange {
background-color: orange;
}
https://jsfiddle.net/kfhnj8ep/
This was the closest I found on stackoverflow Simple parallax, CSS Layers, reveal last section when scrolling
Any tips/help would be great! Think this helps users focus on the content at hand.
What you need is to have an image or whatever you want to animate inside one of your sections which you will move using javascript while scrolling.
Something like this:
var cover = document.querySelector('.js-parallax'),
coverHeight = Math.round(cover.offsetHeight),
translate = 0,
parallaxThreshold = 3; // parallax speed
function parallax() {
if (window.scrollY < coverHeight) {
translate = Math.round(window.scrollY / parallaxThreshold);
cover.style.transform = 'translateY(' + translate + 'px)';
}
}
window.requestAnimationFrame(parallax);
window.addEventListener('scroll', function () {
window.requestAnimationFrame(parallax);
}, false);
I’ve made a demo here where you can check out the full code: http://codepen.io/vincentorback/pen/MYYrmj
Related
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>
So I wanted to make a page like https://www.guillaumetomasi.com/ .How can I hide the scrollbar and make a custom one like that in the page.
With CSS attributes like overflow-x: hidden and overflow-y: hidden you can hide scrollbars.
The custom scrollbar and the scrolling proccess is controlled by Javascript via and events.
The thing is simple and that's, they are not using any scrolling at all, but what you feel is a modified scroll for those slides is actually a slideshow built by JavaScript functionalities. These side slideshow are nowadays in trend and gives you a feel of pseudo scroll. It will be better if you would ask how to achieve that slideshow in a web page instead of that scrolling...
The scroll bar can be hidden with css ::-webkit-scrollbar {width: 0px;}
The custom scroll bar is made with javascript. Here's an example of how it could be done:
window.addEventListener("scroll", function() {
var section1 = document.getElementById("section1");
var section2 = document.getElementById("section2");
var section3 = document.getElementById("section3");
var indicator = document.getElementById("scroll-indicator");
if (window.scrollY < section2.offsetTop ) { // If scroll height is above section 2
indicator.innerText = "1"
}
if (window.scrollY > (section1.offsetTop + section1.offsetHeight)) { // If scrolled past section 1
indicator.innerText = "2"
}
if (window.scrollY > (section2.offsetTop + section2.offsetHeight)) {// If scrolled past section 2
indicator.innerText = "3"
}
});
p {
position: fixed;
right: 15%;
top: 50%;
color: black;
font-size: 24px;
font-family: arial;
}
::-webkit-scrollbar {
width: 0px; /*This removes the scroll bar*/
}
<div id="section1" style="height: 500px; background-color: lightblue">Scroll Down</div>
<div id="section2" style="height: 500px; background-color: pink">Keep scrolling</div>
<div id="section3" style="height: 500px; background-color: Khaki">Almost there</div>
<p id="scroll-indicator">1</p>
I am working on a website for a friend (https://www.nicoledavis.org) and have not been able to get the code right in order to make the top photo fade to black when scrolled. The idea is to have the entire top photo completely fade to black before the "Background Info" appears on the screen. Any help is much appreciated!
I used the exact code setup (copy/pasted) from here: https://jsfiddle.net/KCb5z/21 or see below:
jQuery:
$(function () {
$(window).scroll(function () {
var currentScrollTop = $(window).scrollTop();
$('#blackOverlay').css('opacity',
currentScrollTop/$('#blackOverlay').height());
});
});
CSS:
#blackOverlay {
background-color: #000;
opacity: 0.0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
HTML:
<div id="blackOverlay"></div>
The effect I'm seeing in the JSFiddle example is exactly what I'm hoping the website header does on the website I'm working on, but the code doesn't seem to have the same effect on my site. I'd also like for the speed of the fade effect to be increased, but have not yet been successful.
Is this what you're looking for?
<html>
<style>
.headerClass {
background: -webkit-linear-gradient(#000, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<h1 id="header">header</h1>
<script>
window.onscroll = function() {
fadeText()
};
function fadeText() {
if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
document.getElementById("header").classList.add("headerClass");
} else {
document.getElementById("header").classList.remove("headerClass");
}
}
</script>
</html>
You say you've tried some code, but it didn't work. May I take a look at it?
How can I make my text appear when scrolling? I've found this http://www.jqueryrain.com/?HZtLD8hN but I'd like to know how it works. There was a similar question asked but I don't understand it. Can someone explain, or provide examples, how to make this work?
Thanks
HTML
<div id = "divToShowHide" class = "BeforeScroll">Content i want to appear while scrolling</div>
CSS
.BeforeScroll {
width: 100%;
height: 200px;
background-color: yellow;
}
.AfterScroll {
width: 100%;
height: 200px;
background-color: red;
}
A basic example is this: say some of your content is in a<div id="appearble_text"> that is at 70% of the total height of the page. <div id="container">
Initially you will set document.getElementById("appearable_text").style.display = "none";
You can set up a function
function OnScroll() {
var totalHeight = this.offsetHeight; //(this, because container is the caller of the function from the code below)
if (this.scrollTop || this.scrollTop > totalHeight * 0.7) { //if scrolling reached 70% of height
document.getElementById("appearable_text").style.display = "block";
}
}
and then use it
var container = document.getElementById("container");
container.onscroll = OnScroll;
Of course, instead of just suddenly displaying the <div> you can fade it in or do all sorts of CSS/JQuery tricks you like.
I'm trying to replicate the effect on this website in the portfolio section where it slides a panel in the full size of the viewport and then slides it out when you click close.
Example here: http://alwayscreative.net/#portfolio
Here's my current markup:
<section class="panel" id="portfolio">
<section class="content">
<h1>What are you <strong>interested</strong> in?</h1>
<a class="btn-portfolio" id="btn-commercial" href="#">Commercial</a>
<a class="btn-portfolio" id="btn-residential" href="#">Residential</a>
</section>
</section>
The .panel section is 100% height and width of the viewport and I'd like 2 different panels to be able to slide in — one for #btn-commercial and one for #btn-residential.
Any ideas how to make this happen?
If it helps any, here's my site so far: http://www.freshbrand.ca/testlink/top40/#portfolio
Here's how you would do it with JQuery but clearly you can do it in normal javascript if you prefer. Set up the panels with position absolute in your css:
.panel {
position: absolute;
top: 0;
height: 100%;
border-width: 0;
margin: 0;
}
.panel inactive{
display: none;
}
.panel active {
display: block;
left: 0;
width: 100%;
height: 100%;
}
in your javascript (after the dom has loaded) get the screen dimensions and set the positions of the inactive elements to just off the right hand edge of the screen:
$('.panel').css('width', screen.innerWidth);
var setup = function() {
$('.portfolio-panel.inactive').css('left', window.innerWidth);
$('.portfolio-panel.active').css('left', 0);
}
setup();
When you wish to slide a panel in from the right, pass its id to the following function:
var slideIn = function(panelId) {
$('#' + panelId).animate({
left: 0
}, 400, function () { // animates the #left property from the screen width down to zero (i.e. slide it in from the right hand edge of the screen)
// tidy up
$('.portfolio-panel.active').removeClass('active').addClass('inactive');
$('#'+panelId).removeClass('inactive').addClass('active');
setup();
});
};
EDIT: The event handler would look something like this:
$('.btn-portfolio').click(function() {
slideIn($(this).attr('id').substr(4)); // extract the panel name from the id and pass it into slideIn
});
The only remaining issue is to eliminate the horizontal scroll bar you will probably see during the animation. Just add overflow-x: hidden; to the element to which the scroll bar belongs (probably body, but it depends on how you've structured and styled the rest of your site)
This is basically a single page website, a lot of jQuery plugins are available for the same.
I personally prefer
http://joelb.me/scrollpath/
Check out it's demo and download the code from github's link
https://github.com/JoelBesada/scrollpath
Hope this helps