I'm completely new to jquery so please bear with me.
I've managed to make the following carousel plugin to work, but I have one minor issue. Whenever I click between slides, the preceding slide or the slide that would "come next" to the slide in either direction, flies across the back of the current slide.
This would not be an issue if the image is completely opaque, but I'm working with transparent backgrounds, so you can really notice the flying across the back.
My question - Is there anyway to disable the "flying across" of slides that are not displayed? or maybe to have the slide move across more discreetly?
Any help would truly be much appreciated...
Thanks very much!
PS: All credit for this carousel to the Filament Group :)
http://jsfiddle.net/HCHS8/
<div style="margin: 0px auto;">
<center>
<div class="carousel arrows" data-transition="slide" style="height: 300px;">
<div>TEST SLIDE 1 Text here, but if you click to move to next slide, other slide wipes behind (if clear background)</div>
<div>TESTING SLIDE 2</div>
</center>
Instead of trying to change the code, you can just fix the problem with simple CSS. Check this fiddle. I updated some CSS rules for your classes that are used for non active items. looks like now it's working the way you want. http://jsfiddle.net/HCHS8/1/
.carousel-item-prev, .carouse-item-next {
opacity:0;
}
Related
So my problem here is that I want to make a slider in parentDiv but I make a simple example which is when I click the item it will become the main screen of the screen border...but in opposite when I click it over again it will turn back.. I'm using gsap but you don't have to worried about the gsap functionality because I just used it to make it simplier my animation but the logics of positioning does matter to me.
Here's the codepen.
https://codepen.io/yowyow3322/pen/GRQVevr
Also I put something here in the div just to make it more clarify.
<!-- <div class="parentDiv"> -->
<div class="stapler stapler1"></div>
<div class="stapler stapler2"></div>
<div class="stapler stapler3"></div>
<!-- </div> -->
So what's my point here? I want to make the stapler slider but that will be absolutely impossible because parentDiv is a position relative so that it will not off bounds the items when I will create it for sliding. It kind of seems impossible to me but I saw it somewhere in Pinterest which close to the idea of it.
As each div will be a layer on it's own, You need to manage that each layer should has a z-index more than the last layer by one. you can do that by JS
Please bare with my poor drawing.
As you can see from the image below. I am using a bootstrap Carousel control which is reference from
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
Within the control I am setting the carousel as
<div class="carousel carousel-fade slide home-slider....>
....
</div>
which would make it have the effect of fade-in and fade-out on sliding.
And I am making the "Front element" (in red) sits on the top of the carousel by making its "style='margin-top:-40px'"
My issue here is that every time the sliding animation triggered, the front element is having this fade-in/out effect as well which is not desirable.
How can I make the front element as non-flashing while keeping the background carousel has the effect. Is that possible?
Thanks
create a custom-container div with position:relative and put the Carousel inside the container, then make your Front element as position: absolute and put it in the container Out of the Carousel. so the place of your Front element is after last Carousel closed tag and before the container closed tag.
structure:
<div clas="container" style="position:relative">
[Carousel]
<fronElement style="position: absolute;bottom:40px" ></frontElement>
</div>
Pausing. I essentially need to use skrollr.js to pause on a div i have, that contains an image. I know this probably isn't that difficult but I just can't seem to get it right. So could someone please just explain briefly how to make this happen?
<div> Something </div>
<div> <img> </div> <-----div to pause on for a little while
<div> Something else </div>
taken from this tutorial.
Pausing a scrolling animation
Lets say we want to freeze each of the slides for 50% of the viewport height.
In other words we don’t want the Slide 2 and 3 move for a while and then scroll to the next slide.
We can include empty data attributes to create a keyframe and change the animation offsets.
The updated data-attributes would like this:
<div id="slides"
data-0="transform:translate(0%,0%);"
data-50p=""
data-150p="transform:translate(0%,-50%);"
data-200p=""
data-300p="transform:translate(-50%,-50%);"
data-350p=""
data-450p="transform:translate(-50%,0%);"
>
Now every slide stays fixed for a while before scrolling to the next one.
I have a very simple page, there are a few stacks of divs and each div has and image inside of it.
Each stack will fadeIn depending on the scroll position, the top stack has an object that overlaps the bottom stack and for some reason during the animation, the z-index changes.
here's the JSBIN, try clicking the fadeIn/fadeOut button and notice how the plate briefly went behind the bottom stack when it's transitioned.
http://jsbin.com/wefediti/1/
please help.
Since your jQuery.each() and therefore the fading animation will be processed synchronously, it is not possible with your approach to make them fade at the very same time.
I suggest you combine those images in the same div and fade them if it is possible for you:
DEMO
function fadePages(num) {
$(".page").animate({
opacity: num
}, 1000*(num+1));
}
do same at same time. It works.
It's a thing of positioning of your divs
I edited. All you need to do is stack your divs right and then re-edit your absolute position. But it works
EDITED CODE
Let me be more specific.
change the order of your divs liek so:
<div class="page1">
<img src="http://i.imgur.com/BleOC.jpg">
</div>
<div class="page">
<div class="bg"></div>
</div>
and that will fix you z-index problem. I made a different call for each div from the JS as well, But that was for testing purposes. I think you're fine with one call
I made the positioning edits as well HERE
But it seems like everyone is modifying it, so hurry up before someone else messes it up lol
http://www.kflap.com/articles.php?id=2
As you can see when clicking on a number, the title fades in alright but the text just appears below instead of sliding into place. When closing however, the text slides back perfectly. I understand this may be a weird technicality due to the fade in and slide toggle being related.
JQUERY
$(document).ready(function(){
$(".revealHeader").click(function(){
$(".revealTitle", this).fadeIn("fast");
$(this).nextAll(".revealText").first().slideToggle();
});
});
HTML
<div id="reveal">
<span class="revealHeader">10. <span class="revealTitle">EXAMPLE</span></span>
<span class="revealText"><img src="EXAMPLE.JPG" /></span>
Please be aware I am terrible with jQuery as I stupidly never bothered to learn it properly. (Feel free to tear apart my code.)
try this... This will execute the slide AFTER the fade is finished.
$(".revealTitle", this).fadeIn("fast", function(){
$(this).nextAll(".revealText").first().slideToggle();
});
if you really want them both done at the same time, I think you will need to split the content into 2 containers. One for fading and one for scrolling.