How to show user that swipe is possible on main page - javascript

I have a few slides on main page but for user it's not clear that another views are available. I would like to show a demo that it's possible to swipe left by showing an piece of next slide. I just made next slide show, but it's not smooth.
$scope.nextSlide();
setTimeout($scope.prevSlide(), 1500);
How do i do swipe demo?

I would recommend to use an animated gif that shows the user the functionality. There are a lot of virtual tours like Intro that also could help.

Related

Delayed / animated scroll presentation

Anyone knows what I can use to create an scroll effect like the one of this website? https://www.kissthebride.fr/
When mouse wheel is used the presentation pages are shown one by one and the user is forced to stay some seconds at least on the page (if he doesn't use the right navigation).
I built my site using React. It has a pinned site navigation menu on the left, a pinned page navigation menu (to navigate through the current presentation pages) on the right and the main content on the middle. I need to apply this effect to the main content only and keep the right and left parts as they are.
The effect itself
Animation ideas
.

Ideas About How Speed Up Page With Javascript

I've built that page. and it's using the framework vue.js 2 and Jquery.
It's blowing out my head because that page is very slow.
Could you expert guys help me with some idea about how to speed up it.
Thank Guys.
The page is that:
http://softwareapqp.com.br/teste/public/pecas/21/cronograma
you can click in "editar" button and in blue button which opens you can try to drap and drop it. You'll see how it's realy slow.
or, you can click in "Desenvolvimento Fornecedores" or "adicionar atividade" and see how the modal is slow to open.
Had a quick look, your right it's not a seamless experience. It doesn't look like a problem with JavaScript, this is more of a UI/UX problem. One thing stood out, you have a horizontal scroll inside a vertical scroll inside the vertical scroll of the page itself.
Maybe you can have panels with left right panning navigation arrows that asynchronouously loads content when the user clicks the arrows instead of scrollable windows. This way, you're only loading what the user can see and scrolling the page wouldn't be such a pain. Only load the data/HTML when it's useful, otherwise it's just bloating up your memory/DOM.

How can I make smooth transitions between webpages of the same website by sliding only part of the screen

In my webpage right now I have three buttons each filling a third of the page width and all the page height. i want to make it so if I click on the first button the second two slide off to the right and the first button remains on the screen, I've done a bit of research and come up with nothing. if you need more information let me know thanks in advance!
You can do this with css and js here is a tutorial from css-tricks

scrollbar insde one onther scroll bar

Hi to all,
i was making a slider where i want some thing like below image.
more in details vise in a picture
actualy one of my slider slide got a scroll bar .where i want it as when the user first scroll the page first the slider scoller should scroll and then the slider scroller end ,the page scroller should work normaly.
i have no idea how to do it in jquery but seen those kind of effect in many sites.
please help me and thanks in advance

HTML5 slide menu form right to left

I am developing my first HTML5 page for mobile and desktop and I need to implement slide menu button! When you first click this menu button it will open menu which covers 50% of my screen and menu contain something similar to "log in bar"(some inputs and some text; like top right corener of FB), and after you click button menu, it will be hidden!
I have implemented some solutions but I'am not satisfied with them!
One variant of my menu is to do everything right but it is visible to user all the time! Animation works fine but when I want menu to be hidden, it becomes visible right of screen.
Other possible solutions : picture and buttons go under the menu! When it opens, it "push" pictures and buttons below.
P.S i tried to add image but it seems that I don't have more than 10 reputation! Also, I didn't watch tutorials for jQuery so if any solution is theer in jQuery, please suggets me..

Categories