Maintain object visibility on height increase - javascript

How to fix object visibility on height scroll.
I have the following code below which grows height of the div based on user scroll. When you scroll down the spider image become invisible.
$(window).scroll(function() {
var bh = 100;
var height = $(window).scrollTop();
var sch = bh + height;
$('.webscroll').stop().animate({
'height': sch
}, 400)
if (height <= 19) {
$('.webscroll').stop().animate({
'height': 200
}, 600)
}
});
body {
background-color: #000;
height: 1200px;
}
.bottom_left_spider {
position: absolute;
width: 180px;
height: 200px;
left: 0;
top: 0;
z-index: 998
}
.webscroll {
height: 200px;
width: 1px;
border-right: 2px solid #2e2e2e;
position: absolute;
top: 0;
left: 101px;
z-index: 9999
}
.spidy {
position: absolute;
bottom: -51px;
left: -29px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bottom_left_spider">
<img src="https://s17.postimg.org/cc243pkrz/spiderweb.png">
<!-- spider web lines -->
<div class="webscroll">
<!-- spider line vertical -->
<img src="https://s21.postimg.org/tbdww9hzr/spidy.png" class="spidy">
<!-- spider image -->
</div>
</div>
A woking jsfiddle sample is here: https://jsfiddle.net/ppw9z6y2/

You can use css transitions for the animation, and just change the height by javascript:
.webscroll {
...
transition: height 50ms ease-in-out
}
var $webscroll = $('.webscroll')[0];
$(window).scroll(function() {
var bh = 100;
var height = window.scrollY;
var sch = bh + height;
if (height <= 19) {
$webscroll.style.height = '200px';
} else {
$webscroll.style.height = sch + 'px';
}
});
body {
background-color: #000;
height: 1200px;
}
.bottom_left_spider {
position: absolute;
width: 180px;
height: 200px;
left: 0;
top: 0;
z-index: 998
}
.webscroll {
height: 200px;
width: 1px;
border-right: 2px solid #2e2e2e;
position: absolute;
top: 0;
left: 101px;
z-index: 9999;
transition: height 50ms ease-in-out
}
.spidy {
position: absolute;
bottom: -51px;
left: -29px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bottom_left_spider">
<img src="https://s17.postimg.org/cc243pkrz/spiderweb.png">
<!-- spider web lines -->
<div class="webscroll">
<!-- spider line vertical -->
<img src="https://s21.postimg.org/tbdww9hzr/spidy.png" class="spidy">
<!-- spider image -->
</div>
</div>
http://caniuse.com/#feat=css-transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
By looking your example, I think you want the spider to start moving after the scroll have ended, so if that's the case, check this: jQuery scroll() detect when user stops scrolling

Try moving the spider outside of its parent div and giving it a fixed position in the bottom corner; it should stay there regardless of scrolling. (You may need to tweak the behavior of the scroll/web line to look right.)

Same as hector22x. Increasing the duration to 100ms and add a 100ms delay to make it move smoothly.
var $webscroll = $('.webscroll')[0];
$(window).scroll(function() {
var bh = 100;
var height = window.scrollY;
var sch = bh + height;
if (height <= 19) {
$webscroll.style.height = '200px';
} else {
$webscroll.style.height = sch + 'px';
}
});
body {
background-color: #000;
height: 1200px;
}
.bottom_left_spider {
position: absolute;
width: 180px;
height: 200px;
left: 0;
top: 0;
z-index: 998
}
.webscroll {
height: 200px;
width: 1px;
border-right: 2px solid #2e2e2e;
position: absolute;
top: 0;
left: 101px;
z-index: 9999;
transition: height 100ms ease-in-out 100ms
}
.spidy {
position: absolute;
bottom: -51px;
left: -29px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bottom_left_spider">
<img src="https://s17.postimg.org/cc243pkrz/spiderweb.png">
<!-- spider web lines -->
<div class="webscroll">
<!-- spider line vertical -->
<img src="https://s21.postimg.org/tbdww9hzr/spidy.png" class="spidy">
<!-- spider image -->
</div>
</div>

Related

How to center with javascript an element on y?

I am trying to make a sticky banner witn html and css and js. My html is this
window.addEventListener('scroll', function(ev) {
var distanceToTop = container.getBoundingClientRect().top;
if (container.getBoundingClientRect().top >= document.documentElement.scrollTop - screen.height + 400) {
sticky.style.top = "100px"
} else {
sticky.style.top = document.documentElement.scrollTop - screen.height + 400 + "px";
}
});
.container {
background: red;
width: 600px;
height: 100px;
position: relative;
}
.sticky {
background: blue;
width: 200px;
height: 200px;
position: absolute;
right: 0;
top: 100px;
}
<div class="container">
<div class="sticky"></div>
</div>
I would want when i scroll the window the stocky div to be center on y axis and when the distance between container and top of the page is less then 200px the two divs to be attached.
Can anyone to give me a clue?

Text Center on Progress Bar

I am trying to place the percentage total in the center of the colored progress bar but am struggling to do so.
I have tried placing the <p> tag within the different <div> tags but can't quite work it out.
Can anyone help?
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
vertical-align: middle;
line-height: 50px;
padding-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
</div>
<p class="progress-value progress-size alt text-center">25%</p>
You can just position the text absolutely inside the bar and then set the right to 100 minus the percentage:
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
$('.progress-value').stop().animate({
right: 100 - $('.progress-wrap').data('progress-percent') + '%'
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
line-height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 100%;
text-align:center;
margin:0;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
<p class="progress-value alt text-center">25%</p>
</div>
You don't need positioning here. Simply put your .progress-value element into the wrapper and use the padding-left attribute to animate the percentage value as well. To center the value, you can i.e. use an offset and half of your total progress value: (progressTotal-15)/2
Here is the working example:
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
$('.progress-value').stop().animate({
paddingLeft: (progressTotal-15)/2
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
<p class="progress-value progress-size alt text-center">25%</p>
</div>
Please check, hope this will helpful form you
https://codepen.io/Thakur92411/pen/aRoEoa1
<div class="progress-wrap" data-progress-percent="25">
<div class="valuetext">25%</div>
<div class="progress-bar progress-value progress-size"></div>
</div>

Changing Div content of fixed div using jquery scrollify

I have a fixed DIV and 3 sections A,B,C.
I'm using jquery scrollify for changing data of sections and I want to change specific div data on scroll of mouse wheel.
As you know, scrollify allow us to scroll a section on mouse wheel rotation, when section change I need to update that fixed div data withn respective section contents
section height and width will be screen height and screen width,
I asked almost the same question with using scrollify website example and I didnt get any response, so I decided to ask again with graphical example
This is parallax what you need to do is to look at this example
http://codepen.io/hudsonmarinho/pen/FHGeK
function scrollFooter(scrollY, heightFooter)
{
console.log(scrollY);
console.log(heightFooter);
if(scrollY >= heightFooter)
{
$('footer').css({
'bottom' : '0px'
});
}
else
{
$('footer').css({
'bottom' : '-' + heightFooter + 'px'
});
}
}
$(window).load(function(){
var windowHeight = $(window).height(),
footerHeight = $('footer').height(),
heightDocument = (windowHeight) + ($('.content').height()) + ($('footer').height()) - 20;
// Definindo o tamanho do elemento pra animar
$('#scroll-animate, #scroll-animate-main').css({
'height' : heightDocument + 'px'
});
// Definindo o tamanho dos elementos header e conteúdo
$('header').css({
'height' : windowHeight + 'px',
'line-height' : windowHeight + 'px'
});
$('.wrapper-parallax').css({
'margin-top' : windowHeight + 'px'
});
scrollFooter(window.scrollY, footerHeight);
// ao dar rolagem
window.onscroll = function(){
var scroll = window.scrollY;
$('#scroll-animate-main').css({
'top' : '-' + scroll + 'px'
});
$('header').css({
'background-position-y' : 50 - (scroll * 100 / heightDocument) + '%'
});
scrollFooter(scroll, footerHeight);
}
});
#scroll-animate
{
overflow: hidden;
}
#scroll-animate-main
{
width: 100%;
left: 0;
position: fixed;
}
#heightPage,
#heightScroll
{
width: 10px;
top: 0;
position: absolute;
z-index: 99;
}
#heightPage
{
left: 0;
}
#heightScroll
{
right: 0;
}
header
{
width: 100%;
height: 100%;
background: url(https://raw.githubusercontent.com/hudsonmarinho/header-and-footer-parallax-effect/master/assets/images/bg-header.jpg) no-repeat 50% 50%;
top: 0;
position: fixed;
z-index: -1;
}
footer
{
width: 100%;
height: 300px;
background: gray;
bottom: -300px;
position: fixed;
z-index: -1;
}
.content
{
height: 1000px;
min-height: 1000px;
background: #ededed;
position: relative;
z-index: 1;
}
.wrapper-parallax {
margin-top: 100%;
margin-bottom: 300px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
h1{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-transform: uppercase;
text-align: center;
font-family: Helvetica;
font-size: 150px;
color: #fff;
}
header h1{}
.content h1{
line-height: 1000px;
color: #999;
}
footer h1
{
line-height: 300px;
}
header,
footer,
#scroll-animate-main
{
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1);
-moz-transition-timing-function: cubic-bezier(0, 0, 0, 1);
transition-timing-function: cubic-bezier(0, 0, 0, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll-animate">
<div id="scroll-animate-main">
<div class="wrapper-parallax">
<header>
<h1>Header</h1>
</header>
<section class="content">
<h1>Content</h1>
</section>
<footer>
<h1>Footer</h1>
</footer>
</div>
</div>
</div>

Fixing the right button of a vanilla Javascript carousel

Against all reason, I'm trying to create a vanilla JavaScript carousel.
I am having two problems:
1. The images move left at widths of -680px as they should but when I tried to create the same function for the right button, the left value goes to 1370px making the picture off the screen.
2. I would like for it to slide left rather jump left (same for right), I managed to get it to do this but it doesn't work on the first slide, only from the second slide.
Here is the HTML code just for the carousel:
<div id = "container">
<div id = "carousel">
<div class = "slide"><img class = "slideImage" class = "active" src = "sithCover.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthVader.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthSidious.png"></div>
<div class = "slide"><img class = "slideImage" src = "kyloRen.png"></div>
</div>
</div>
<div id = "left" class = "button"></div>
<div id = "right" class = "button"></div>
Here is the CSS code:
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow:hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position:relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
Here is the JavaScript:
var carousel = document.querySelector('#carousel');
var firstVal = 0;
document.querySelector('#left').addEventListener("click", moveLeft);
function moveLeft (){
firstVal +=685;
carousel.style.left = "-"+firstVal+"px";
};
document.querySelector('#right').addEventListener("click", moveRight);
function moveRight() {
firstVal +=685;
carousel.style.left = "+"+firstVal+"px";
};
Here is a JSFiddle so that you can see what I mean:
"https://jsfiddle.net/way81/8to1kkyj/"
I appreciate your time in reading my question and any help would be much appreciated.
Ofcourse it goes from -685px on left click and then to +1370pxthe next right click; You are always adding 685 to your firstVal variable.
firstVal = 0
//firstVal is worth 0
moveLeft()
//firstVal is now worth 685
moveRight()
//firstVal is now worth 1370.
The problem is that when you apply the firstVal to your CSS thing in the javascript, you create a string to get your negative value (where you apply the "-" sign infront of firstVal)
Instead, write them like this
function moveLeft (){
firstVal -=685; //note we now subtract, the "-" should appear when the number becomes negative
carousel.style.left = firstVal + "px";
};
function moveRight() {
firstVal +=685;
carousel.style.left = firstVal + "px";
};
var left = document.getElementById("left");
left.addEventListener("click", moveLeft, false);
var right = document.getElementById("right");
right.addEventListener("click", moveRight, false);
var carousel = document.getElementById("carousel");
var images = document.getElementsByTagName("img");
var position = 0;
var interval = 685;
var minPos = ("-" + interval) * images.length;
var maxPos = interval * images.length;
//slide image to the left side <--
function moveRight() {
if (position > (minPos + interval)) {
position -= interval;
carousel.style.left = position + "px";
}
if (position === (minPos + interval)) {
right.style.display = "none";
}
left.style.display = "block";
}
//slide image to the right side -->
function moveLeft() {
if (position < (maxPos - interval) && position < 0) {
position += interval;
carousel.style.left = position + "px";
}
if (position === 0) {
left.style.display = "none";
}
right.style.display = "block";
}
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow: hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position: relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
display: none;
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
<div id="container">
<div id="carousel">
<div class="slide">
<img class="slideImage" class="active" src="sithCover.png" alt="slide1">
</div>
<div class="slide">
<img class="slideImage" src="darthVader.png" alt="slide2">
</div>
<div class="slide">
<img class="slideImage" src="darthSidious.png" alt="slide3">
</div>
<div class="slide">
<img class="slideImage" src="kyloRen.png" alt="slide4">
</div>
</div>
</div>
<div id="left" class="button"></div>
<div id="right" class="button"></div>

How to rotate a chart 90 degrees including the text values?

I have the following progress bar, but I'd like it to go vertically instead of horizontally. In other words, I'd like to flip it 90 degrees and have the text flipped by 90 degrees as well
See my code below, as well as my code pen here:
http://codepen.io/chriscruz/pen/jPGMzW
How would I rotate this chart as well as the text value?
HTML
<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="50">
<div class="progress-bar-state progress">50</div>
</div>
CSS
.progress {
width: 100%;
height: 50px;
}
.progress-wrap:before {
content: '66';
position: absolute;
left: 5px;
line-height: 50px;
}
.progress-wrap:after {
content: '$250,000';
right: 5px;
position: absolute;
line-height: 50px;
}
.progress-wrap {
background: #f80;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-wrap .progress-bar-state {
background: #ddd;
left: 0;
position: absolute;
top: 0;
line-height: 50px;
}
Javascript
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 2500;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar-state').stop().animate({
left: progressTotal
}, animationLength);
}
CSS
.progress {
height: 500px;
width: 50px;
}
.progress-wrap:before {
content: '66';
position: absolute;
top: 5px;
line-height: 50px;
}
.progress-wrap:after {
content: '$250,000';
bottom: 5px;
position: absolute;
line-height: 50px;
}
.progress-wrap {
background: #f80;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-wrap .progress-bar-state {
background: #ddd;
left: 0;
position: absolute;
top: 0;
line-height: 50px;
}
Javascript
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').height();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 2500;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar-state').stop().animate({
top: progressTotal
}, animationLength);
}
Pretty much its just switching the height and widths as well as the lefts with tops and rights with bottoms.
You can rotate text or anything else using this css rule.
transform: rotate(90deg); /* this is the rotation */
Use -90deg to rotate the other way.

Categories