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>
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
First of all, thank you so much for checking my question.
I'm working on a web site and need to change images vertically in a selected div like a parallax effect. There are 3 images and need to change them.
There are 3 images in a div. Check the following screenshots.
This is the image 1. All these 3 images are half width of the screen.
And this is image 2.
Like this, there is another image 3. The yellow color content in the right side is not changing. Now i added just a simple scroll bar to scroll.
I need to add either parallax effect on these images to scroll vertically or quickly change images on mouse scroll.
Example for parallax effect I need to add : http://pixelcog.github.io/parallax.js/
Or I want to apply this effect : https://codepen.io/RenanB/pen/GZeBNg
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax">
<h2>Parallax Speed -1</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax">
<h2>Parallax Speed 1</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?gravity=center" data-speed="-0.25" class="img-parallax">
<h2>Parallax Speed -0.25</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1080" data-speed="0.25" class="img-parallax">
<h2>Parallax Speed 0.25</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?random" data-speed="-0.75" class="img-parallax">
<h2>Parallax Speed -0.75</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?blur" data-speed="0.75" class="img-parallax">
<h2>Parallax Speed 0.75</h2>
</div>
But only issue is, when I apply the same code to my images, this effect is activating to my full site.
Most importantly ,no matter from where user scrolling the page, I need to scroll to these 3 images, show all 3 and then scroll down to next section.
I added above parallax code, but it's applying to the whole site and not working.
What is the best way to apply above mentioned 2 methods to my web site ?
Well, as soon as you played with code, you need to see that those scripts and effects builded inside a wrapper, so the main thing in parallax effect is to have a nicely 100% width and height so you can see the delay and responsiveness in your website, what I can tell you do is the following :
Wrap your images inside a div with name like ( image_wrapper ).
Add a class for every image parent div like ( image_section ).
specify the 100% width and height for image_sections.
Add a height for the image_wrapper as this :
.image_wrapper{ height:calc( 100% * 4 ); }
100% for the full height, 4 for the number of images to have in parallax
How can I create this carousel in Bootstrap 3? I want to slide at one time one div, not three. I tried exchange the normal carousel images with divs, but it's not working correctly.
I want somenthing like this:
http://i.stack.imgur.com/DwVKw.gif
What you need is set overflow-x: scroll for your grid and set fixed width for it.
And then via butoons scrool to next item (use $(".wheelGrid").animate({scrollLeft: leftPos}, height);)
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;
}
I am using the SlidesJS JQuery plugin to display a sliding banner along the top of a webpage.
However, I am having troubles adding image captions that overlay on the images. As per the website above I create a new p with the class caption and enter my caption in that, but from what I can tell the plugin is thinking that this caption div is another slide and showing just the caption text after each of the images.
You can view the page here.
You might want to check the example SlidesJS with caption. A look into your html code and see right away that you are using one div block for all the images(slides). On the example code on the link, they split the images(slides) per div so that when you need to add a caption, you simply add a child inside div.
Their example has each slide within it's own and then the caption inside another div like so:
<div class="slide">
<img src="/images/myimage"/>
<div class="caption"><p>this image is awesome</p></div>
</div>
Without actually trying it, I think you may be missing the slide as well as the child caption classed div's