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.
Related
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 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.
The design I've been given to work with is 960px wide by around 7000px tall, cut into five vertically-stacked segments at arbitrary points. There's a fixed-placed sidebar that scrolls to each segment, depending on which navigation link is clicked. Atop this are a bunch of sliders, transparent PNGs, headlines and paragraphs, predominantly positioned in a relative fashion.
I need to ultimately do two things:
Hide the corresponding quick-nav links in the sidebar until its related segment's background image has loaded
Load (and ideally fade in) the transparent PNGs in each section as needed -- the user scrolls between two vertical scroll values and stops for a second, causing that section's transparent PNGs to then load and fade in.
I'm currently using softscroll.js to achieve a smooth scrolling effect for when the sidebar links are clicked (thus scrolling to the related anchors). Thus, lazy loading techniques that begin to load images as you scroll by won't work -- if I click the last link in the sidebar nav and it scrolls me to the bottom, I don't want every image between the bottom segment and the top loading as a result.
While I'll need to figure out point 1 sooner rather than later, I'm more interested in the second question.
How would one use jQuery to load images inside a certain element if and only if the user has paused between two specific vertical scroll values?
Thank you!
(BTW, please don't respond with appelsiini's lazyload jQuery plugin. It's unsupported by the developer and doesn't appear to work in modern browsers. Thanks!)
A slightly more full fat solution to the already great one suggested by Justin is to use jQuery Waypoints to manage the in viewport events.
You may run into issues if you're rewritting the scroll mechanism on mobile browsers using something like iScroll or scrollability. In which case you'll need to use their APIs to investigate a fix.
Check the user's position using scrollTop(). You should be able to do this inside a setInterval() callback.
function loadBackground() {
var userTop = $(window).scrollTop();
var userBtm = userTop + $(window).height();
var elemTop = $('#element').scrollTop();
var elemBtm = elemTop + $('#element').height();
if ((userBtm >= elemTop) && (userTop <= elemBtm))
{
// Load images
}
}
$('document').ready(function(){
setInterval(loadBackground,500);
}
(This is untested code, but you get the idea.)
Edit: Adjusted the conditional so that if any part of the element is in the window it will fire.
Hide the corresponding quick-nav links in the sidebar until its related segment's background image has loaded
Haven't tested it but you should be able to just do this by sticking a couple of <img>s in with the same src as the background (with display: none; of course) and testing the .complete property of each image, on a short setInterval loop, until they're all loaded. Don't use onload, it tends to be unreliable on images.
Load (and ideally fade in) the transparent PNGs in each section as needed -- the user scrolls between two vertical scroll values and stops for a second, causing that section's transparent PNGs to then load and fade in.
Justin's solution should work for detecting when you're in a given section. Just set a flag to false before you do the softscroll, and true once it stops- and then only mark a section as active when the flag is true.
I would "disable" the images by pointing their src attribute to a 1x1 blank gif, and setting their data-src attribute to the real src. Then just do something like:
$('.selected-section img').each(function () {
$(this).attr('src', $(this).data('src'));
});
You'll have to be sure to set the size of the "disabled" images to the size that they'll be once their image has loaded, or else the page will jump around a lot.
You could use the window.onscroll event handler to detect when you're scrolling, but this is generally a bad idea. For discussion on this see: http://ejohn.org/blog/learning-from-twitter/
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.