Fiddle
I have a horizontal page with multiple sections on it. On section 2 I have three images. When I scroll section 2 into view, I want the images to move 50px in the opposite scroll direction.
I have two problems which I can't figure out due to the layout of this page (horizontal instead of vertical):
how to detect when I reach section 2
how to move the images by ~50px in the opposite direction of the scroll and make it as smooth as possible
I use this code to figure out the direction of the scroll
var $scrollWrapper = $('.scroll_wrapper');
var $scrollBtn = $('#scrollBtn');
var $scrollOuterWrapper = $('.scroll_outer-wrapper');
$scrollWrapper.scrollTop(0)
$('#scrollBtn').on('click', function() {
$scrollWrapper.scrollTop($scrollWrapper.scrollTop() + 100)
});
var lastScrollTop = 0;
$scrollOuterWrapper.on('scroll', function() {
var st = $(this).scrollTop();
var endOfWrapper = $(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight;
if (st > lastScrollTop){
// down scroll
console.log('downscroll');
// parallax elements - move to front
// ??
$moveElement = $('.move-on-scroll');
$moveElement.each(function() {
var firstTop = $(this).offset().top;
var wrapperScrollTop = $scrollOuterWrapper.scrollTop();
var shiftDistance = (firstTop - wrapperScrollTop)*0.02;
$(this).css("transform","translateX("+shiftDistance+"px)");
});
} else {
// upscroll
console.log('upscroll');
// parallax elements - move to back
// ??
}
lastScrollTop = st;
});
Here's also a snippet:
var $scrollWrapper = $('.scroll_wrapper');
var $scrollBtn = $('#scrollBtn');
var $scrollOuterWrapper = $('.scroll_outer-wrapper');
$scrollWrapper.scrollTop(0)
$('#scrollBtn').on('click', function() {
$scrollWrapper.scrollTop($scrollWrapper.scrollTop() + 100)
});
var lastScrollTop = 0;
$scrollOuterWrapper.on('scroll', function() {
var st = $(this).scrollTop();
var endOfWrapper = $(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight;
if (st > lastScrollTop){
// down scroll
console.log('downscroll');
// parallax elements - move to front
// ??
$moveElement = $('.move-on-scroll');
$moveElement.each(function() {
var firstTop = $(this).offset().top;
var wrapperScrollTop = $scrollOuterWrapper.scrollTop();
var shiftDistance = (firstTop - wrapperScrollTop)*0.2;
$(this).css("transform","translateX("+shiftDistance+"px)");
});
} else {
// upscroll
console.log('upscroll');
// parallax elements - move to back
// ??
}
lastScrollTop = st;
});
.scroll_outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
.scroll_wrapper {
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
transition: transform .5s ease;
}
.scroll_section {
width: 100vw;
height: 100vh;
}
.scroll_section.one{background: black; color: white;}
.scroll_section.two{background: white; color: black;}
.scroll_section.three{background: black; color: white;}
.scroll_section.four{background: pink; color: black;}
#scrollBtn {
position: absolute;
bottom: 20px;
right: 20px;
background-color: darkblue;
color: white;
border: none;
width: 80px;
height: 80px;
border-radius: 50%;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
cursor: pointer;
}
.move-on-scroll {
width: 150px;
height: 150px;
border: 2px solid red;
margin: 0 20px;
}
.move-on-scroll img {
width: 100%;
height: 100%;
object-fit: cover;
}
.two_inner {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll_outer-wrapper">
<div class="scroll_wrapper">
<section class="scroll_section one">
<h2>section 1</h2>
</section>
<section class="scroll_section two">
<h2>section 2</h2>
<div class="scroll_section two two_inner">
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" >
</div>
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" >
</div>
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" >
</div>
</div>
</section>
<section class="scroll_section three">
<h2>section 3</h2>
</section>
<section class="scroll_section four">
<h2>section 4</h2>
</section>
</div>
</div>
<button id="scrollBtn">Click to Scroll</button>
While writing the answer, start thinking. I'm not quite sure, what is the goal. Maybe if you show some images of a result or explain the scenario - i could do more accurate. For now - made this. First line of image starts moving with the second screen. The second line of images start moving from the beginning. View the code in Full page mode.
UPDATED
Simply added transition to CSS for the element, which is transforming with transform via jquery.
.move-on-scroll {transition: all .5s cubic-bezier(.25,.99,.52,.9);}
If you what to correct the ease transition-timing-function - you can create your own cubic-bezier here https://cubic-bezier.com/
var $scrollWrapper = $('.scroll_wrapper');
var $scrollBtn = $('#scrollBtn');
var $scrollOuterWrapper = $('.scroll_outer-wrapper');
// Have no idea, what it shoud do
/*$scrollWrapper.scrollTop(0);
$('#scrollBtn').on('click', function() {
$scrollWrapper.scrollTop($scrollWrapper.scrollTop() + 100)
});*/
$scrollOuterWrapper.on('scroll', function() {
var st = $(this).scrollTop();
var sOneWidth = $('.scroll_section.one').width();
$moveElement = $('.move-on-scroll');
$moveElement.each(function() {
var firstTop = $(this).offset().left;
var shiftDistance = -st * 0.3;
// detects, when you reash section 2
if (st >= sOneWidth) {
//do something
}
$(this).css("transform", "translateX(" + shiftDistance + "px)");
});
});
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.scroll_outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
.scroll_outer-wrapper {
scrollbar-width: thin;
}
.scroll_outer-wrapper::-webkit-scrollbar {
width: 6px;
background-color: #fff;
}
.scroll_outer-wrapper::-webkit-scrollbar-track {
background-color: #F5F5F5;
border-radius: 10px;
}
.scroll_outer-wrapper::-webkit-scrollbar-thumb {
background: #ffa000;
}
.scroll_wrapper {
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
transition: transform .5s ease;
}
.scroll_section {
width: 100vw;
height: 100vh;
}
.scroll_section.one {
background: black;
color: white;
}
.scroll_section.two {
background: white;
color: black;
}
.scroll_section.three {
background: black;
color: white;
}
.scroll_section.four {
background: pink;
color: black;
}
#scrollBtn {
position: absolute;
bottom: 20px;
right: 20px;
background-color: darkblue;
color: white;
border: none;
width: 80px;
height: 80px;
border-radius: 50%;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
cursor: pointer;
}
.move-on-scroll {
width: 150px;
height: 150px;
border: 2px solid red;
margin: 0 20px;
transition: all .5s cubic-bezier(.25, .99, .52, .9);
}
.move-on-scroll img {
width: 100%;
height: 100%;
object-fit: cover;
}
.two_inner {
display: flex;
justify-content: flex-end;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll_outer-wrapper">
<div class="scroll_wrapper">
<section class="scroll_section one">
<h2>section 1</h2>
</section>
<section class="scroll_section two">
<h2>section 2</h2>
<div class="two_inner">
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80">
</div>
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80">
</div>
<div class="move-on-scroll">
<img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80">
</div>
</div>
</section>
<section class="scroll_section three">
<h2>section 3</h2>
</section>
<section class="scroll_section four">
<h2>section 4</h2>
</section>
</div>
</div>
<button id="scrollBtn">Click to Scroll</button>
Related
I have a website, and I want an element to spin around 360 degrees once when it is clicked. The only way I have heard of to rotate a div element is the CSS transform property. I have tried some different things, like
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
where the notrans class makes the element have a transition time of 0 seconds, and
backward.style.transition = "0s";
backward.style.transform = "rotateZ(0deg)";
backward.style.transition = transtime;
backward.style.transform = "rotateZ(360deg)";
Here is the source code I am using right now:
var backward = document.getElementById("backward");
var Backward = function() {bgm.currentTime -= 10;
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
}
:root {
--color: black;
--hovercolor: white;
--backcolor: white;
--hoverbackcolor: black;
--transtime: 0.5s;
}
#controls {
position: absolute;
left: 0;
top: 45%;
width: 100%;
height: 30%;
font-size: 250%;
border: 1px solid var(--color);
border-radius: 20px;
overflow: hidden;
padding: 0;
background-color: var(--color);
}
.cp {
height: 25%;
width: 0;
overflow: hidden;
background-color: black;
}
.controls {
position: absolute;
top: 0;
width: 25%;
height: 100%;
border: 1px solid var(--color);
background-color: var(--backcolor);
color: var(--color);
line-height: 75%;
transform: rotateZ(0deg);
border-radius: 0;
transition: color var(--transtime), background-color var(--transtime);
text-align: center;
padding: 5%;
}
.controls:hover {
background-color: var(--hoverbackcolor);
color: var(--hovercolor);
}
#pause {
left: 25%;
line-height: 100%;
}
#backward {
left: 0;
line-height: 100%;
}
#autoskip {
right: 0;
}
#forward {
right: 25%;
line-height: 100%;
}
#autoskip {
line-height: 150%;
}
#skipline {
position: absolute;
left: 0;
top: 47.5%;
background-color: red;
height: 5%;
width: 100%;
transform: rotateZ(-45deg);
transition: var(--transtime);
}
<!DOCTYPE html>
<html>
<body>
<div id="controls">
<div id="15" class="cp">
<div id="backward" class="controls"><span class="rot"><span class = "button">↺</span></span>
</div>
</div>
<div id="22" class="cp">
<div id="pause" class="controls"><span class="button">| |</span></span>
</div>
</div>
<div id="33" class="cp">
<div id="forward" class="controls"><span class="rot"><span class = "button">↻</span></span>
</div>
</div>
<div id="44" class="cp">
<div id="autoskip" class="controls"><span class="button">⏩</span>
<div id="skipline"></div>
</div>
</div>
</div>
</body>
</html>
As you can see, the Backward button is not spinning when you press it.
Any help?
FYI: There is a lot of extra stuff in the code snippet, like CSS variables, but those are necessary.
Do you want this behaviour?
var spinner = document.querySelector("#spinner");
document.querySelector("button").onclick = function() {
spinner.style.animationName = "example";
setTimeout(function() {
spinner.style.animationName = "";
}, 4000);
};
#spinner {
width: 100px;
height: 100px;
display: flex;
flex-wrap: wrap;
background-color: red;
border-radius: 50%;
overflow: hidden;
animation-duration: 4s;
position: relative;
justify-content: center;
align-items: center;
}
#spinner div {
width: 50%;
height: 50%;
}
#spinner button {
position: absolute;
cursor: pointer;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
#keyframes example {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
<div id="spinner">
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="yellow"></div>
<button>Spin</button>
</div>
I am working on project to make percentage number increase and at the same time inside of the percentage number there is background color it needs to fill up according to percentage itself.
So far it is working but only background animation of itself. I mean if its 50 percent it needs to come half of the 50% number. if its 100 it needs to make color all the background of 100% number. Here are the relative code of the html and css.
var i = 0;
var perc = 0;
function buttonClick6() {
perc += 5;
document.getElementById('here').innerHTML = percentage(perc) + "%";
}
function buttonClick5() {
i += 5;
document.getElementById('demo').innerHTML = "€" + i;
}
function percentage(per) {
return (100 / 100) * per;
}
$(document).ready(function() {
var skillBar = $('.inner');
var skillVal = skillBar.attr("data-progress");
$(skillBar).animate({
height: skillVal
}, 2100);
});
body {
position: absolute;
width: 1670px;
height: 1030px;
font-family: arial;
background-color: black;
}
.outer {
width: 100%;
height: 386px;
overflow: hidden;
position: relative;
margin-top: 300px;
text-align: center;
}
.inner {
background: url(color3.jpg);
bottom: 0;
height: 0%;
width: 100%;
overflow: hidden;
animation: animateMid 15s linear infinite;
-webkit-background-clip: text;
position: absolute;
}
.inner h2 {
font-size: 500px;
margin-top: -95px;
color: rgba(225, 225, 225, .1);
}
#keyframes animateMid {
0% {
background-position: left 800px top 500px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="skill">
<div class="outer">
<div class="inner" data-progress="100%">
<h2 id="demo">0</h2>
<div></div>
</div>
</div>
</div>
<div class="perc">
<h3 id="here">0%</h3>
</div>
<button class="btn" onclick="buttonClick5(),buttonClick6()">Donate 5€</button>
The way you have added CSS or HTML is by adding the scrollbar. Remove the scrollbar and the whole animation will be in one frame.
var i = 0;
var perc = 0;
function buttonClick6() {
perc += 5;
document.getElementById('here').innerHTML = percentage(perc) + "%";
document.getElementById('demo2').style.height = (125 - percentage(perc)) + "%";
}
function buttonClick5() {
i += 5;
document.getElementById('demo').innerHTML = "€" + i;
document.getElementById('demo2').innerHTML = "€" + i
}
function percentage(per) {
return (100 / 100) * per;
}
$(document).ready(function() {
var skillBar = $('.inner');
var skillVal = skillBar.attr("data-progress");
$(skillBar).animate({
height: skillVal
}, 2100);
});
body {
position: absolute;
width: 1670px;
height: 1030px;
font-family: arial;
background-color: black;
}
.outer {
width: 100%;
height: 386px;
overflow: hidden;
position: relative;
margin-top: 300px;
text-align: center;
}
h3{
color: white;
}
.inner {
background: url(color3.jpg);
bottom: 0;
height: 0%;
width: 100%;
overflow: hidden;
animation: animateMid 15s linear infinite;
-webkit-background-clip: text;
position: absolute;
}
.inner h2 {
font-size: 500px;
margin-top: -95px;
color: #fff;
}
#keyframes animateMid {
0% {
background-position: left 800px top 500px;
}
}
p {
color: transparent;
font-size: 500px;
top: -95px;
left: 0;
z-index: 1;
width: 100%;
height: 130%;
margin: 0;
position: absolute;
font-weight: bold;
background: #2c2c2c;
background-clip: text;
-webkit-background-clip: text;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="skill">
<div class="outer">
<div class="inner" data-progress="100%" data-value="0">
<p id="demo2">0</p>
<h2 id="demo">0</h2>
<div></div>
</div>
</div>
</div>
<div class="perc">
<h3 id="here">0%</h3>
</div>
<button class="btn" onclick="buttonClick5(),buttonClick6()">Donate 5€</button>
I am trying to do a nice effect when the header leaves the current block. I want the background color and the color of the text to change when scrolling down.
html:
<header class="green">Logo</header>
<header class="red">Logo</header>
<section id='content1'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
<section id='content2'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
css:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
width: 100%;
position: fixed;
display: block;
top: 0;
font-size: 20pt;
padding: 15px 10px
}
.green {
background: green;
color: #000;
z-index: 2
}
.red {
background: red;
color: #fff;
z-index: 1
}
section {
position: relative;
height: 500px;
padding: 100px 10px
}
#content1 {
background: #D9D9D9;
z-index: 1
}
#content2 {
background: #9FDAD0;
z-index: 2
}
An example serves best, something like this https://www.dropbox.com/
Thanks!
So i redid it with some Javascript.
This effect is awesome, feel free to improve it if you like!
Is this possible to accomplish without Javascript?
const secondBlock = document.getElementById('content2')
const header = document.getElementsByTagName('header')
const headerHeight = 61
function setHeader () {
const scrollPoint = window.pageYOffset + headerHeight
let blockPoint = 61 - (scrollPoint - secondBlock.offsetTop)
if (blockPoint <= 0) { blockPoint = 0 }
if (scrollPoint > secondBlock.offsetTop) {
header[0].style = `max-height: ${blockPoint}px;`
} else {
header[0].style = `max-height: ${headerHeight}px;`
}
window.requestAnimationFrame(setHeader)
}
window.requestAnimationFrame(setHeader)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: block;
font-size: 20pt;
height: 61px;
line-height: 61px;
padding-left: 10px;
position: fixed;
top: 0;
width: 100%;
}
header#first {
background: #8292C3;
color: #000;
overflow: hidden;
z-index: 10;
}
header#second {
background: #82C3B9;
color: #fff;
z-index: 9;
}
section {
height: 500px;
padding: 100px 10px;
position: relative;
}
#content1 {
background: #96A6D5;
}
#content2 {
background: #99D6CC;
}
<header id='first'>Logo - <small>scroll down to see the magic!</small></header>
<header id='second'>Logo - <small>scroll down to see the magic! COOL!</small></header>
<section id='content1'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
<section id='content2'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
The smooth transition you're looking for can be done in CSS, but you'll need some JavaScript in order to initiate the animation.
window.onscroll = function(){
var top = window.scrollY;
console.log('Top: ' + top);
var header = document.getElementsByTagName('header');
var offset = header.innerHeight; //changed offset to be dynamic, so it works on mobile screens.
if(top > offset){
header[0].classList.remove('top');
header[0].classList.add('scrolled');
} else {
header[0].classList.remove('scrolled');
header[0].classList.add('top');
}
};
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
position: relative;
}
header {
width: 100%;
position: fixed;
height: 75px;
display: block;
top: 0;
z-index: 100;
font-size: 20pt;
padding: 15px 10px
}
header.top {
background: #222;
color: #fff;
transition: all 0.3s ease;
}
header.scrolled {
background: #555;
color: #e0e0e0;
transition: all 0.3s ease;
}
.green {
background: green;
color: #000;
z-index: 2
}
.red {
background: red;
color: #fff;
z-index: 1
}
section {
position: relative;
height: 800px;
padding: 100px 10px
}
#content1 {
background: #D9D9D9;
z-index: 1
}
#content2 {
background: #9FDAD0;
z-index: 2
}
<header class="top">Logo</header>
<section id='content1'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
<section id='content2'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
This basically says that when we scroll passed the height of the header (in this case 50px), remove the "top" class from it, and add the "scrolled" class from it. You can use the css selectors header.top and header.scrolled to do your transition animations. Be sure to use transition: background-color (time) (timing function), color (time) (timing function); to achieve the smoothness you're looking for.
You can change it with the class. Like i use this website.
http://www.moumaachi.com/
it has class like this
<div class="header-v2 navbar-fixed-top">
but when scroll down to 50 px then it will showa this
<div class="header-v2 navbar-fixed-top top-nav-collapse">
and normal it has
<div class="thiswillhide">
but when scroll down more then it wil like this
<div class="thiswillhide hidesearch">
you can use this code
<script>
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".header-v2").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
if ($(".header-v2").offset().top > 600) {
$(".thiswillhide").addClass("hidesearch");
} else {
$(".thiswillhide").removeClass("hidesearch");
}
});
</script>
thanks
I'm trying to fill a button with a diagonal effect on the mousemove (so the button is filled where the mouse is)
I have the effect of a diagonal fill on a hover:
.demo {
text-align: center;
margin-top: 150px;
}
.mt {
margin-top: 20px;
}
.small {
width: 120px;
}
.medium {
width: 160px;
}
.large {
width: 230px;
}
.extra-large {
width: 360px;
}
.diagonal {
position: relative;
display: inline-block;
line-height: 50px;
border: 1px solid black;
color: black;
background: white;
font-weight: book;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
z-index: 1;
padding: 0px;
}
.diagonal:after {
content: "";
position: absolute;
top: 30;
left: 0;
width: 500%;
height: 1000%;
background: #F5FF35;
z-index: -1;
transform-origin: 0% 0%;
transform: translateX(calc(-130% - 0px)) translateY(10%) rotate(45deg);
transition: transform 1s;
}
.diagonal:hover::after {
transform: translateY(-100%) translateX(-50px) rotate(45deg);
direction: ltr;
}
<div class="demo">
<a class="mt small diagonal">Click me!</a><br>
<button class="mt medium diagonal">Click me!</button><br>
<button class="mt large diagonal">Click me!</button><br>
<button id="demo" class="mt extra-large diagonal">Click me!</button>
</div>
Codepen
But I can't set it up on a mousemove, I have found something similar from an other question, fiddle.
Basically, I am trying to fit the codepen and the jsfiddle together
I tried to rotate the div in the jsfiddle but the fill effect would be all over instead of only the start, plus it would not cover the whole area..
You can try something like this:
$('.green').on('mousemove', function(e) {
if (e.pageX < $(this).width());
var percent = e.pageX - $(this).offset().left * 100 / $(this).width();
$(this).css({
'background': 'linear-gradient(45deg, rgba(0,0,0,1) 0%,rgba(0,0,0,1) ' + percent + '%,rgba(0,0,0,0) ' + (percent + 0.1) + '%,rgba(0,0,0,0) 100%)'
});
});
demo:https://jsfiddle.net/sdq5z7ej/4/
You could do this by mostly adjusting the CSS, basically rotating that green div.
var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.addEventListener("mousemove", fill);
parent.addEventListener("mouseleave", hasLeft);
function fill(e) {
if (e.x <= parent.offsetWidth) {
child.style.width = e.x + 'px';
}
};
function hasLeft(e) {
if (child.offsetWidth === parent.offsetWidth) {
} else {
child.style.width = '0px';
}
}
.wrapper {
overflow: hidden;
height: 60px;
width: 100px;
background-color: #FFFF00;
}
#parent {
height: 65px;
width: 100px;
transform: scale(2) rotate(-45deg);
}
#child {
height: 65px;
width: 0;
background-color: #00FF00;
}
<div class="wrapper">
<div class='orange' id='parent'>
<div class='green' id='child'>
</div>
</div>
</div>
JSFIDDLE
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 7 years ago.
When validating the jQuery I receive the followers 2 errors: "'$' was used before it was defined." & "'window' was used before it was defined." What does this mean & how do I remove these errors?
var lastScrollTop = 0;
$(window).scrollTop(0);
$(window).on('scroll', function() {
var header = $('header');
var content = $('content');
var headerBg = $('.header-bg');
var headerCnt = $('.header-content');
var scrollTop = $(window).scrollTop();
var dynHeaderVisible = false;
if (lastScrollTop > scrollTop) {
if (scrollTop <= 400) {
headerBg.css("height", 0);
headerCnt.css('color', 'white');
} else {
headerBg.css("height", 80);
headerCnt.css("height", 80);
headerCnt.css('color', 'black');
}
} else {
// Down
if (scrollTop > 350) {
console.log ("hi");
headerCnt.css("height", 0);
headerBg.css("height", 0);
}
}
lastScrollTop = scrollTop;
});
$.fn.isOnScreen = function(){
var element = this.get(0);
var bounds = element.getBoundingClientRect();
return bounds.top < window.innerHeight && bounds.bottom > 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
background:transparent;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: .3s color;
transition: .3s height;
}
header {
display: block;
position: fixed;
height: 80px;
width: 100%;
}
header ul {
z-index: 20;
}
.header-wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: transparent;
}
.header-bg,
.header-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
.header-bg {
z-index: 100;
color: gray;
background-color: white;
border-bottom: 1px solid black;
transition: .3s height;
height: 0;
}
.header-content {
z-index: 200;
transition: .3s color;
color: white;
background-color: transparent;
height: 80px;
transition: .3s height;
overflow: hidden;
list-style: none;
}
.logo {
position: absolute;
left: 47%;
color: inherit;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
font-size:.8em;
letter-spacing:0.05em;
transition: .3s color;
}
content {
display: block;
height: 2000px;
background-color: orange;
}
.stage {
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
background-color: white;
border-bottom: 1px solid black;
font-size: 48px;
height: 200px;
width: 100%;
}
.stage-0 {
background: grey;
height: 400px;
}
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<header>
<div class="header-wrapper">
<div class="header-bg"></div>
<div class="header-content">
<ul>
<li>
Logo
</li>
</ul>
</div>
</div>
</header>
<content>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>
</content>
You should wrap your Javascript in a 'document onready' block. Something like this:
jQuery(document).ready(function($) {
// your code here...
});
This will ensure that both the page and jQuery are loaded and ready before your code runs.