I want to create a page transition in HTML where by clicking an image/text there is this kind of Star Wars hyper jump animation. This means when I click the image/text the page zooms towards that image/text and that image/text turns into a separate page. Does anyone know if this is possible and how to do this? I believe I remember seeing it on a website a long time ago but I can't remember where unfortunately.
The animation I'm describing is similar to this gif https://giphy.com/gifs/bigblueboo-space-scifi-hyperspace-5xtDarHj0ORdxfWtV6g.
Thank you.
You have to use a framework to create custom page transitions, I would suggest swup or barbaJS with gsap
Swup: https://swup.js.org/
barbaJS: https://barba.js.org/
GSAP: https://greensock.com/gsap/
Related
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.
I'm using smooth-scroll.js on my website, and I have an active javascript that creates an anchored link depending on the information entered into option tags. The problem I'm having is:
smoothScroll.init() is executing before the anchor link is initiated, so it just jumps to the link instead of smooth scrolling. I was thinking that using setTimeout() to delay the execution of smoothScroll.init(); would fix the problem, but it still isn't working.
Here's the link to the site. Paper Inventory
My goal is to get the site to smooth scroll to the correct paper DIV when the person clicks on the "Go To Paper" DIV. It should be simple, but because everything is dynamic, it's adding a bit more difficulty than I expected.
If you go to the site to test it, I suggest choosing United Trade Printers, 12x18, 100#, Accent Opaque, Smooth, White, Cover. I don't have an error message yet if you choose a paper that doesn't exist. So That's a good default one.
I'm also using jQuery, so jQuery answers are more than welcome, and would be easier to implement.
Any help is greatly appreciated. Thank you in advance.
Please look at this website. as you see in some sections, when you scroll down the page, the actual page is not going down, only the elements and images start moving for taking some effect. I did my best to implement such thing but I failed how do I can implement such thing (specially taking the effect)?
A very nice site, and a very good example of Parallax Scrolling.
Achieving a site just like that is going to take a long time, but you can start by looking at some parallax sites here, to get an idea of the source code and look through some demo's.
Have a look at this picture:
http://oi43.tinypic.com/5cdm5g.jpg
This is my idea to design an slide show, which each slide can be a div tag and congaing some text or image and the small behind slide is the next one which is a bit transparent and when the user press the space bar or click somewhere the top slide fades out and the next one moves to forward and replaces, then another slide replace as the next one.
I know it is possible by JS, but what about CSS3? I know I have to put code here, but I have just started and do not know where to start. It would be great if some one help me and gives me some hints.
The best resource I have found for CSS3 questions is http://css-tricks.com/
This is another good resource and is updated regularly by the owner. http://css3.bradshawenterprises.com
It will be some advanced CSS3 techniques you'll be using such as transitions, transforms etc..
Good luck
if i have a link on my page, i want that link (and if this can be done easily through css or something, all links) to make the entire body slide off to the left as it fades to white. also, most of the pages that these links go to will be designed to do something else i don't have a clue how to do: Fade up from white, and slide on from the right. Any help is greatly appreciated!
You'd probably do it the way Github do with their Tree Slider. They blogged about it
Here you have a good reference
You'll have to notice that it is going to be a little hard to apply it if your website is already done.