Using Bootstrap and a bunch of custom CSS for social media icons (located here), I created a pen to demo (and test) my code. The goal was to create icons that would automatically fit there parent div (horizontal or vertical, etc), and I have everything working except for one small problem. I have both of the divs affixed (one horizontal, one vertical), and 100% opaque before the affix is triggered. However, and I know why, the view is still being rendered with what basically looks like a giant margin between the top of the document and the page title. How can I clear this, while still using display:inline-block?
Here is the CSS for the related divs & classes, but I'd recommend checking out the pen first because visually seeing it expalins the issue much better.:
.snav {
top:50%;
margin-left:-15px;
background: rgb(0, 0, 0);
width:5rem;
height:25rem;
display:inline-block;
z-index:99;
transition: 1s all ease-in;
transform: translate(0, -50%);
opacity:0;
}
.horiz{
top:0;
margin-left: auto;
margin-right:auto;
z-index:99;
left:50%;
transition: 1s all ease;
transform: translate(-50%, 0);
opacity:0;
display:inline-block;
}
#horiz{
background: rgb(0,0,0);
width:26.6rem;
height:5rem;
}
.affix{
opacity:.5;
}
.affix:hover{
opacity:.9;
}
The gap between the top of the page and the title is because the social icons widget is still within content flow.
Try adding position: fixed; to the .snav style rule to take it out of content flow and the title will go to the expected position.
Related
I have set up some scroll animations on many elements of a site I'm building.
I'm using these CSS rules:
.hiddenLeft {
opacity: 0;
filter: blur(5px);
transform: translateX(-090%);
transition: all 1s;
}
.hiddenRight {
opacity: 0;
filter: blur(5px);
transform: translateX(90%);
transition: all 1s;
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
The hiddenLeft and hiddenRight classes are in the elements by default, and then when they are intersected during vertical scroll the show classes are added.
It all works fine, except it has created horizontal scroll to the right out of the width of the site into blank space.
I would like to keep the animations as they are but without the horizontal scroll.
A picture of me scrolling out to the side into the blank space for reference:
enter image description here
I made a very basic replication here:
https://codepen.io/acodeaday/pen/NWMYWNL
I can see that the offending line is
transform: translateX(90%);
But that makes the animation very aesthetically pleasing. So I'm hoping there is a way to solve it while keeping that.
Try using
max-width: 100%!important; height: auto; overflow: hidden!important;
this code whatever you put all of your animation inside. That can be a div. Hope this help~
When we expand transition is smooth but when we collapse transition is not good... when its about to collapse I see a shake.
I played with transition but its not working. Can you help me providing my code in the fiddle?
.accordion-section {
border-bottom: solid 1px #000;
}
.accordion-section > h3 {
padding: 6px;
font-size: 16px;
background-color: #CCC;
margin: 0;
}
.accordion-section > .body {
height: 0;
padding: 0 10px;
overflow-y: hidden;
transition: height .5s;
transition: height .5s, padding-top .5s, padding-bottom .5s;
}
You can transition max-height instead of height and enclose the body content with padding, etc inside of the element you're transitioning (added .body-inner in .body). I also added a transition for scale() as it will cause a more "accordion" style collapse, but you can try it without that.
with scale() - http://jsfiddle.net/b4L6kyg4/93/
without - http://jsfiddle.net/b4L6kyg4/94/
Just give the initial div background color green. when the accordion is closing it doesn't have any background so it makes it look as if the div is flickering.
.accordion-section > .body {
background: green;
}
There are a couple of things you can do:
First, accelerate some device's hardware by using -webkit-transform: translate3d(0,0,0); . Second, use the CSS animation property transition timing function. I am not sure which effect you are trying to achieve, but you have "ease" on certain elements. Try experimenting with "ease-out". Third, the CSS transitions you're using may not be aligned perfectly with your elements, so when the transition finished running, the div snaps back to its place. A quick patch for this problem may be animation-fill-mode: forwards; . Your fiddle does not have the actual #keyframes for animation, so it is hard to give you any further advice.
I'm developing a side menu for my web-application (in the mobile version) using Angular2.
This the class when the menu is closed
.main-drawer
{
left: -300px;
width: 300px;
max-width: 100%;
z-index: 2;
transition-property: left;
transition-duration: 300ms;
transition-timing-function: ease-out;
}
When the user press the open-menu button I add the following class using jQuery
.main-drawer.opened
{
left:0;
transition-property: left;
transition-duration: 300ms;
transition-timing-function: ease-out;
}
This is the js code:
let drawer = jQuery ('.main-drawer');
drawer.toggleClass ('opened', !drawer.hasClass ('opened'));
Using this code on desktop computers the performances are good, but on mobile version it is laggy.
Is there a way to increase per performance?
The menu is pretty lightweight, does not contain a lot of nodes.
I noticed that other websites have pretty good performances even if their menu is full of things.
Thanks a lot
Translating x/y is more performant than transitioning or animation top/left, because translation leans on the GPU for rendering, which is powerful and makes movement smooth. top and left are operating at a DOM level, which is restrictive.
Also, you can shorten things a little. You can define your transition in one place on your initial element and then just define only what's changing in the added class. Try this:
.main-drawer
{
transform: translateX(-300px);
width: 300px;
max-width: 100%;
z-index: 2;
transition: 300ms transform ease-out;
}
.main-drawer.opened
{
transform: translateX(0);
}
I am putting together a slide presentation using a jquery plugin called 'slick' (http://kenwheeler.github.io/slick/) using django and a bootstrap 3 template. I've got a basic carousel working using a django template that looks like:
<div class="your-class">
<div>your content</div>
<div><IMG src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSj2c33fdt1ugB8VBuE5V37wnmPoxWMknX9JnGycNiH2yr3BpDKVA"></div>
<div>your content</div>
</div>
I have a fiddle at http://jsfiddle.net/kc11/20a90mdm/1/
I'm wondering if there is a way to add arrows to the left and right of the slide, like in the first example (Single Item) on http://kenwheeler.github.io/slick/ . I can only see the prev and next buttons below the slides
Your arrows are already there, they are the Previous and Next buttons at the bottom of the page. You would need to include slick-theme.css or style them by yourself via css.
Here I try css code...
.slick-prev{
background:#000;
width:50px;
height:50px;
position:absolute;
left:0;
top:50%;
-ms-transform: translateY(-50%); /* IE 9 */
-webkit-transform: translateY(-50%); /* Safari */
transform: translateY(-50%);
}
.slick-next{
background:#000;
width:50px;
height:50px;
position:absolute;
right:0;
top:50%;
-ms-transform: translateY(-50%); /* IE 9 */
-webkit-transform: translateY(-50%); /* Safari */
transform: translateY(-50%);
}
NOTE
Give their parent class
position:relative
Also you can set left & right position as your need.
The color of the buttons in slick-theme.css is white, so not visible on a white background.
Change the color of the buttons there or overwrite in your own style sheet like this:
.slick-prev:before, .slick-next:before {
color: #000000;
}
I've run into an issue where I need 2 divs height to fill up the screen based on resize no matter what the browser dimensions/resolution etc with scrolling included.
Right now without javascript it takes the height based on the body,html with min-height. Which is great! Except when you resize to a smaller size and then scroll downwards. You end up with whitespace.
For this example I have two divs side by side. Both 50%. Column1 is with black background color, and Column2 is with a white background color. I've gone and added some javascript and every-time I resize it just keeps adding extra height and the scrollbar becomes incredibly large.
Image one shows it regular.
Image two shows it after resizing a little bit. A ton of extra height is added. notice the scrollbar
Below is my code.
HTML
<div id="panelWrapper">
<div id="column1">
</div>
<div id="column2">
</div>
</div>
CSS
body, html {
margin:0;
padding:0;
min-height:100%;
height:100%;
}
#panelWrapper {
width:100%;
position: absolute;
}
#column1{
position:absolute;
width:50%;
left:0;
right:0;
top:0;
bottom:0;
min-width: 481px;
background-color: #000000;
}
#column2{
position:absolute;
width:50%;
left:50%;
right:0;
top:0;
bottom:0;
background: #FFFFFF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 999;
min-width: 481px;
}
Javascript
var bodyheight = $(document).height();
$("#column1, #column2").height(bodyheight);
$(window).resize(function() {
var bodyheight = $(document).height();
$("#column1, #column2").height(bodyheight);
});
To keep both divs filling up the height, no matter what size of each other, you don't even need Javascript...
The JS resize event is heavy, and there are many css-only solutions for that.
For example, you could make your #panelWrapper a display: table, and have the column divs to be display: table-cell. That would ensure that they are the same height.
Then, a min-height: 100% on the wrapper would make sure that they always fill up the remaining space when needed:
Here's a simple example showing the concept.
it's hard to test this on a fiddle but try this out, it should work. You can wrap everything in a function and just call the function on resize:
function adjustHeight(){
var bodyHeight = $(document).height();
$("#column1, #column2").height(bodyHeight);
}
adjustHeight(); //call on page load
$(window).resize(adjustHeight); //call on resize