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.
Related
if ( ('IntersectionObserver' in window) && (!document.documentElement.classList.contains('dont-sticky')) ) {
var body = document.body
const sentinel = document.getElementById('sentinel')
const stickyEl = document.querySelector('.test')
const stickyClass = "sticky"
const handler = (entries) => {
if (stickyEl) {
if (!entries[0].isIntersecting) {
body.classList.add(stickyClass);
return false;
} else {
body.classList.remove(stickyClass);
return false;
}
}
}
const observer = new window.IntersectionObserver(handler)
observer.observe(sentinel)
}
body { height: 4000px; background: white; }
body.sticky { background: #FFC; }
.test { width: 100%; height :100px; top: auto; position: relative; background: #FCF; }
body.sticky .test { top: -1px; position: sticky; background: #F6F; }
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<div id="sentinel"></div>
<div class="test"></div>
I am playing with IntersectionObserver to add a class to the body element when the .test item is position:sticky.
Ideally I would like the stickyClass to only be added to the body element when the screen width is greater than 1000px wide, including allowing for browser window resizing when viewing the page.
I know I can write css media queries to neutralize the sticky related changes when 999px width or under - but I am interested to know if it's possible and also how best to implement a 1000px minimum window width with the IntersectionObserver script. I am interested to see various ways to do it.
One option I found was window.innerWidth, which works well in the first page load but does not take into account browser width resizing.
window.innerWidth >= 1000
//used like so in the top line of the script
if ( ('IntersectionObserver' in window) && (window.innerWidth >= 1000) && (!document.documentElement.classList.contains('dont-sticky')) ) {
In searching the web I can see a new option called ResizeObserver and also something called Match. I am unsure if these are the current way to do it and also how to implement these with my IntersectionObserver script.
Greatly appreciate any help.
(confirming that I am an absolute rookie at javascript)
Many thanks.
All I want is to do is to make one element on the page (a div is easiest) scroll slower or faster than the other items on the page. For example, when scrolling, this particular div will move at 50% or 200% of the speed of the other items, etc.
It seems like such a simple, straightforward thing, but I can't find any examples of this. Also, I don't want to use JQuery, someone else's sketchy / overly complicated 3rd party plugin, etc. Just simple, clean, CSS and JS.
Ok, so thanks #ajaypane for the answer, but I actually figured out an even simpler way of doing this. I can't believe that nobody has done this - it's far less complicated than everything else I've seen.
JS
function parallax() {
var s = document.getElementById("floater");
var yPos = 0 - window.pageYOffset/5;
s.style.top = 50 + yPos + "%"; }
window.addEventListener("scroll", function(){
parallax();
});
CSS
.section { position: relative; width: 100vw; height: 15vw; }
.object-in-3d {
margin-left: 45vw;
width: 10vw;
height: 10vw;
background-color: #41ebf4; }
.float-center {
position: absolute;
top: 50%; }
#red { background-color: #f44141; }
#yellow { background-color: #f48342; }
#green { background-color: #f4dc41; }
#floater {}
HTML
<div class="section" id="red"> </div>
<div class="section" id="yellow">
<div class="object-in-3d float-center" id="floater"> </div>
</div>
<div class="section" id="green"> </div>
It's in codepen, here:
https://codepen.io/escapetomars/pen/EeLmpp
So I have managed to come up with this which is not too complex, however, it does scroll relative to the users scroll speed, but does work with scroll wheel, scrollbars, and keyboard.
It also scrolls up and down.
You can change the speed to suit your needs, but 10 worked for keeping it pretty much in view all the way down for my scroll speed, but left it behind when faster or using Page Down.
document.addEventListener("DOMContentLoaded", function DomContentLoaded(){
//Get the element you want to slow down;
var slowDiv = document.getElementById('slowDiv');
//Set its style.top to be the offsetTop so if style.top is not set, it will still work.
slowDiv.style.top = slowDiv.offsetTop + 'px';
//set the last scrollTop to use for direction
var lastScrollTop = 0;
//Get the element you are scrolling against
var relativeSpeedDiv = document.getElementById('main');
var moveLittle = function MoveLittle(speed, scrollY) {
//Get the current top of the slow element
var topVal = parseInt(slowDiv.style.top);
//Check scroll direction
if (isScrollingDown(scrollY)) {
topVal = topVal + speed;
} else {
topVal = topVal - speed;
}
//Set new top of slow element
slowDiv.style.top = topVal + 'px';
};
var isScrollingDown = function IsScrollingDown(scrollY) {
var retVal = false;
if (scrollY > lastScrollTop) {
retVal = true;
}
lastScrollTop = scrollY;
return retVal;
};
window.onscroll = function WindowScroll() {
//Send speed and current scroll Y
moveLittle(10, this.scrollY);
}
});
.biggestBig {
margin: auto;
align-self: center;
width: 90%;
min-height: 9999em;
}
.faded {
background: linear-gradient(gray, black);
}
.slow {
width: 2em;
height: 2em;
background-color: #ee9b0b;
position: absolute;
}
<div id="mainDiv" class="biggestBig faded">
<div id="slowDiv" class="slow"></div>
</div>
I have a page with a grid containing three div elements. Each one of this div has the size of the viewport so at any time just one of the divs if visible and the other two are outside. So the grid is three times big the viewport.
Resizing the window will cause the divs, hence the grid, to resize as well.
The html is pretty simple:
<div class="container">
<div class="square square1">1</div>
<div class="square square2">2</div>
<div class="square square3">3</div>
</div>
Styled like this:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 100vh;
width: 300vw;
}
.square {
height: 100vh;
position: absolute;
width: 100vw;
}
.square1 {
background: red;
left: 0;
}
.square2 {
background: green;
left: 100vw;
}
.square3 {
background: yellow;
left: 200vw;
}
The initial position, set via javascript, is on the middle div.
What happens is that resizing the window makes the whole document to move proportionally with the resizing. So, if at some point I'm seeing just the second div, resizing the window will make the third to appear more and more.
I'm quite sure that with some javascript I could move the grid so that it appears fixed while resizing, but I can't figure out a formula.
I tried something like this:
var windowW = $(window).width();
$(window).resize(function() {
var newWidth = $(window).width();
var diff = windowW - newWidth;
var windowLeftPos = $(window).scrollLeft();
$(window).scrollLeft(windowLeftPos - diff / 2);
});
But it's just a blind guess. I tried other formulas with multiplication and division and scale factors, but nothing worked.
Any idea?
Here's a working example showing what I mean.
Initially you see just the green div. Resizing the window, on of the two other divs will appear, instead I would like to see only the green one.
Edit: the question similar to mine is very interesting but it seems to me also very different. The main huge difference is that I'm resizing and moving DOM elements that stay outside the viewport. Besides, the answers are pretty focused on the image/background aspect ratio, which is part of the question, but it's not the case for me. I don't have a problem resizing elements, just compensating the movement due to the resizing
Update: I edited the pen and I think I'm getting closer to the desired result: http://codepen.io/anon/pen/vGeRgJ
It seems to kind of work, but it doesn't especially when I'm closer to one of the extremes, like all on the left or on the right.
Here is an updated version for you, from where you can easily make your own adjustments.
Since jQuery doesn't throttle the resize event by default, I made this one in plain javascript.
To get rid of the vertical scroll, and I also added a getScrollbarSize function as a bonus :)
function getWidth() { return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; }
function getLeft() { return document.body.scrollLeft; }
function setLeft(v) { document.body.scrollLeft = v; }
function getScrollbarSize() {
var div, width;
div = document.createElement('div');
div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
div = div.firstChild;
document.body.appendChild(div);
width = div.offsetWidth - div.clientWidth;
document.body.removeChild(div);
return width;
};
(function(t,w,l,l2) {
document.querySelector('.container').style.height = 'calc(100vh - ' + getScrollbarSize() + 'px)';
w = getWidth(), l = w, l2 = l / w, setLeft(w);
window.addEventListener("resize", function(e) {
if ( !t ) {
t = setTimeout(function() {
t = null;
resizeHandler(e);
}, 66); /* throttle timeout */
}
}, false);
function resizeHandler(e) {
w = getWidth();
l = getLeft();
setLeft(w * l2);
}
window.addEventListener("scroll", function(e) {
if ( !t ) {
l2 = getLeft() / w;
}
}, false);
}());
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 100vh;
width: 100vw;
}
.square {
height: 100%;
position: absolute;
width: 100vw;
}
.square1 {
background: red;
left: 0;
}
.square2 {
background: green;
left: 100%;
}
.square3 {
background: yellow;
left: 200%;
}
<div class="container">
<div class="square square1">1</div>
<div class="square square2">2</div>
<div class="square square3">3</div>
</div>
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
I can't for the life of my figure this out. Does anyone know how this scrolling effect is created on this website? - http://blindbarber.com/news
I'm working on a project where this effect would greatly help so that my fixed navigation isn't too large when scrolling.
Thanks in advance.
The header stays on top with the css position:fixed .. either you can set the header css -- position:fixed right from the start or change it to position:fixed once he starts scrolling the page.. and update the header to the contents you want to keep as he scrolls..
// css
.container {
height: 2000px;
width: 100%;
background-color: yellow;
}
.header {
text-align: center;
background-color: red;
height: 100px;
min-height: 50px;
width: 100%;
}
// js
window.onscroll= function () {
var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
var header = document.getElementById("header");
if (top > 50){
header.style.position = "fixed";
header.style.height = "50px";
} else {
header.style.position = "relative";
header.style.height = "100px";
}
}
//html
<div class="container">
<div id="header" class="header">
Hello World
</div>
</div>
Demo here
This is what your looking for I think:
http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery
So the google search terms that gives you an answer is "responsive menu" + javascript.
In my case I was looking for a jquery plugin so I added in "jquery". I didn't find much using "fixed header transformation"
:)