How can I animate / smooth transition the height of a Bootstrap 5 Carousel when the slides are different heights?
I have only seen solutions that use jQuery that seem very outdated!
`
function bsCarouselAnimHeight()
{
$('.carousel').carousel({
interval: 5000
}).on('slide.bs.carousel', function (e)
{
var nextH = $(e.relatedTarget).height();
$(this).find('.active.item').parent().animate({ height: nextH }, 500);
});
}
bsCarouselAnimHeight();
`
I would like the height to transition smoothly rather than jump to the height of the new slide.
Related
I'm wondering if it's possible to use only CSS to create a parallax scrolling background that meets the following specifications.
It works on an element that sits inside an otherwise static layout (i.e. my whole page layout isn't a group of parallaxing items)
The background isn't entirely fixed in place; it moves, just not as fast as the rest of the page.
I've looked up tons of tutorials for parallaxing backgrounds, and have found some seemingly great tutorials, but they all have one of the following problems.
They rely on the whole page being a parallax group so that you're actually scrolling over a container via an "overflow: auto" specification
The background is totally fixed in place
they use JavaScript.
Sooo, I can accomplish what I want with JavaScript fairly easily. Here's a full working example on JSFiddle that you can try out.
CSS
.parallax-row {
background-image: url(http://lorempixel.com/output/nature-q-c-781-324-3.jpg);
background-size: auto 150%;
}
JavaScript
/**
* Update the parallaxing background img to partially scroll
*/
jQuery(document).ready(function($) {
$(window).on('scroll', function() {
$('.parallax-row').each(function(index, el) {
var $el = $(el);
var fromTop = $el.offset().top + ($el.outerHeight() / 2) - $(window).scrollTop();
var windowHeight = $(window).height();
var percent = (fromTop * 100 / windowHeight);
$el.css('background-position', '0 ' + percent + '%');
});
});
});
Is it possible to accomplish that same effect with just CSS?
I'm using a JQuery Mobile 1.4.5 external panel on the right side of some pages, and the pages have also the class ui-responsive-panel, so that the main content is resized according to the panel width to show its whole content.
The panel has also data-dismissible="false" because in the main content are some form controls and user interaction while the panel is open.
The panel shows itself through the "reveal" animation, which causes the page main content first to swipe off to the leftmost side of the page, and then resize to the remaining page width.
<div data-role="panel" data-position="right" data-position-fixed="true" data-display="reveal" data-dismissible="false">
</div>
This is the CSS i'm use to customize the JQM right panel:
.ui-panel {
width: 25em;
}
.ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-right {
margin-left: 25em;
}
.ui-panel-page-content-position-right,
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
left: 0;
right: -25em;
}
.ui-panel-animate.ui-panel-page-content-position-right.ui-panel-page-content-display-reveal {
left: 0;
right: 0;
-webkit-transform: translate3d(-25em,0,0);
-moz-transform: translate3d(-25em,0,0);
transform: translate3d(-25em,0,0);
}
Is there a simply way to avoid the initial left swipe-off of the leftmost main part of the page, and instead to have the main content smoothly decrease its size from the right side during the panel animation?
This below is a possible solution using the jQuery animate() method. Let say its enough to make only the page-content responsive, as the full-page animation (toolbars included) is not a requirement:
$(".ui-panel").on("panelbeforeopen", function (event, ui) {
$(".ui-page-active .ui-content").animate({
"margin-right": "50%"
}, 300,"swing");
});
$(".ui-panel").on("panelbeforeclose", function (event, ui) {
$(".ui-page-active .ui-content").animate({
"margin-right": "0%"
}, 300,"swing",function()
{
$(this).removeAttr("style");
});
});
Furthermore, when used with a Panel with data-display="overlay" the class "ui-responsive-panel" in the body is no longer necessary and can be dropped, because the Panel height can be easily adapted to fill only the page-content height (credits: jQuery mobile panel between header and footer) .
function scalePanelToContent() {
var screenH = $.mobile.getScreenHeight();
var headerH = $(".ui-header").outerHeight() - 1;
var footerH = $(".ui-footer").outerHeight() - 1;
var panelH = screenH - headerH - footerH;
$(".ui-panel").css({
"top": headerH,
"bottom": footerH,
"min-height": panelH
});
}
By adding "bottom": footerH the Panel is nicely filling the full page-content height also when the browser window is resized.
Panel: the CSS Panel animation is adapted with a minimum of changes, using the same criteria that jQuery actually uses for transitions and animations support:
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-moz-transform: translate3d(100%,0,0);
}
The final result from user-experience point of view, is very closely as using a Panel with data-display="push" or data-display="reveal" in a Panel responsive page: a nice smooth animation - moreover without the overhead of the panel wrapper on each JQM page and with the header and footer toolbars always available at full width without shrinking.
Full demo: http://jsfiddle.net/e6Cnn/38/
Please check the following fiddle: http://jsfiddle.net/tWUVe/
When you click the div, the p's get deleted, and I expect that the div's height will be animted, but no animation happens. How can I achieve an animation with CSS3 only?
The issue is that there is no opportunity for the transition to occur. What I mean by this is that when elements are removed, they are immediately taken out of the document flow, resizing the parent if needed without a transition.
As a fix for this, you could animate the height of the paragraphs instead (or a similar means)
$('div').click(function() {
var $thisDiv = $(this);
$thisDiv.find('p').css({'height':'0px','margin':'0px'}); // Change p height
// Remove after transition
setTimeout(function() { $thisDiv.find('p').remove(); }, 1000);
});
Demo
I am trying to achieve a layout like this:
where:
Navbar is just a bootstrap-like top menu, 60px of height, always on top
Pop-up menu is fixed in that position (not always visible), always on top
The entire free area (windows w.o. navbar) is filled with Canvas.
Live example: jsFiddle
I have a problem with Canvas. I currently have a simple style:
<canvas id="le_canvas">Y U NO CANVAS</canvas>
...
#le-canvas {
position:absolute;
width:100%;
height:100%;
}
and the canvas is filling the background, but:
the resolution is very low
it doesn't maintain ratio during window resizes.
What I'd like (if it is possible):
full resolution of the area to fill (1:1 pixel on canvas and on screen)
set the ratio of the area to fill
bonus: update the above after window resize
Setting the canvas element in per-centage will not set the actual canvas size which must be set in absolute pixels. What happens here is that you get a canvas with a default size which then is stretched by the html-rendering giving the blurry look.
You therefor need to set the size by using f.ex. the window's sizes in absolute pixels.
You can do this like this (update of fiddle here: http://jsfiddle.net/x5LpA/3/ ) -
Create a function that sets the canvas size based on window size (you will of course need to subtract height of bars etc, but to show the principle):
function initCanvasArea(cnv) {
cnv.width = window.innerWidth;
cnv.height = window.innerHeight;
}
As the canvas content are cleared when the canvas is re-sized you need to render the content again for each time. Therefor it will be smart to extract the render content into a separate function like f.ex:
function renderCanvas(ctx) {
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(0, 0, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(20, 20, 55, 50);
}
Now, make the main function a self-invoking one where you also attach an event handler for windo.resize to update the canvas:
$(function () {
var canvas = $('#le_canvas')[0];
var ctx = canvas.getContext('2d');
initCanvasArea(canvas);
renderCanvas(ctx);
window.onresize = function(e) {
initCanvasArea(canvas);
renderCanvas(ctx);
};
})();
And finally edit the CSS-rule by removing the width/height set to 100%;
#le_canvas {
position:absolute;
}
(Tip: a better approach here is to use the fixed attribute for position - plus use a wrapper element, padding, box-sizing.. but that is out of scope for this question).
Is this what you are after? I used $(document).width() and $(document).height() to get the width and height for the rectangle. http://jsfiddle.net/x5LpA/1/
I have a page with height 200% of the total viewable area, which means there are approximately two pages one over another. I have to scroll to the bottom to view the other half page. I divided the complete <body> into two divs each with a height of 100%.
In div1, I gave a link like this to the div2, which works,
<div id="div1" class="mystyle1">
<a href="#div2">Click Me To Go To DIV2</div>
<div id="div2" class="mystyle2">
<a href="#div1">Click Me To Go To DIV1</div>
This works, but it scrolls in an instant, I need it to be smooth so that the user can see the transition. I also tried setting this in CSS:
-webkit-transistion: all 1s ease-in-out;
No luck!
You can achieve conveniently this using Jquery. Googling keywords like animated scroll to top and animate scroll to ID would give you an idea.
Doing a quick fiddle, perhaps this what you want to happen: http://jsfiddle.net/g5D33/
--
By the way, you have some small typos on your code, like <a> tag is missing with a closing tag and transition spelled with s. ;)
For that I always use a small JQuery function
$('a[href^="#"]').click( function(){
var scroll_el = $(this).attr('href');
if ($(scroll_el).length != 0) {
$('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 700);
}
return false;
});
JSFIDDLE
For scrolling horisontally:
$('a[href^="#"]').click( function(){
var scroll_el = $(this).attr('href');
if ($(scroll_el).length != 0) {
$('html, body').animate({ scrollLeft: $(scroll_el).offset().left }, 700);
}
return false;
});
JSFIDDLE