So I'm working an a little game that is online. It's a probability game and I'd like to have a few slides that have information and then the actual game. I'm using html & javascript to make the game and then css (which I don't know yet) to make it look better.
How would I go about creating different pages, should I just have an image and then make it opaque when I don't need it and then show another one over it?
The reason I'm asking is because I'm sure there is a much better way to do this but don't know how because I'm new to web coding.
you can make two separated pages.
contain the images one after another .. first image will have JS onclick .. on this function you will hide this image and show the other image
second image will be treated like link to the game page.
Related
Edit: Solved it and what I wanted had nothing to do with lazyloading. I'm leaving the original question and post as it is but removed the excerpt (since the excerpt is pretty much pointless and I'm deleting it on codesandbox.io). The answer which I came up with is below the question.
A user visits a page with 20 images. However I do not want all images to instantly load as the website will feel slow if the images are big or if there are way more images.
If the user is in a certain image, load that image and preload the next 5 images (for example) and not the rest. As the user scrolls, the website will continuously load the next 5 images. I already have intersection observer set up as well as a custom image loading component.
I know of a solution where I keep calling my server as the user scrolls. However I would not like that as it might be too excessive. (And it's an image focused/heavy website)
Preferably solved using vanilla javascript or css. If the solution might be too complicated, I wouldn't mind using a lightweight package. I have no clue as to where to start with this.
Note: The project is running on Nuxt.js
Well I coded out what I needed thanks to Kissu for the article. Although what I wanted had nothing related to lazy image, the article somehow gave me a hint on how it can be done. It was a simple use of a combination of intersection observer, conditionals and "v-if" for rendering that component
Set up intersection Observer to track which image index the user is on.
Add a variable to track the furthest image the user has scrolled to. So our website renders and keeps all previous images on the browser)
Set up a "v-if" as to render the next few images. i.e. "v-if" - Render the image of the index that the user is on + next images. E.g. To preload next 5 image
<imageComponent v-if="lastImgViewed+5 > CurrentImage"></imageComponent>
That's It! Simple! Although I don't know if it's lean or the best way to do this - performance wise.
This question already has answers here:
Can I create multiple canvas elements on same page using p5js
(2 answers)
Closed 2 months ago.
although I have some experience with processing, I am new to p5.js. For an academic work, I want to create a website with multiple interactive experiences. I want this website to be one single page, no links no nothing, just one single scroll.
For this, I would want to have multiple canvases along the long scroll. I would also want that these interactive experiences just start when the user is in the correct position of the scroll. I can think of multiple solutions for my problem, but i am not sure how to implement them, neither what is the best one.
Is it possible to do that with one single page? Is it possible to put the canvas into divs and then display it in order with css?
One other solution that came to my mind is to create multiple pages, but simulate that is just one using some sort of animation to simulate the scroll, this one would guarantee that the user is always viewing the canvas in full screen, but I'm not sure he could control it with the normal scroll bar.
Is there any simple solution? Thanks in advance.
It sounds like you're looking for instance mode.
Instance mode lets you do exactly what you're describing: you can create multiple sketches and add them all to the page.
You can also use the parent() function to put your canvas in a specific div. Shameless self-promotion: here is a tutorial that includes placing a canvas in a specific div.
I would start with getting those pieces working before you worry about the scroll. But once you're ready, I would look into setting up a scroll listener in JavaScript and triggering your instance mode sketches at certain values.
Good luck!
This is what I'm aiming to achieve
I'm making a small quiz game in React Native where you guess the image by clicking on different parts of it.
Initially the image is behind multiple small "blocks" and by clicking on them they disappear.
How can achieve this functionality in the most elegant way?
I was thinking of making multiple small Views each with the same size and onclick they would disappear. Is this a good approach?
Here's the image of what I'm aiming to achieve:
Guess image app
In my opinion, your approach is the only one. If you try to split your image, there will be somethings you have to deal with:
You might have to use some tools to split your image into smaller one. Because the tool's functionalities, the number of your images, the size of image and the way you include and manage your images in your app, this is really unnecessary, unless you want to show off your skills.
With 1 image, if you want to make that level harder, e.g: create more blocks to hide it, you have to split that image again. Even if you have libraries to do that, your performance will be affected seriously.
And these are some props when you use blocks:
No need to split image (of course), so say good bye to libraries that decrease your perfomance.
You can do many things with those blocks, e.g: increasing the difficult by adding more blocks, creating block's animation like rolling or phasing, etc.
If you don't want to set absolute position to your <Image/> component, RN has built in <ImageBackground/> component to meet up your requirements.
Creating something I'm hoping is easy using Easel.js, but still a novice. Simply want to create a 10X10 image grid where each of the images will cross dissolve to another paired image at random intervals.
Can anyone point me to any similar examples or will I need to hard code this using only javascript instead?
Eventually I will load these images from a server but first I need a working demo without any server ajax calls, just load images locally.
If by cross dissolve you mean fade into each other, then you might want to take a look at the createjs.AlphaMaskFilter or the createjs.AlphaMapFilter.To load an image take a look here: The Image doesn't show up on the Canvas
There really is no difference between an image on a server and a local image, it might be even easier from a server.
I am learning to develop mobile applications, quite in the initial phase.
This query is not related to mobile but more to html/css/js.(for
I intend to make a simple game, where a picture is seen, a few options are available and the user can drag and drop these options onto the image.
eg. There is an image of a plant > options are #leaf #stem #flower #bud
The user must drag and drop the correct option to the correct place on the image to get points. i.e Drag the #leaf option onto the leaf of the plant.
Now my problem is the image, the separation of these points, I can't figure out how to do it.
Query in short: How do I access separate points/sections on a single image in html/js for above purpose?
Query (longer version)
I did a little search and realised I can slice the image and recreate it using multiple images, I tried this, it sort of works but it has a a lot of drawbacks:
1)More images mean more space, combined size of the split images was about 1.5x the original image(this is just splitting it into 4 images)
2)For a complex picture, the number of images to slice into is large and hard to manage in css(n00b==me) as they don't just need to be split into a simple X*Y grid but a much more complex split depending on the object in the image.(realised when I was trying to do a simple cell structure img)
3)More images also means more http requests(in case the app is WebView based) which will increase loading time.
It just seemed liked too much of a hassle, there must be a better way.
Then I saw css sprites , I dont need to combine my images like sprites are intended for, rather the reverse. Just access parts of my pre-existing image, as separate objects.I haven't tried this(working on it) and and I haven't seen this being done either, or maybe its being done and I'm not seeing.
Please help guys, my problem is quite simple(I think) , I think I'm just not getting the correct google search terms.
If anybody has any ideas,links, resources and also any clarifications as I may not have put up my problem as clearly as I'd like to, please do reply.
regards,
Rahul Agarwal
You could try to place transparent divs over the main image using absolute position and fixed dimensions. Those divs will be assosiated to the possible options, and when a user drops an option over some specific div, you'll know what points to give.
Little demo using two divs and an animated scaling to show that the positioned divs will scale according to their parent:
http://jsfiddle.net/VK3A8/
fiddel with image:
http://jsfiddle.net/8qLFc/4/