jQuery animate on scroll backgroundColor not changing - javascript

My fiddle: https://jsfiddle.net/jzhang172/owkqmtcc/5/
What I'm trying to accomplish: When I scroll anywhere in the div, the background color of the div "content" will change. When the scroll rests at top of the div, it reverts back to its original color. When I added height instead of background color, it works fine, but not sure why background color ain't working:
$(function(){
var content = $(".content");
$(".box").scroll(function(event){
var positionofscroll = $(".content").scrollTop();
if(positionofscroll == 0){
content.stop().animate({
backgroundColor:"rgba(105, 63, 63, 0.69)"
},500);
}else {
content.stop().animate({
backgroundColor:"red"
},500);
}
}); //scroll
});
.box{
width:100%;
height:500px;
background:gray;
overflow:auto;
}
.content{
color:white;
display:flex;
justify-content:center;
align-items:center;
height:1000px;
background:red;
font-size:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!--Shadow Box when user scrolls -->
<div class="box">
<div class="content">
I'm content
</div>
</div>

Try including jQuery UI , as .animate() does not animate color without modifications or a color plugin; see .animate()
Animation Properties and Values
All animated properties should be animated to a single numeric
value, except as noted below; most properties that are non-numeric
cannot be animated using basic jQuery functionality (For example,
width, height, or left can be animated but background-color
cannot be, unless the jQuery.Color plugin is used).
also adjusting selector at positionofscroll to $(this).scrollTop(); changing comparison operator to > at if
$(function() {
var content = $(".content");
$(".box").scroll(function(event) {
var positionofscroll = $(this).scrollTop();
console.log(positionofscroll);
if (positionofscroll > 0) {
content.stop().animate({
backgroundColor: "rgba(105, 63, 63, 0.69)"
}, 500);
} else {
content.stop().animate({
backgroundColor: "red"
}, 500);
}
}); //scroll
});
.box {
width: 100%;
height: 500px;
background: gray;
overflow: auto;
}
.content {
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
background: red;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<!--Shadow Box when user scrolls -->
<div class="box">
<div class="content">
I'm content
</div>
</div>

Try this:
var content = $(".content");
$(".box").scroll(function(event)
{
var positionofscroll = $(this).scrollTop();
if (positionofscroll > 0)
{
$(".content").css('background-color','rgba(105, 63, 63, 0.69)');
}
else
{
$(".content").attr('style','');
}
});
Fiddle: https://jsfiddle.net/4fc6pook/
If you want to animate the change of the background color, add some css to .content:
transition: all 0.3s ease-out;
or something similar.
Hope this helps!

Related

Change fixed background depending by child div

I am trying to change the background image of the parent div depending on which child div am I scrolling. I tried in the past to work with scrollY but no luck because is no responsive at all.
Basically I want when the user scroll and is on graphic-interior-design to have image 1when is on graphic-architecture to have image 2 and so on. However, I need to keep all the images fixed to the top of the long-container.
$(window).scroll(function() {
console.log(scrollY)
if (window.scrollY > 9600) {
$(".graphic-augumented-reality-page").addClass("backgroun-img-augumented-reality")
$(".graphic-augumented-reality-page").removeClass("background-img-arhitecture")
}
else{
$(".graphic-augumented-reality-page").addClass("background-img-arhitecture")
$(".graphic-augumented-reality-page").removeClass("backgroun-img-augumented-reality")
}
});
.long-container{
background-attachment: fixed;
background-position: top;
background-image: url('https://www.gstatic.com/webp/gallery3/2.png');
background-color:white;
}
.graphic-interior-design, .graphic-arhitecture,.graphic-augumented-reality{
height: 100vh;
}
<div class="long-container">
<div class="graphic-interior-design"></div>
<div class="graphic-arhitecture"></div>
<div class="graphic-augumented-reality"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
This is the method that I tried but I find out is not a good idea to use scrolls. Instead of ScrollY I want to change position depending by the child div scroll position .
I changed the images to colors, but I think this should help you.
$(window).scroll(function() {
var run = true;
var color = 'blue';
$('.long-container > div').each(function(){
var top = $(this).position().top;
if(window.scrollY < top && run){
color = $(this).attr('data-image');
$('.long-container').css('background', color );
run = false;
}
})
})
.long-container{
background-attachment: fixed;
background-position: top;
background: blue;
}
.graphic-interior-design, .graphic-arhitecture,.graphic-augumented-reality{
height: 100vh;
outline: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="long-container">
<div class="graphic-interior-design" data-image="blue"></div>
<div class="graphic-arhitecture" data-image="green"></div>
<div class="graphic-augumented-reality" data-image="red"></div>
</div>

How do I prevent scroll back up with JavaScript or jQuery?

I have a webpage where there is a full height intro image. Underneath this image is the main body of the site with a regular site header at the top, I'm trying to create an effect where once the user scrolls down to the site header, they cannot scroll back up to view the intro image.
CSS Classes:
Main Intro Image: .cq-fullscreen-intro
Site Header: .nav-down
I had a poke around on StackOverflow but I can't find anything that addresses this circumstance, can anyone point me in the right direction to achieve this using jQuery?
you can use JQuery scrollTop function like this
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// set the height in pixels
if (scroll >= 200) {
// after the scroll is greater than height then you can remove it or hide it
$(".intro-image").hide();
}
});
});
So instead of scrolling, I personally think it would be better to have it be actionable. Forcing the user to manually do the transition (and all in between states) is a bad idea. If the user scrolls half way, and see's something actionable (menu, button, input field) is it usable? If it is, what happens if they submit... very awkward. If it isn't usable, how do they know when it is? How do they know it's because they haven't scrolled all the way. It's very poor user experience.
In the following example, I've created a pseudo-screenport for you to see what's actually going on. The .body container in your real site would be the body element.
Code Pen Example
$(document).ready(function(){
$('.splash-screen').on('click', function(){
$('.splash-screen').addClass("is-hidden");
});
})
html, body{
background: #eee;
margin: 0;
padding: 0;
}
.flex-root {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.web-container {
width: 640px;
height: 480px;
background: #fff;
}
.body {
font-size: 0; // this is only to prevent spacing between img placholders
position: relative;
}
.splash-screen{
position: absolute;
transition: transform 1s ease-in-out;
}
.splash-screen .fa {
position: absolute;
z-index: 1;
font-size: 24px;
color: #fff;
left: 50%;
bottom: 15px;
}
.splash-screen.is-hidden {
transform: translateY(-110%);
transition: transform 1s ease-in-out;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-root">
<div class="web-container">
<div class="body">
<div class="splash-screen">
<img src="https://via.placeholder.com/640x480?text=Splash+Screen"/>
<i class="fa fa-chevron-circle-up"></i>
</div>
<img src="https://via.placeholder.com/640x60/cbcbcb?text=Menu"/>
<img src="https://via.placeholder.com/640x420/dddddd?text=Site Body"/>
<div>
</div>
</div>
While its not direclty preventing you from scrolling up and its not jQuery, I would suggest to remove/hide the element once its out of view.
You could get the current scroll position, relative to the top of the page, and check if its greater than the elements height:
const target = document.getElementById('my-target')
const targetHeight = target.getBoundingClientRect().height
const scrollEventListener = () => {
if (
document.body.scrollTop > targetHeight ||
document.documentElement.scrollTop > targetHeight
) {
target.remove()
window.removeEventListener('scroll', scrollEventListener)
document.documentElement.scrollTop = 0
}
}
window.addEventListener('scroll', scrollEventListener)
Here is a codepen https://codepen.io/bluebrown/full/aboagov

Slider transitions with GSAP and Scrolling

Hi I'm trying to replicated the transitions on this pages sections http://cuberto.com
using TweenMax.
var slides=document.querySelectorAll('.slide');
var tl=new TimelineLite({paused:true});
for(var i=slides.length;i--;){
var D=document.createElement('div');
D.className='Dot';
D.id='Dot'+i;
D.addEventListener('click',function(){ tl.seek(this.id).pause() });
document.getElementById('Dots').appendChild(D);
tl.add('Dot'+i)
if(i>0){
if(i!=slides.length-1)
{
tl.addPause()
}
tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"})
.fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut})
.to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0)
.set(slides[i],{ background: "none"})
.fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3)
.to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i)
.set(slides[i],{zIndex:1-i})
.set(slides[i-1],{zIndex:slides.length})
.to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6)
.fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6)
};
};
full code at codepen can be found here
I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation.
I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing.
How ever I am getting in an awful mess with the scroll event firing an animation on all the slides.
I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery.
I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for.
I could really do with a a resolution I can go to my client with, or at least a direction I could go in.
Thanks
You could use animate.css.There are so many animation available whatever you want you can use.
Demo
function onNextClick() {
var button = document.getElementById('next'),
index = button.getAttribute('index'),
divs = document.getElementsByClassName('main-div')[0].getElementsByTagName('div');
index++;
if (index == 3) {
index = 0;
}
for (var i = 0; i < divs.length; i++) {
divs[i].classList.remove('show');
divs[i].classList.add('hide');
}
divs[index].classList.remove('hide');
divs[index].classList.add('show');
button.setAttribute('index', index);
}
.main-div {
width: 100%;
display: inline-block;
}
.next {
background: transparent;
border: 0px;
color: blue;
font-size: 28px;
text-transform: capitalize;
text-decoration: underline;
margin: 15px;
}
.main-div div {
width: 100%;
height: 250px;
color: #3c3c3c;
font-size: 56px;
text-align: center;
}
.show {
display: block;
}
.hide {
display: none;
}
.div-one {
background: pink;
}
.div-two {
background: green;
}
.div-three {
background: yellow;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
<div class="main-div">
<div class="div-one show animated bounceInRight">
1
</div>
<div class="div-two hide animated bounceInRight">
2
</div>
<div class="div-three hide animated bounceInRight">
3
</div>
<button id="next" onclick="onNextClick()" index="0" class="next">next</button>
</div>

How to make vertical "slide" scroll?

I have a landing page, consisting of three frames, this frames always take 100% of viewport height and width.
I need to make transitions between frames, like "powerpoint presentation" etc. User scroll's, frame-1 slides up above viewport and frame-2 becomes in his place from bottom of viewport. I have almost zero experience in javascript/jquery. Have some ideas, that you can see in the code, but this ideas not works.
HTML:
<div class="wrapper" id="wrapper">
<div class="frame frame-1">
<!-- Content here -->
</div>
<div class="frame frame-2">
<!-- Content here -->
</div>
<div class="frame frame-3">
<!-- Content here -->
</div>
</div>
CSS:
.wrapper {
height: 300vh;
}
.frame {
position: fixed;
height: 100vh;
transition: all 1s ease;
}
.frame-1 {
top: 0vh;
}
.frame-2 {
top: 100vh;
}
.frame-3 {
top: 200vh;
}
JS:
var $document = $(document),
$element1 = $('.frame-1'),
$element2 = $('.frame-2'),
$element3 = $('.frame-3');
$(window).scroll(function () {
if ($(this).scrollTop() >= 50) {
$element1.css("top", "-100vh");
$element2.css("top", "0vh");
$element3.css("top", "100vh");
} else if ($(this).scrollTop() >= 100) {
$element1.css("top", "-200vh");
$element2.css("top", "-100vh");
$element3.css("top", "0vh");
} else {
$element1.css("top", "0vh");
$element2.css("top", "100vh");
$element3.css("top", "200vh");
}
});
If you have a set number of frames, I would suggest placing them all in a single div, and changing the top value of that. that way, only one value need be modified.
Like this: http://jsfiddle.net/xkh4D/10/
(Note that, though px are used, vh or whichever other unit should work just as well... haven't tried %, though...)
HTML
<div id='yo' class='view'>
<div>
<div class='frame red'></div>
<div class='frame green'></div>
<div class='frame blue'></div>
</div>
</div>
<input type='button' value='Scroll' onclick='scrollFrame()'/>
CSS
.view {
position:relative;
width:300px;
height:250px;
border:1px solid black;
overflow:hidden;
}
.view > div {
position:absolute;
width:inherit;
height:inherit;
top:0px;
}
.frame {
width:inherit;
height:inherit;
}
.red { background-color:#faa }
.green { background-color:#afa }
.blue { background-color:#aaf }
JavaScript
scrollFrame = function()
{
var h = $('#yo').height();
var y = parseFloat($('.view > div').css('top'));
var hsum = $('.view .frame').length * h;
console.log('h,y,hsum',h,y,hsum);
if (hsum-h == -1*y)
$('.view > div').animate({'top':0});
else
$('.view > div').animate({top:y-h},500);
}
This js could be your solution
http://alvarotrigo.com/fullPage/

expanding a div to reveal overflow on click

I am looking at this example on this website. I wanted to create an effect similar like that where you have a <div> that has some <p> in it and there's a button to show the full expanded description. I've analyzed the html and it looks like this:
<div class="product-description">
<div class="desc-wrap" itemprop="description">
<p>Material: wool
<br>6 Colors: Black, Yellow, Gray, Wine Red, Green, Navy Blue
<br>Size: One size only
<br>Recommended for size SMALL
<br>It has been noted by customers that these skirts are short.
<br>*Please check the measurement picture for sizing information. There are no refunds on orders that were messed up on your behalf.
</p>
<p>Note: Due to the difference between different monitors, the color may be off a tiny bit.</p>
<p>WORLDWIDE SHIPPING!
</p>
</div>
<div class="desc-fade"></div>
<div class="open-link" style="display: block;">Expand Full Description</div>
</div>
I assume that there's a javascript function that expands the box on click. But what is that? How do I reproduce this same effect?
Here's an example for exectly what you wanted: http://jsfiddle.net/kedem/D9NCP/
css:
.product-description {
height:150px;
overflow: hidden;
position:relative;
}
.product-description.open {
height:auto;
overflow: hidden;
position:relative;
}
.desc-fade {
width: 200%;
margin-left: -50%;
height: 30px;
background: #fff;
z-index: 1;
position: absolute;
-webkit-box-shadow: 0 0 20px 30px #fff;
-moz-box-shadow: 0 0 20px 30px #fff;
box-shadow: 0 0 20px 30px #fff;
bottom: 0;
left: 0;
opacity: 1;
-webkit-transition: opacity 250ms, 1s;
-moz-transition: opacity 250ms, 1s;
-o-transition: opacity 250ms, 1s;
transition: opacity 250ms, 1s;
}
.open-link {
position:absolute;
bottom: 15px;
z-index:2;
}
jquery:
$(function () {
var wrapHeight = $(".product-description .desc-wrap").height();
var descHeight = $(".product-description").height();
if (wrapHeight <= descHeight) {
$(".product-description .desc-fade").hide();
$(".product-description .open-link").hide();
}
$(".product-description .open-link").click(function () {
$(this).hide();
$(".product-description .desc-fade").hide();
$(".product-description").animate({
height: wrapHeight
}, 1000);
});
});
Does this works for you?
JSFIDDLE Demo
HTML
<div class="div-wrapper">
<div class="hider">
<p>Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown </p>
</div>
Show all
</div>
CSS
/* this first one is not necesary */
.div-wrapper {
width:300px;
border:solid 1px #000;
}
.div-wrapper>.hider {
height: 100px;
transition: ease-in-out all 0.2s;
overflow:hidden;
}
JQUERY
$(document).ready(function(e) {
$('.open-link').click(function(e) {
var $wrapper = $(this).parent().find('.hider');
$wrapper.css('height',$wrapper.find('p').height());
$(this).remove();
})
});
let me know if it's useful.
Using DOM inspector, it will help you understanding the trick. First they use a constant height for the container. Onclick remove the text and expand the div by setting a bigger height.
However, we have to determine the total height of the div so we shouldn't hide the expanded part from the start
http://jsfiddle.net/2SMF2/2/
$('.expand').click(function () {
$('#test').removeClass('collapsed', 'fast')
$(this).remove();
});
How about this:
http://jsfiddle.net/VvBRh/
What I have done:
$('.open-link a').click(function(){
if($(".desc-wrap").css("height") == "60px") {
//Find auto height of div and save it
$('.desc-wrap').css('height', 'auto');
var autoHeight = $('.desc-wrap').height();
//Revert back to 2 lines
$('.desc-wrap').css('height', '60px');
//Animate to the saved autoHeight
$(".desc-wrap").animate({height: autoHeight}, 1000);
} else {
//Shrink back to 2 lines (you can remove this if you want)
$(".desc-wrap").animate({height: "60px"}, 1000);
}
return false;
});
You will also need to add a little css to get inital settings:
.desc-wrap { height: 60px; overflow: hidden }
I'm sure this could be more elegant, and you could derive the height of 2 lines instead of fixed px, but I'll leave that up to you to decide ;)
Here is the complete code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
var $divView = $('div.view');
var innerHeight = $divView.removeClass('view').height();
$divView.addClass('view');
$('div.slide').click(function() {
$('div.view').animate({
height: (($divView.height() == 110)? innerHeight : "110px")
}, 500);
return false;
});
});
</script>
<style>
.view{
overflow:hidden;
height: 110px;
}
.total{
border:1px solid;
/*height:130px;
overflow-y:auto;*/
}
</style>
</head>
<body>
<div class="total">
<div class="view">
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
</div>
<div class="slide" style="cursor: pointer;">Show/Hide</div>
</div>
</body>
</html>

Categories