I'm in the process of creating an interactive whiteboard application using PHP and jQuery. Creating a deck is not the issue, nor is applying a canvas overlay to the page so that I can write on it. I'm an amateur coder and completely self-taught. This is part an exercise in learning more, and part a means to give me a great tool to use in my teaching practice.
The problem that I'm encountering is applying a CSS transition to the canvas element, so that as the slides change, the canvas element moves as well, in order to avoid having the previously made drawings still present on new slides.
I have gotten the canvas element to move with the slide transition, however, when this happens, the canvas is rendered useless (on the current slide). If I transition back to the previous slide, I can see everything I've drawn.
I'm hoping that this isn't too vague of a question or explanation of the situation to get help, but any pointers would be great.
Figured out the problem. I thought the original script was taking into account the distance the slides were transitioning, but it wasn't. I added in a line to take care of this, and it works like a charm.
Related
We have a simple website; readable, professional colour-scheme etc.
We are trying to make it have an easter egg, so essentially:
1. (Upon clicking a button or something similar) the cursor becomes a circle
2. Through this circle, you can see a 'hidden' website (the same website as the normal one bit with a different colour scheme, little drawings and animations scattered around and within website components, different fonts etc)
The possible strategies we have come up with, and problems with each are:
1. Strategy: Using 'mask-position' to create a moving mask (the cursor)
Problems: Neither the top nor bottom layer would simply be an image. The top layer would be the basic website, and the bottom layer would be the same website but with a new colour scheme, little animations and illustrations hidden in and around the website components. Potentially the top layer could be an image of the website as it was at the time of clicking over to the new cursor, because the only bit that needs to be interacted with is whatever is inside the circle (the hidden website), but the problem with this is that the simple website still has some small things that move, which a simple image would not capture. Could potentially remove these but if there is a solution which avoids this, it is preferable, as the 'image as a top layer' solution seems clumsy and problematic anyway.
2. Strategy: Use an iframe to show the hidden website within the normal website.
Problems: However, we are unsure how to make the iframe a circle, and how to make it move (based on the cursor position).
We have not tried much as we are struggling to figure out what to try to begin with. Ie I am not sure how to make a mask-frame not using images, and I am not sure how to make a moving iframe which is also a circle.
Any advice, strategies/tricks, or even examples of what I am describing which I can use to explain/confirm the concept to others trying to work on it too would be much appreciated.
Thank you!! :)
I'm looking for a similar solution like this: https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/ using Three.js for my project.
When I implemented the demo to my local environment and start modifying it, I got stuck where I wasn't able to add a background on the mouseover/hover parts, because somehow the Three.js objects are placed behind the background color.
Note that this does work whenever I change the body background color, but as soon as I try to add CSS background color to the underlying classes of the body the Three.js objects disappear behind it.
Applying z-index to the img classes did not work either.
Sorry, I'm still very new to this but got stuck on this topic and couldn't find a proper answer.
Hope someone can help me out here,
Thanks.
I've been working on building a tile-based display grid for canvas. This is what I have so far: http://jsfiddle.net/dDmTf/7/
Some problems I'm having, and can't quite grasp are:
The initial load time is ridiculous... I don't understand what I'm doing wrong - fixed, found out I was rendering ^32 more than I was supposed to
The hover effect, which "should" just highlight the border of the tile, erases it, and I have no way of recovering the previous tile without re-rendering the entire canvas.
How do I use tilesheets, providing me a single image instead of a bunch of small ones
Resizing the window (which resizes the canvas) also erases the canvas. Do I need to re-render? Or can I maintain state of various things when width/height is changed - added an onresize callback, which re-renders the map. Might not be the best way though?
Multiple layers? How would I go about allowing transparency .png files overlaying each-other
Those are the main problems I'm stuck on right now, and any guidance would be majorly appreciated.
Also, if you have any pointers for my javascript, feel free! I'm learning it more as I go, and I'm sure I'm doing a lot of things wrong.
Edit
As an FYI, I just copy-pasted the sprite map currently being shown on the jsfiddle. It's not the one I'm planning to use, but it was easier than uploading one. I plan to maintain a 32x32 grid instead of (what appears to be) a 16x16 grid from that tilesheet
Edit
I've got the a 32x32 tilesheet displaying on there now, but the hover effect is still breaking it, and I'm not sure how to "know" what the old value was.
The problem is that you are not redrawing your tiles after 'mouseout'.
You either need to redraw the single tile after you move out of it, but this can get tricky as things get more complicated or better yet on mouse move do the following.
Clear the canvas
draw the grid
draw your tiles
then do the highlighting/clearing that cell.
If you end up having any sort of animation this is the process that will be used anyhow otherwise as something moves from one tile to another it will leave ghost images behind.
I'm struggling to build a simple animation based on those old clocks with flip-down numbers. I added an image below copied from a freebie PSD found on Premium Pixels:
The biggest problem I'm running into is building a "flipping" animation using jQuery all in HTML/CSS/JavaScript. The only tutorial I've found is from this net tuts+ article which actually uses images. It splits the top and bottom half of the clock into two different image sets and replaces them for each second that passes by...
This method isn't realistic in a website since it provides no actual context for readers. I'd prefer to have the numbers hard coded into HTML and perform the flipping animation solely through jQuery - preferably no images except background ticker boxes. Or to put it another way the numbers are coded into HTML but the clock itself is a series of rolodex-style bg images.
I hope I've explained this well enough.. I've been struggling on this for a few days and I honestly have no idea how to approach this script. Maybe by splitting the top and bottom halves into different divs, then change the internal numbers for each second that passes? I'm fairly well-off in jQuery but I am weak on animations.
Thanks in advance for any support!
I think I would attempt to do something where the text is duplicated for the top and bottom. Then using images and css to only display each half appropriately.
The next step would be creating the illusion that the text is flipping with the image. I am not sure how you want to do that. I think it is a matter of sizing and speed. The sizing of the text in relation to the image and the speed at which it flips from the top of bottom.
The final part of the animation is having the top half ready with the next number and the bottom half queue up on completion.
I don't have any actual code that will help, but I hope this concept is something that will work out.
jsfiddle here
I'm bored at work today, so I'm just started building something with canvas to try and teach myself some stuff. I've gotten stuck on this portion and have decided to reach out to the SO community instead of banging my head against the wall some more.
The basic idea is to listen for a click and then create a randomly colored circle where the user clicks, animating to a larger size and fading out.
It works great when you just click and let it fade out. The problem comes when you have more than one circle on the canvas at once. I can tell this is happening because of how I'm doing my animating loop, but for the life of me I can't figure out how to do it better.
Should I have an animation loop separate from the setInterval that grows/fades the circles? If so, what should that loop do? I feel like I need to separate the placing/growing/fading of circles from the actual rendering.
EDIT: I've notice this only seems to work in Chrome (maybe safari too)
The solution is to unify all of your drawing into one place so that your setInterval callback can redraw everything.
Check it out:
http://jsfiddle.net/ybcHk/7/