I have a set of images scrolling continuously with jCarousel. Only one image is fully displayed at a time, and I would love to be able to "feather" the edges of the carousel so the images fade in and out as they traverse visibility.
Hopefully that makes sense.
Also, the carousel's motion seems a bit buggy at times. On occasional page loads it seems like the animation and/or auto parameters in the initialization of the carousel aren't being implemented properly, causing the carousel to either move quicker than expected, or delay longer, etc. Thoughts?
Edit to add: Is there possibly a way, in lieu of a true clipping mask, to use one of jCarousel's callbacks to perform fadeOut() on an image as it moves out of the carousel's focus (and then fadeIn() as an image moves into focus)?
Here is an example of jcarousel with feathered edges
Technically it isn't really feathered, there's just semi transparent PNG over the top. I don't think there is a way to have a true feather
One way to do it would be to make a transparent PNG with gradients that fade from transparent to the color of the background of your carousel, and use CSS position:absolute with a higher z-index than the carousel container div to place it on top. Here's a page with some examples- pay attention to the transparency section in particular.
Related
I would like to have a shape beneath my text on all slides to remain static throughout and not flicker in and out.
I know that Revolution Slider has an option for static layers, but it doesn't allow you to layer it beneath layers in other slides, it's always on top.
I tried creating a layer in each slide with 0 transitions, but when I set everything to 0, it disappears.
How to I either:
1. Create a static layer that can be layered beneath other layers
2. Set the transitions on my layers within slides to eliminate transitioning in and out so that the layer appears to be a static layer?
That's a good question because there is probably no way that you can do that perfectly in revolution 5 if you don't want to use background image beneath the text.
This should be handled with static/global layer for the layer that is on the bottom, but rev5 will always override your z-index (or anything else that you try in this manner) and it will always appear on top. So nothing here.
Other thing to do is to put this layer on every slide, always on the same position and turn off all animations on that layer so that he behaves static on every slide. But rev5 altough you defined that there is no animation uses animation speed parameter and that layer will flicker again. If you put that the animation speed is 0, the layer will dissapear. Why is that probably creators of the slider doesn't know either.
Only thing that I think you can do is to trick him to appear like you want, it will not be perfect, but maybe acceptable.
So on the bottom (static) layer click on the Animation in the menu above and choose No-Animation and No-Out Animation. Since you can't put 0 to animation speed we will put the speed 100 for in animation and 1000 for out animation. In this way out animation will be long enough to appear that the layer is animating continuous - that is static. But even with this the layer flickers slightly, but much much less then before, so maybe the effect is acceptable.
You can play with fade in instead of no-animation, and with animation speed numbers, trick is that the out speed last long enough for the in speed of the next slide to kick in.
I hope this will help, I would also love for rev 5 creators to solve this issue.
I run into the same problem today, and i don't agree with the accepted answer, because you can easily change the z-index of static layers with a css override.
Revolution slider has a build-in custom css editor, so go to your Slider settings, scroll to the bottom and add:
.tp-static-layers {
z-index: 0;
}
Done, all static layers will appear beneath normal layers.
EDIT
With newer versions of revslider each slide <li> container has a z-index. Try the following css.
.tp-static-layers {
z-index: 1;
}
ul.tp-revslider-mainul > li {
z-index: unset !important;
}
NOTE: Not fully tested, it's possible this may interfere with animations.
I am using Fullpage.js in my site and would like to use one image for the background for the whole site, where different parts of the image are displayed as different sections and slides are scrolled. So far I have managed to get different parts of the image showing for sections by adding:
<div class="fullpage">
at the top of the body with corresponding CSS:
.fullpage {
background-image: url(../images/background_image.jpg);
background-size: cover;
}
Is there any way to get the image to move sideways as slides are displayed.
Here's a jsfiddle of what I've got so far.
In the end I decided to go a different route and convert the image into tiles. The image tiles are then assigned to the correct slide or section. This allows the image to continue from each slide or section without having to load the whole image at once.
Yep! You'll need to hook into that slider gallery's events.
What plugin are you using? Or did you write it yourself?
Either way, most plugin slide galleries have events like "onSlideStart" or things like that, which you can then use to update your background.
I'd start by writing a script, and setting onSlideStart to a function that calculates what slide the slider is on. Then you simply set your background position (or rather, animate it) to the proper x-value based on what slide you're on (you can figure out the math yourself, yeah?)
Hope this helps! :)
A client has expressed that they really like how Google Play handles their hero slider. I've tried replicating the effect in jQueryCycle to no avail. Can anyone shed some light on the best way to achieve the same effect?
For those unfamiliar: https://play.google.com/store?hl=en - the slider shows a centralized "current slider" as well as a "previous" and "next" slide preview shown behind a screen. It's continuous and you can always see a before and after.
It's not continuous. Stuff on the right doesn't slide in between slides, it just appears. It's not exactly setting the bar high for carousels.
All you really need is any old carousel split into 3 segments with translucent overlays permanently over segments 1 and 3 and one that flips on and off over segment 2. Every time a slide completes, hide the #2 overlay. Every time one begins show it again.
Stuff you'll want to know:
Rooting absolute elements to relative positioned elements with CSS so you can fix absolute panels over the content stuff without affecting layout.
Using callbacks or custom events with jQuery.
How to make transparent/translucent .png images with Photoshop to use as panel backgrounds.
I got the task of making an loading page for a webapp, based on the image above. The animation is basically the circle being filled from the left side to the right side, both in a clockwise and anti-clockwise way, but I have no idea how to do such animation. =/
Could someone give me a light on how to do this? It may be using canvas (I'll use the library Raphael.js), CSS (CSS3 Animations), or even just images (animating then with javascript).
You could do it with the canvas element and some sort of bezier curve animation, but it may be just as well to do it with images (and certainly easier). A large sprite of PNG frames could handle this easily and it wouldn't be that large of an image. Even better, since the top and bottom mirror each other, you could make the images for just the top, and then duplicate the element and flip it (with CSS transformations) to make the bottom half.
Fairly simple, if you use the cycle plugin for jquery and create a slideshow the transition between slides allows what's beneath the slides to show. I want to avoid this and have one slide truly fade into the other rather than kind of fading into the background and then into the next slide.
Is this possible?
Thanks!
Example:
http://www.sonicinteractive.com.au/_WIP/slider_problem/
See how the white line (and background) come through..
Place an image below them but above the page with a neutral colour that blocks out the page background in the region of the image (i.e. create it from the same mask used for the images themselves).
Hi I have solved the problem by removing the background colour of the wrappers containing the slider as well as the "main wrapper". For the latter I only left the backgound-image to do the job.
Hope that this helps