First timer here, I installed Lightbox and it is running brilliantly.
Buttons are not visible normally, but when i hover the where it should be, buttons becomes visible.
You have to check your lightbox.css file. By default Lightbox hides the controls. In the css you will see lines where the opacity is set to zero. So what you might be looking for is something like the following.
.lb-prev, .lb-next {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); //change to 100%
opacity: 0; //change to 100%
}
Since you say you say your a first timer I would recommend going through the CSS file and where you see something recarding the opacity change it saved it and check what it did, till you get the result you want.
Related
I have moving line animation, powered by CSS:
.line {
transition: all 30s cubic-bezier(0, 0, 0, 1);
transform: translate3d(-1000px, 0px, 0px);
}
The line is moving 30 seconds to -1000px on X axis.
The problem:
When I switch browser tabs to the other websites, animation on the tab with this animation could set on pause, but when I return back to the tab with this animation, animation resumed.
The behavior I need:
I need to make animation move constantly without pausing, when user switch the browser tabs.
I do not think that is possible with just CSS. For optimization purposes inactive browser tabs or windows are not redrawn. You could however use JavaScript to count how many frames have passed using real time and Page Visibility API to skip to the correct frame.
If I understood you correctly, then you need to continue the animation after the user has left the current tab of the browser. The visibilitychange event will help with this. I have made the usual example code below, but you need to customize this code for your task.
I also specified line.style.animationPlayState = 'running' - it is in this place of the condition that the logic of the animation continues.
let line = document.querySelector('.line');
document.addEventListener("visibilitychange", function() {
if (document.visibilityState == 'hidden') {
line.style.animationPlayState = 'running';
} else {}
});
I'm trying to use CSS transforms to make the center object in a carousel have more focus/attention. (Carousel is Slick.js)
Everything works great, except when I go from the last item back to the first item, there is a pause and a jump before the change appears.
What is causing this? How do I fix it?
https://jsfiddle.net/6d91cqoq/1/
//pseudo code
EDIT: It also happens going from the first to the last.
EDIT 2:
It's worth noting I took the idea from the Slick.js website: http://kenwheeler.github.io/slick/
On the page with the 'Center Mode' example, it is using transforms to do this exact thing. I cannot for the life of me figure out what is different, other than the target element.
EDIT 3: I did attempt to change my elements to H3 elements, as is in the sample. No change.
The cause for this is that Slick changes the DOM order of the slide elements when switching from "first to last". The transition doesn't kick in when dom elements are removed and added back... You can work around this by playing around with javascript and Slicks beforeChange and afterChange events instead of a pure CSS solution. I have made an example, although the example I made also slightly changes the effect (the center slide won't widen until it is in the center, e.g. afterChange). Maybe with Slicks, next and previous slide parameters you can make it work like your example, didn't have time to investigate it more.
https://jsfiddle.net/6d91cqoq/2/
Changes made to your example:
//Added my own "active" class, so it does not to interfere with slicks active class
.slick-slide.active {
opacity: 1;
transform: scale(1.50);
}
JS
//make current center active after initialization
$('.slick-center').addClass('active');
//before slide change, make all "inactive"
$('.center').on('beforeChange', function(event, slick, index){
$('.slick-slide').removeClass('active');
});
//after change make the center one "active"
$('.center').on('afterChange', function(event, slick, index){
$(slick.$slides[index]).addClass('active');
});
I'd like to show a modal dialog using a 3D flip effect, exactly like the "3D flip (horizontal)" example in the Effeckt.css library.
However I really don't need the whole Effeckt library, since I just want this one effect. So I've tried to strip out the relevant bits of the library into free-standing CSS and JavaScript.
This is my attempt, but it's not working: http://jsfiddle.net/eJsZx/
As the JSFiddle demonstrates, it's only showing the overlap - not the modal itself. This is odd, because the element inspector suggests that the modal should be visible - it has display: block, visibility: visible and zindex: 2000 (higher than the overlay element).
This is the JavaScript:
$('button').on('click', function() {
$("#effeckt-modal-wrap").show();
$("#effeckt-modal-wrap").addClass('md-effect-8');
$("#effeckt-modal-wrap").addClass("effeckt-show");
$('#effeckt-overlay').addClass("effeckt-show");
$(".effeckt-modal-close, .effeckt-overlay").on("click", function() {
$("#effeckt-modal-wrap").fadeOut();
$('#effeckt-modal-wrap').removeClass("effeckt-show");
$("#effeckt-modal-wrap").removeClass('md-effect-8');
$('#effeckt-overlay').removeClass("effeckt-show");
});
});
What am I doing wrong?
There were a couple of issues in the code.
First, your styles were missing the following:
.effeckt-show .effeckt-modal {
visibility: visible;
}
This was causing the modal to remain invisible.
Once the dialog was visible, the dialog would rotate in just fine, however when being dismissed it would not rotate out. This was due to the following line:
$("#effeckt-modal-wrap").removeClass('md-effect-8');
If you want to remove this class, it would need to be done after the animation is complete otherwise the 3d effect is lost. It doesn't necessarily need to be removed, but that depends on what the rest of your content needs.
The final issue was that the wrapper, on completion of the fadeout, was getting its local style set to display: none. Because of this, the second time showing the dialog would cause it to simply appear because it was moving from display: none to display: block. There are a couple of options here.
Use CSS to animate the fade in/out.
Use window.setTimeout after calling $.show on the element to give the dom a chance to update.
The final result: Working Fiddle
I'm using a php styleswitcher and alternate stylesheets to try to duplicate the function of browser zoom (keyboard cmd-plus or ctrl-plus).
Right now, the "zoom in" graphic is linked to an alternate stylesheet with the following css:
body {
zoom: 1.2; -moz-transform: scale(1.2); -moz-transform-origin: 0 0}
}
This works fine, but ideally I'd like to have the link trigger a relative zoom rather than an absolute zoom value -- so i would need to establish a variable that determined the user's current zoom level, and then increase that zoom by 120%. This way the same link could be clicked multiple times to increase the zoom incrementally.
Any idea how to do this?
I think this will need JavaScript.
If I remember it correctly, you can change/create CSS-styles with JS. So if you save a variable in JS and multiply it with 1.2 everytime the onClick of the link is triggered, it should create the same effect.
EDIT: I don't know if it's possible, but if you can multiply variables in LESS, you could that 'language'. As it's a combination of CSS & JS
I need my visual content to become darker (like when modal Alert is shown). I've tried to look up in the source code of Alert and PopUpManager, but found only blur and fade effects there... Is there any basic Filter to do set content darker? Thanks
You can use ColorTransform with color multipliers:
component.transform.colorTransform = new ColorTransform(0.5, 0.5, 0.5);
There are 4 styles you can set on the global identifier in styles to set all modal popup background effects. I think you'll want something like this:
global
{
modal-transparency-blur:0; /* no blur */
modal-transparency:0.5;
modal-transparency-color:#000000;
modal-transparency-duration:0; /* no animation, goes straight to faded black. in ms */
}
What about creating a new UIComponent/Sprite whatever you use, making it black with opacity liek 50% and pushing on top of the display list just below stuff you want to show.