I have a simple layout in which I have integrated a SlidesJS slider example. Now, the thing is, whenever it slides to an image, the animation flickers and it is buggy. It would translate the position perfectly, but right after being done, it goes back a little bit and comes back again, like trying to run but being pulled back at the right position.
I've uploaded a test case for you: http://test-ground.besaba.com/silmond/index.html
The inital examples, however, work perfectly. The only changed thing in my layout are the slider's sizes. I set the container's width to 56% and its height to 400px.
Do you have any idea why this happens?
Ah, nevermind. What caused the flickering was the intercalation of both css and javascript animations/transitions.
I had the terrible idea to set something like * { #include transition(all, 0.2s) } in my code. I was thinking that this would be simpler as I wouldn't have had to add this line everytime I wanted a smooth transition. But it turns out not to be.
Related
I found a carousel (https://codepen.io/paulnoble/pen/yVyQxv) that has some awesome transitions and thought it'd be nice to integrate into a project I'm working on: https://joshrodg.com/halloffame/
My code is here: https://codepen.io/joshrodgers/pen/MWBPXBx
The responsiveness of the design needed to be adjusted slightly because to me having the content split (left, right) doesn't quite work that well on smaller screens (like phones) - it'd make it almost impossible to read. So, my idea was just to remove the right-side content all together.
I have that working and it looks exactly as I expect, except one thing...
Basically, there is vertical paging on the right-side of the slideshow. When you click on the next circle it rotates forward to the next slide, when you click on the previous circle, it rotates backwards to the previous slide. On a desktop screen (larger than 900px) the paging area stays on top of the rotating images, which makes the slideshow rotation look really nice. On my iPhone, and I'm guessing on other small screens, the rotating images appear to rotate on top of the paging area and then it re-appears.
I'm sure this is a simple tweak, but is there a way to keep the paging area on top while rotating through the images on a desktop and smaller screen like an iPhone?
This is also an issue on the original carousel, so I'm not sure how to fix it.
The paging area does have a z-index: 1 but for some reason the images still rotate on top of the paging area. I even tried setting it higher: z-index: 1000, but that didn't seem to do anything.
Anyone have any ideas?
Thanks
Josh
After looking into this a little more, I was able to find a solution!
My carousel__control div is what was controlling the vertical pagination, this was in carousel container and rightfully so, as it was controlling the position of everything inside. However, this also caused the issues I described, not really sure why.
All I did to fix this was move carousel__control out of the carousel container - basically right above it in the document. Then had to set my margins to match and adjust it's position. I couldn't keep the margin: auto and top: 0. Once I adjusted those two properties, everything started working as expected.
I have updated the pen here: https://codepen.io/joshrodgers/pen/MWBPXBx
Thanks,
Josh
I've literally troubleshooted everything on this!
View Here
Sometimes the slider is not loading full width and leaving a space to the left of about 150px. Only sometimes. If I hit Inspect Element it scales correctly.
Is this a JS issue or a CSS issue, is there a way to force full width on the slider.
I've checked all the JS and debugged turning things off and on, yet no solution, I've turned off the CSS Animations, no difference, I have a margin-left:0px!important; on the slider yet it doesn't make any difference.
Any help appreciated!!!
I am trying to create a parallax starscape. This is actually not difficult at all. I am using Velocity.js which makes the endless scroll very smooth. I have noticed though that at certain viewport sizes the image jumps for some reason. I have tried to research this problem and tinker with my code, but to no avail. I made a fiddle https://jsfiddle.net/hunterjr88/gkae3up5/1/ , to show what I am talking about. Resize the window and see the image jump as it scrolls.
$(document).ready(function(){
function infinite(){
$('#stars').velocity({'backgroundPositionY':['100vh','0vh']},
{duration: 2000,easing: 'linear'});
infinite();
}
infinite();
});
I don't know velocity.js but I can see the issue and can explain what is going on.
Your scroll detect an end in scrolling and since this is an infinite scroll, which will keep on scrolling without stop, when it detects the end it will jump the scroll back to the top, this is why you see this jump.
As I told you I don't know about velocity.js But you need to make sure that your scroll will keep on scrolling smoothly even when the end is detected.
Please have a look at this website. The problem here is, that while scrolling downwards, the script works perfectly fine, but when scrolling upwards, the classes of the sidebar navigation do not change immediately, but only on scrolling a pixel or so further in the upwad direction.
Please help.
EDIT: I've even tried changing the default offset in the waypoint js to -1, but doing that resulted in the reverse; now the same problem occurs during downward scroll.
EDIT 2: SOLVED: Changed the dimensions and top alignment of the slides which covered the screen. Thank you.
I see you are using Waypoints in order to change the nav menu, the main problem is, the menu are changing when the div are exactly on the top of the page, so you might need to set up the div to trigger on a certain range.
Hopefully waypoints has the offset parameter to adjust and dampen this common problem.
$('.thing').waypoint({
offset: 250
});
Here's the documentation: http://imakewebthings.com/jquery-waypoints/#doc-options
I'm using a jQuery plugin called jCarousel Lite to create a vertical scrolling Twitter ticker. Everything works fine, except for the fact that some tweets aren't shown completely. They're cut off before the last line of text. I can't seem to figure out what is causing the problem and it seems to occur more or less randomly too.
The page at http://www.reekx.nl/ shows the Twitter ticker in action (bottom right, titled 'Reekx op Twitter').
Is anybody able to tell me what's going wrong here and how I can fix it?
The Carousel sets a height for the elements, and at the same time you have overflow:hidden in your CSS.
This bascily means you are telling the DIV that it should be 104px heigh, and all overflowing content should be hidden.
Ill try to find if you can disable a fixed height in carousel mean while :)
Could you try playing with the "fit" option?
You can try playing with the options, which can be found here: http://jquery.malsup.com/cycle/options.html
But the 2 which is relevant should be:
$('#stwitterThing').cycle({
fit: 1,
height: auto
});