Swiper slider vertical split slider transition effect please - css-transitions

Hi there are a few pens which I will show to explain the transition.
Swiper link here https://swiperjs.com/get-started
I want the slide transition to be similar to this demo https://promo-theme.com/olvi/split-screen/ when you mouse scroll one side goes up and the other appears to go down.
I followed this https://codepen.io/dbridgman/pen/KZwGwL but it isn't quite right. It isn't smooth scrolling and in firefox gives a glitch when you add navigation.
I tried to add
transition: all 0.5s ease-in;
to each side but it still isn't quite right. Is there a better transition to use?
Thanks.

Related

.tabViewStyle with animated swiping of tabs

Is it possible somehow to use the .tabViewStyle(.page) for animating swiping between tabs but with a look as the default style?
Basically I want the animated tab swiping but not the tiny centered tab icons that comes as a side effect of using .page instead of the default TabView.
The page feature seems more for swiping similar objects, not different tabs, but the swipe animation looks great, which is what I'm after.
Thanks!
Marcus

SwiftUI fullscreen horizontal swipe with dot indicator

Many apps have an intro view that has fullscreen pages with a dot indicator at the bottom. Sometimes it is used to gather same basic information, sometimes to introduce the app features.
How can I realize that?
I tried the ScrollView with a horizontal setting. The issue is to set up the content to fit the screen and have the edges snap on scroll. Second issue is the have a dotted indicator that highlights the current page.
you need to wrap UIPageControl with UIViewControllerRepresentable.

How to add a scroll bar at the move list view? And user can only scroll specific area vertically

I am using MVC for my project. And I have few views in View. However, I want to know how to add a scrollbar to one view and only make that part can be scrolled vertically.
I have tried using CreateWindowW() for adding WM_VSCROLL parameter, but it does not work.
This is a TUI application, so I think the professor try to make us using a cell as bar, so you can scroll the cell up and down
In PreCreateWindow(CREATESTRUCT& cs), set cs.style |= WS_VSCROLL;.
You may have to respond to WM_VSCROLL to process scroll messages.
Sorry for the confusing. I am resisted to use TUI only. And I misunderstood what the professor needed. So he wanted us to move a color cell so you can scroll up and down for checking player's moves. I am making a Gomoku Game by using C++. So I figure it out, right now my move list view can move up and down for viewing full moves. Thanks for all the answers
enter image description here

jssor Slider sliding behavior

just playing around with the Jssor Slider http://www.jssor.com/ and so far it looks great!
The only concern that I have is that when you tab between for example tab 1 and tab 4, it slides through tab 2 and 3 also. The behavior that I would like is that it slides straight into which ever tab clicked. (ie. 1-4, but not 2-3 also)
Can anyone tell me if there is built in setting or a work around?
Thanks
Decbrad

Hover on dropdown menu

http://www.funky7inc.com/product/detroit-police
if you hover over the area where the dropdown is on "Detroit Apparel" the list pops up instead of only appearing when you hover over the nav.
any ideas how to fix this?
Sure, you only change the opacity of that <ul class="sub-menu">... So it is actually always there, only 100% seethrough... But you can still hover over it which changes the opacity back to fully visible.
I don't know how you change this (CSS:hover of Javascript or something, I tried looking but you have minified CSS) but you can solve this by not changing just the opacity but also the display:block to display:none so it is actually gone, or use javascript $(".sub-menu").hide() or .FadeIn()/fadeOut() or something similar...
It is because you are changing the opacity of the drop down list. Opacity:0 still registers mouse over event.
Instead use visibility property or display:none
When you will hide the drop down using visibility or display:none, drop down list would not register mouse over and hence the list would not show up till the time hover is on the navigation bar.
Hope this helps.