I have a parent div. I want it to moves to left smoothly while scrolling down and moves to right while scrolling up. it has a p tag inside itself and I want the p tag stay fixed while the parent moves.
I wrote some codes but its not working at all. the sample codes are on fiddle
var p1 = document.getElementById('parallax1')
function parallaxbubbles() {
var scrolltop = window.pageYOffset
var scrollamount = (scrolltop / (scrollheight - windowheight)) * 100
p1.style.left = 35 + (scrollamount / 3) - 35 + '%'
}
window.addEventListener('scroll', function() {
requestAnimationFrame(parallaxbubbles)
}, false)
#parallax1 {
height: 100px;
width: 2539px;
top: 300px;
position: relative;
background: -webkit-linear-gradient(left top, red, yellow);
background: -o-linear-gradient(bottom right, red, yellow);
background: -moz-linear-gradient(bottom right, red, yellow);
background: linear-gradient(to bottom right, red, yellow);
}
#no1 {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="no1">
<div id="parallax1">
<h3>This is some text</h3>
<p>This is some text .</p>
</div>
</div>
You were missing some variables. I guess scrollheight is the window.scrollY . So i have declared the variable like that and the div moves to left when scroll down and to right when scroll up.
The amount of pixels it moves and other custom styling is up to you.
One weird thing in your calculation is that you have 35 + something - 35 . That's useless :) . I removed that.
I wrapped the text inside a container paraContent , which on scroll moves from left equal to the distance the parallax1 div moves to left. So it stays in the same initial position
See below
( i suggest you don't copy code from other sources before you understand how it works and how it can be edited )
var p1 = document.getElementById('parallax1')
var p1text = document.querySelector('.paraContent')
function parallaxbubbles() {
var scrolltop = window.pageYOffset,
scrollheight = window.scrollY,
windowheight = window.innerHeight,
scrollamount = (scrolltop / (scrollheight - windowheight)) * 100
p1.style.left = (scrollamount / 3) + '%'
p1text.style.left = -(scrollamount / 3) + '%'
}
window.addEventListener('scroll', function() {
requestAnimationFrame(parallaxbubbles)
}, false)
#parallax1 {
height: 100px;
width: 2539px;
top: 300px;
position: relative;
background: -webkit-linear-gradient(left top, red, yellow);
background: -o-linear-gradient(bottom right, red, yellow);
background: -moz-linear-gradient(bottom right, red, yellow);
background: linear-gradient(to bottom right, red, yellow);
}
#parallax1 .paraContent {
position: relative;
width: 100%;
}
#no1 {
height: 1000px;
}
<div id="no1">
<div id="parallax1">
<div class="paraContent">
<h3>This is some text</h3>
<p>This is some text .</p>
</div>
</div>
</div>
var p1 = $("#parallax1")
function parallaxbubbles() {
var scrolltop = window.pageYOffset;
var scrollheight = 100;
var windowheight = window.innerHeight;
var scrollamount = (scrolltop / (scrollheight - windowheight)) * 100;
p1.css("background-position", scrollamount + "px");
}
window.addEventListener('scroll', function() {
requestAnimationFrame(parallaxbubbles)
}, false)
#parallax1 {
height: 100px;
width: 100%;
top: 300px;
position: relative;
background: -webkit-linear-gradient(left top, red, yellow);
background: -o-linear-gradient(bottom right, red, yellow);
background: -moz-linear-gradient(bottom right, red, yellow);
background: linear-gradient(to bottom right, red, yellow);
}
#no1 {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="no1">
<div id="parallax1">
<h3>This is some text</h3>
<p>This is some text .</p>
</div>
</div>
You had some variables that were not defined. I couldn't really figure out what scrollheightis supposed to be based upon, but when you define the variables that are missing ( scrollheight and windowheight) you get the desired result.
Related
I am working on the mobile version of my website. I positioned one element below another (red below blue).
These elements are shaped with: clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 62%, 50% 85%, 0% 62%).
They also got an overlay, which got a text positioned inside. My goal is to fix this text block in the lower right corner for every display resolution.
How it should look on every device:
How it looks, when I change the viewport width:
First I wrote several #media (...) queries, to position the text blocks.
I noticed that I would have to write a query for almost every device individually, since the required top-spacing and angle of the text blocks are always changing.
So I tried to calculate the needed angle and the needed value for top. I found a method on stackoverflow that looks like that:
function calculate() {
const deviceWidth = screen.width;
const viewportWidth = window.innerWidth;
const currentRatio = viewportWidth / deviceWidth;
const angle = currentRatio * ...; // I don't know
const top = ...; // I don't know
document.querySelector('.text-container').style.transform = `rotate(${angle}deg)`;
document.querySelector('.text-container').style.top = `${top}vh`;
}
calculate();
window.addEventListener('resize', calculate);
I'm pretty sure, that this method is a helpful fundamental, but I don't know how to move on.
Thanks.
I would do this differently using gradient and mask:
.box {
padding-top: 200px; /* this will control the overal height */
overflow:hidden;
position:relative;
}
.box div {
padding: 10px 0 10px 100%; /* padding-left:100% to push the text to the center */
color: #fff;
font-size:25px;
background: #248a8a;
transform-origin:bottom;
transform:rotate(-20deg); /* control the rotation of the text */
margin:0 -50% 0; /* negative margin to create some overlow and avoid the bad effect of rotation */
}
.one {
background:cyan;
}
.one::before {
content:"";
position:absolute;
z-index:9;
pointer-events:none;
inset:0;
background:
linear-gradient(to bottom right,#0000 49.8%,#dc143c 50%) bottom 0 right calc(50% - 500px),
linear-gradient(to bottom left ,#0000 49.8%,#dc143c 50%) bottom 0 left calc(50% - 500px);
/* keep the 1000px a random but big value
adjust 363px based on the angle you will be using
The formula is tan(20deg) = 363/1000
*/
background-size:1000px 363px;
background-repeat:no-repeat;
}
.two {
background:#dc143c;
-webkit-mask:
linear-gradient(to bottom right,#000 49.8%,#0000 50%) bottom 0 right calc(50% - 500px),
linear-gradient(to bottom left ,#000 49.8%,#0000 50%) bottom 0 left calc(50% - 500px);
/* same logic as above */
-webkit-mask-size:1000px 363px;
-webkit-mask-repeat:no-repeat;
}
.two div {
background:#7c2c3c;
}
<div class="box one">
<div>Text block 1</div>
</div>
<div class="box two">
<div>Text block 1</div>
</div>
This is the HTML:
<!--*SCROLL INDICATOR-->
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
This is the CSS:
/* The progress container (grey background) */
.progress-container {
width: 100%;
max-height: 12px;
background: #ccc;
position:fixed;
}
/* The progress bar (scroll indicator) */
.progress-bar {
max-height: 12px;
background: #4caf50;
width: 0%;
position:fixed;
}
This is the javascript:
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
The expected output is that the scroll indicator appears but in Chrome it doesn't appear at all.
Replace max-height by height, I think it will work.
Otherwise, you will have an height of 0 by default because you have no content in your div.
I have this common pattern of parallax scrolling with plain javascript that uses custom data attributes and scrolls the background image in the oposite direction.
HTML:
<header id="home" class="section" data-type="background" data-speed="3"></header>
<section id="portfolio" class="section"></section>
<section id="about" class="section"></section>
<section id="contact" class="section"></section>
CSS:
#home {
background-color: grey;
height: 100%;
width: 100%;
background-image: linear-gradient(to bottom, rgba(#000, 0.5), rgba(#000, 0.5)), url("../bg.jpg");
background-attachment: fixed;
background-repeat: repeat;
background-position: 50%;
background-size: cover;
position: relative;
}
JAVASCRIPT:
{
function parallax() {
Array.from(document.querySelectorAll('*[data-type="background"]')).forEach(e => {
let yPos = -(window.pageYOffset / e.dataset.speed);
var coords = `50% ${yPos}px`;
e.style.backgroundPosition = coords;
});
}
document.addEventListener('scroll', function () {
parallax();
});
}
The issue is that this code calculates the Ypos variable and assigns it to the background position-y property. Actually it overrides the css which is set to 50% before you start scrolling. As a result the image goes from the center to the bottom once you start scrolling. I have included a codepen to see the problem.
https://codepen.io/anon/pen/pLvjqR
Is there any way to add the yPos variable to the initialized background position 50% 50%, which means make it 50% 50%+ypos instead of 50% ypos.
Thanks.
I changed the speed of 3 -> .02 and javascript, you have to start at 50% and reduce this percentage rather than applying values in pixels.
// let yPos = -(window.pageYOffset / e.dataset.speed);
let yPos = (e.getBoundingClientRect().top - window.pageYOffset) * e.dataset.speed + 50;
// var coords = `50% ${yPos}px`;
var coords = `50% ${yPos}%`;
You can view changes here :
https://codepen.io/anon/pen/mxyVBV
I am wondering if there is an ember add-on that I can implement to do the following.
|-----------------------------------------------v----|
green yellow red
Color gradient bar of green > yellow > red and the v represents a value that lands there. Also where green, yellow, red start is based on values, so green could be 0-20 and yellow 21-40 and red 41+
I don't know what something like this would be called, but if anyone can let me know and help point me in the right direction, I would be much obliged.
Here you go:
var min = 0;
var max = 60;
function set(x) {
var left = (x - min) / (max - min) * 100;
document.getElementById("V").style.left = left + "%";
}
set(50);
#gauge {
background: linear-gradient(to right, green 0%, yellow 50%, red 100%);
height: 2em;
position: relative
}
#V {
width: 0;
height: 2.4em;
border: 1px solid black;
position: absolute;
top: -0.2em
}
<div id="gauge">
<div id="V"></div>
</div>
I want to make container/div in sidebar moving/following along with page scrolling down. It is not just a position:fixed container. It will move only when it should disappear being scrolled down. What is the best practice to implement?
Thank you
Say we want to:
start at 260px from top (as defined in CSS)
stick at 24px from top (as defined in JS)
var $sticky = $("#sticky"),
pos = {
abs : {position: "absolute", top: parseInt($sticky.css("top"), 10) },
fix : {position: "fixed", top: 24 /* <<< SET AS DESIRED */ },
};
$(window).on("load scroll", function() {
var canFix = $(this).scrollTop() >= pos.abs.top - pos.fix.top;
$sticky.css( pos[ canFix? "fix" : "abs" ] );
});
body{
height: 2000px;
border: 4px dashed #444;
}
#sticky{
height: 100px;
background: #0bf;
position:absolute;
top: 260px; /* <<< SET AS DESIRED */
}
SCROLL!
<div id="sticky">STICK ME AT 24 FROM TOP</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>