I'm using deck.js for a presentation. For one slide, I want a static header with figures/images that I can carousel through. Here's the relevant HTML:
<section class="carousel slide">
<h2>Static Title</h2>
<figure class="slide"><figcaption>Text for first image</figcaption><img src="images/first_image.png" alt=""></figure>
<figure class="slide"><figcaption>Text for second image</figcaption><img src="images/second_image.png" alt=""></figure>
<figure class="slide"><figcaption>Text for third image</figcaption><img src="images/third_image.png" alt=""></figure>
</section>
And here's the JS I've added to deck.js to make this work with the horizontal-slide theme that comes with deck.js.
.carousel .deck-before {
-webkit-transform: translate3d(-400%, 0, 0);
-moz-transform: translate(-400%, 0);
-ms-transform: translate(-400%, 0);
-o-transform: translate(-400%, 0);
transform: translate3d(-400%, 0, 0);
height:0;
}
.carousel .deck-after {
-webkit-transform: translate3d(400%, 0, 0);
-moz-transform: translate(400%, 0);
-ms-transform: translate(400%, 0);
-o-transform: translate(400%, 0);
transform: translate3d(400%, 0, 0);
height:0;
}
.carousel .deck-next {
-webkit-transform: translate3d(200%, 0, 0);
-moz-transform: translate(200%, 0);
-ms-transform: translate(200%, 0);
-o-transform: translate(200%, 0);
transform: translate3d(200%, 0, 0);
height:0;
}
.carousel .deck-previous {
-webkit-transform: translate3d(-200%, 0, 0);
-moz-transform: translate(-200%, 0);
-ms-transform: translate(-200%, 0);
-o-transform: translate(-200%, 0);
transform: translate3d(-200%, 0, 0);
height:0;
}
This works great when the carousel of images is going forward. However, when I go back, the image that is moving off the screen shifts down so it is below the spot where the new image is entering.
How do I make it so that the image that is moving off the right of the screen stays level with the image that is coming on the screen from the left?
The root of your problem comes from the fact that height does not transition, so at the moment when the class change happens that previous element immediately has a height, pushing down the slide that still hasn't transitioned out of view.
This is a fairly tough problem to solve. You'll need to make some choices based on your needs.
First, take out the height:0 from each of your before/after/previous/nexts and just say .carousel .slide { height: 0 }.
Do you need the deck.scale extension to work, or do you have slide content after the carousel? If so, you'll need to give .carousel a height to compensate.
Do you know that height in advance? Just set it in the CSS.
Don't know the height, or just want to use this everywhere without having to set the height by hand each time? Write a small script that checks carousel contents and sets the height. Something like this (untested, beware):
$(window).load(function() {
$('.carousel').each(function(carousel) {
var $carousel = $(carousel);
var maxHeight = 0;
$carousel.each(function() {
var height = $(this).height();
maxHeight = Math.max(height, maxHeight);
});
$carousel.height(maxHeight);
});
});
With a script like that, be sure to completely remove the height:0 declarations from CSS.
Related
i want to place the ionic range pin at the bottom of the knobs and make it always visible how can i do this in ionic 4 , i know how to do it in ionic 3 but it does not seems to work in ionic 4 and probably this is caused by the shadow DOM
i cant access
.range-md .range-pin
since it is in the shadow dom and also
.range-md .range-knob-handle .range-pin
cant be accessed
.range-md .range-knob-handle .range-pin {
transform: translate3d(0, 0, 0) scale(1); }
.range-md:not(.range-has-pin) .range-knob-handle .range-knob {
transform: scale(1); }
.range-ios .range-knob-handle .range-pin {
transform: translate3d(0, 0, 0) scale(1); }
how can i place them at the bottom in ionic 4 ?
This CSS will work to visible rangebar pin always.
.range-md .range-knob-handle .range-pin {
transform: translate3d(0, 0, 0) scale(1); }
.range-md:not(.range-has-pin) .range-knob-handle .range-knob {
transform: scale(1); }
.range-ios .range-knob-handle .range-pin {
transform: translate3d(0, 0, 0) scale(1); }
and, This CSS will work to move position of pin, if want to move pin to bottom, set css according to that. Also you can remove pin background using this css also.
.range-md .range-pin {
color: #252525;
top: 26px;
background: transparent;
}
If you’re using an Ionic version and already uses CSS Shadow Parts 3 then you can achieve this by using:
ion-range::part(pin) {
transform: translate3d(0px, 50px, 0px) scale(1);
}
I'm trying to animate some shapes made with CSS-Doodle which will be a part of my background. Basically, I want them to always float around the screen and always rotate but I want the two animations at different speeds.
With the code below I can only get either one to work by switching around the order of chaining.
animation: spin #r(3s, 10s) infinite, flow #r(20s, 40s) infinite linear;
#keyframes flow {
0%, 100%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
50% {
-webkit-transform: translate3d(#r(-500%, 1000%), #r(-500%, 1000%), 0);
transform: translate3d(#r(-500%, 1000%), #r(-500%, 1000%), 0);
}
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
I'm hoping there's a way for both of them to be applied at the same time even if it's not pure CSS.
There's probably a better way but the simplest solution would be to put a wrapper around the element so that the wrapper gets one animation and the actual element gets the other animation.
This is how it was done in Bootstrap 3:
.modal.fade .modal-dialog {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
Or something like this would have worked as well:
.modal.fade .modal-dialog {
transform: translate3d(0, -25%, 0);
}
.modal.in .modal-dialog {
transform: translate3d(0, 0, 0);
}
The magic obviously happened in the modal classes with the transform property. But this does not work in Bootstrap 4. I am specifically using Bootstrap v4.0.0-alpha.5. What changes do I need to make to achieve the same effect?
Demo url - https://jsfiddle.net/qww47vfn/
Found it, apply the following CSS:
.modal.fade .modal-dialog {
-webkit-transform: translate(0,25%);
-ms-transform: translate(0,25%);
-o-transform: translate(0,25%);
transform: translate(0,25%);
}
I've inverted the transform origin, instead of -25%, it's now 25% (effectively making it fade in from below). Adjust the amount to adjust the initial fade in position.
What changed?
Instead of translate3d the property translate is now being used, so changing the original values won't matter since the model listens to the new properties now.
Side note:
This doesn't work when you implement it as a new rule for some reason, I don't have a local version of bootstrap, but changing it inside the DevTools solved it for me. I suppose you need to overwrite the initial code to change it.
Im using this plugin 'SidebarTransitions by codrops' for making a sidebar-menu..
For show/hiding the menu, its using this translate3d css
.st-effect-1.st-menu {
visibility: visible;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-1.st-menu-open .st-effect-1.st-menu {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
My problem is when i fill the site with alot of data, like 20000 rows in a table, the translate3d effect becomes really slow in IE (using 10 or 11 atm), takes like 5-10sec to do the effect and uses a 100% cpu core..
The same effect in Chrome appears instantly, why? what to tweek for IE to work?
I want to display a div in right side exactly what the following CSS does but using translate3d
div {
position: absolute;
right: 0;
top: 0;
}
I have tried the following but its working only in Chrome.
div {
-webkit-transform: translate3d(100vw,0,0);
-moz-transform: translate3d(100vw,0,0);
-o-transform: translate3d(100vw,0,0);
transform: translate3d(100vw,0,0);
}
UPDATE
Please check the fiddle. http://jsfiddle.net/7LLbu/
I need the same toggle function using translate3d.
Kindly help me fix this.
html, body {
margin: 0;
padding: 0;
}
.float-left3d {
-webkit-transform: translate3d(100vw,0,0) translateX(-100%);
-moz-transform: translate3d(100vw,0,0) translateX(-100%);
-o-transform: translate3d(100vw,0,0) translateX(-100%);
transform: translate3d(100vw,0,0) translateX(-100%);
}
div {
width: 250px;
height: 400px;
background: green;
}
<div class="float-left3d">
Fiddle: http://jsfiddle.net/VjgGY/1/
What we are doing is saying "First put it on the right of the viewport, and then because it sticks out by the width of the div do subtraction translateX by the width of the div"
This works fine;
.translate3d(~"calc(100vw - 276px)", 0, 0);
Where theres a will theres a way! Or more likely a hack using JS...
var container = document.getElementById('container');
var translatedChild = document.getElementById('child');
var rightEdge = container.offsetLeft + container.offsetWidth;
var translation = rightEdge - translatedChild.offsetWidth;
translatedChild.style.transform = "translate3d("+translation+",0,0);
Rinse & repeat for vender prefixed CSS. Should work with variable width container, you'll have to update it when the page resizes if your designing responsively though.