So for example, instead of facebook.com loading up like this below:
I would like the webpage to load up with a callout to a specific section with the background darkened:
And to have a step-by-step callout sequence going on to the next callout:
What's the correct term for this kind of setup and do you have any good tutorials to share for this?
Related
I had a quick search for this problem and couldn't find anything that satisfied both parts so I hope this is ok to ask:
I am creating an interactive map which has an aerial image of a location as a background, with small icons overlayed over the top. These icons, when clicked should open a popup window with images or videos that have been taken in those locations, much like a google map.
I have found code to allow me to layer images over each other here:
Html Image over image
And I have found code for a popup here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
And I can get both of these elements to work separately on my webpage, however I'm stuck as to how to combine them so that the image I have overlayed can be clicked on to trigger a popup.
It's been a while since I have coded in HTML and I can usually handle these kind of challenges but I'm finding myself a bit out of my element here.
Thanks!
I am surprised by the display system of Youtube. When we are on the main page https://www.youtube.com/ and we click on one link of the menu at the left side to go to this page for example https://www.youtube.com/feed/trending, there is no flashing when going from one page to another.
It looks like the new page is preloaded and then display only the difference with the page before.
Furthermore there is the progress bar system (like this one http://ricostacruz.com/nprogress/) which ends all the time at 60% on the current page, then starts at 60% on the new page and go straight to 100%.
Any clue how they do that? Javascript, specific server configuration?
Thanks
This is a feature of frameworks like Angular or React, as a single page app (SPA), which use data APIs to load data and two-way binding to dynamically update only the things that have changed.
For a project a site is needed where when first loaded an animation appears that fades away and reveals the content of the site. I am fine with creating the animation and all. What I am not sure about is where to place it.
From a site ia point of view I see it like this. Either have the animation on the index page and once done remove that element with js or $ and reveal the index page. This means a reload will always show the animation again. This also means a click on the main logo that leads to the index page will also play the animation again. Something not really wanted or needed.
The only other option I see is having the animation on the index page and once done redirect to the home page where the site content is located. Like this a click on the logo can be set to either the home page or the index page. The info on the home page is also visible without watching the animation again since the home page has a separate nav link in the menu. Only if desired can the animation be watched again by clicking on the main logo.
From my perspective it will be the later. Though I ask you is this good practise? Is it OK to just have an animation on the index page and everything else on the home page?
I was thinking to either post this in https://ux.stackexchange.com/ or https://graphicdesign.stackexchange.com/ but I think this more concerns code architecture rather than design or ux because as mentioned the animation could also be loaded dynamically on the index page and once gone the content is shown on the index page. So you see I am not asking for opinion but rather for the right logic to tackle this task.
What method is best applied for this scenario? Would you consider having the animation on the index page and then redirect to the home page?
Linked
https://stackoverflow.com/questions/22090313/show-an-animation-before-show-my-index-html
https://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-using-jquery
http://www.submittoday.com/splash_pages_and_search_engine_optimization.html
http://stackoverflow.com/a/22090389/1010918
https://stackoverflow.com/questions/30573395/page-loading-animation-method
https://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation
I'm working on a web project and I want to load my webpages with an even transition. What I get right now is my photos and background downloading in a curtain-like manner. I want it to show up when it is all loaded instantly.
I don't mind if there is a progress bar or something but not the curtain-like manner.
I used the prefetch/prerender html 5 tag but with no success..
visit here :
http://hellenic-jewls.com/
and then try to hover to another webpage to see that my images are downloaded progressively like a curtain :
e.g. http://hellenic-jewls.com/classical/
ofcourse when the webpages are cached it's ok.
HTML5 prerender/prefetch doesn't work that way. You use them to hint to the browser that you think that page will be visited next and should therefore be prerendered. There is no guarantee that this will happen though... it's up to the browser to decide if it wants to prerender the page.
Further, there will only be one page prerendered at any one time.
What you can do is hide your images, then use a script like https://github.com/desandro/imagesloaded to signal when the images are loaded, at which point you can show the images (with a fade-in transition if desired)
I have to create a web page which can be set to full screen(I mean the real full screen,not like press the F11),in the full screen there should be some words displaying.
Take the http://stackoverflow.com for example:
Normally,it show its contents(the questions),but someday,maybe a VIP come to visit the page,so we want to replace the whole page with a welcome screen.
Of course we can replace the https://stackoverflow.com/index.html (suppose it is the index page) with the welcome text(welcome xxx to our site...) in the server side.
However this is not convenient,and the text can not be full screened.
So I thought the flash,I can add a controller button at the page,when required,I click this button,and set the welcome words,then a flash will start to play with the sepcified words in a full screen model. It would be better if the flash can show the text with a Animation.
I have never did the flash development,so I want to know if this is possible?
BTW,can all the clients change to flash with juse one click?
I mean I click the controller button,then all the client who is visit this page should see the contents replaced by the flash at the same time.
I am not sure if you guys know what I am meaning. If not,I can update more details.
I am really Anxious, Thanks. :)
Since you're starting from scratch with Flash, I made a quick example of what I think you want to do. http://clearmpls.com/temp/fullscreen/ - the source files that I made this example with can be grabbed from here: http://clearmpls.com/temp/xml-loading-fullscreen-thing.zip
I used the Flash IDE to create this. You can grab a 60-day trial from Adobe's site here: https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash
This example shows examples of these functions:
- it loads an XML file with text data
- displays that data in a textfield on the stage
- gives you a button where you can toggle back and forth between fullscreen and regular
- resizes the stage and textfield based on what you have written in your XML file