I have an idea I'm trying to implement.
I want to display half a dozen pictures on a screen, in say a circle shape, and as I hover over one with the mouse it fades from grey and white into full colour, maybe even getting a little larger, or generating a drop-shadow effect which stays while the mouse is over it.
Although I'm not too shabby on VB6 and SQL Server, my web development experience extends about at far as using notepad to generate raw HTML to display some favourite folders, links to websites and documents etc, in Active Desktop.
So guys, what programming resource websites should I be looking at, such as w3schools.com and specifically whether I should be using JavaScript or some other method ... also specific method calls to look at would be good.
I'm not after "here ... try this code" and then 10 screens of code to cut and paste, I'm after tips, such as "for the positioning, look at www.thiswebpage.com and look at XYZ" and "for the fade effect, look at ABC method on JavaScript" or whatever.
EDIT: 14/07/2009 - Just thought that this might be pertinent. I'll be hosting the pages on a Google Apps hosted website.
Also, the black and white fade effect wasn't the only effect I was considering, it was just one possibility. Other nice, subtle effects might be considered.
What you want to implement shouldn't be all that difficult. However if you do not know any JS then W3C schools is a good place to start.
You should also check out Mootools. It is a great framework for all your JS needs. They also have some great demos you can try.
For general effects and starting point for this type of user experience: JQuery
From there - research jQuery plugins that do this type of thing. Good search terms may be carousel.
Raphaël is a very nice Javascript library that can do everything you want. For instance, they have demos with drop shadows on images and with image rotation.
For that type of work I like to use Scriptaculous. It has a number of animation commands that are easy to use. You can run a bunch of effects in parallel on a DIV, so you can easily perform a MOVE and a SCALE effect on the same object and it handles the synchronization.
You can do all of this with regular old JavaScript.
Here is an example of a MOVE:
new Effect.Move('yourDIV', { x: 0, y: 0, mode: 'absolute' });
You could probably get a quite similar effect done by using some JS library which can animate CSS properties nicely. For example Scriptaculous and jQuery can probably fit the task and should be simple to learn.
The basic idea would be that you have an image in a div. The image's transparency can be set to 0.5, so the div's background color shades through it. This way you can get an effect similar to a black and white image with the correct choice of a background.
If you want an exact black and white effect or such, you will have to generate black and white versions of your images, or use the HTML5 canvas element to manually apply color transforms to the images. That won't work in older browsers and internet explorer, though.
Learn JS, you can learn the syntax from http://www.w3schools.com/JS/default.asp
Expand this knowledge with articles from known writers, like Crockford.
Salt it all with learning one of the leading frameworks (I like Mootools).
While doing steps 1-3 code, code, and do more coding.
You will need some form of Javascript, and if I were doing that I would look at the Script.aculo.us library. (An immediate effect could be done with CSS, but for a gradual fade, you will need Javascript.)
Related
I hope this Question is still accepted in Stack Overflow since What I want to Know is The technique to make this effect. Recently I found a very cool website Landing animation that give effect such as light particle (this looks like parallax.js as far as I know) that moving while we move our mouse and a Luminous effect while hovering in a specific location.
I know fully that we can Achieve Hover using css and light particle using javascript, but how can I achieve this while using a canvas like in this website for example? when I tried to inspect element of this site, it seems using canvas to achieve this, so I'm curious if I want to make a website like this, what is the technique I must learn since I'm quite confused where to start if I want to achieve this kind of effect?
reference site: Genshin Impact landing page
the effect that I want to achieve:
Can someone help me or tell me where must I start if I want to achieve this, since I want to try learning to make this kind of cool Effect using css and Js?
some article that I read:
2-ways-to-create-an-animated-particle-background
particles-animation-codepen
particle-animation-code-snippets
easing-animations-in-canvas/
how-to-achieve-this-hover-effect
Websites like these are built using WebGL which uses GPU to render these 3d effects. GPU usage is only possible through the canvas as of now.
There are various javascript libraries out there through which you can achieve such results. The most popular among them is three.js. It is used to build amazing 3d websites nowadays. Some other libraries are babylon.js, particle.js etc.
There is an effect of pointing to a special element of image with line.
See example of crocodile at http://snapsvg.io/.
When the image appears at first there is no any pointing with lines:
Then after scrolling appears lines with hints:
I know there is https://github.com/julianlloyd/scrollReveal.js and a lot of other js libraries for effect of appearing.
The question is how to make this lines, place them at the exact point on top of usual image (not SVG) and animate lines on scrolling?
Would be great to know the name of this approach/effect (what to google) and see reviews on good/bad experience, or js libraries.
Update: want to see resolved issue with image resizing and exact pointing,
In most cases, see example at http://www.sitmed.com.br/produto?id=2, image has fixed isze and is not scalable, this will not work for big or small screens.
I think it is possible to write scaling library in javascript, using svg/canvas or even plain div.
Otherewise points will jump on image scaling.
To make these lines and place them at exact position:
The easiest is to use canvas or svg. Here are a few links to do that.
Drawing lines on html page
Drawing arrows on an HTML page to visualize semantic links between textual spans
Placing the lines is easy if you're using canvas. If you are using images for lines, you can place these lines with respect to the big crocodile. Not a big deal.
Animate lines on scrolling
A good place to start with knowing about animations is to learn any animation framework. I would suggest Greensock Animation Platform(GSAP). It is open source and also well supported. They have good tutorials and docs for beginners. You can animate in a very abstract manner using GSAP. Rapheal.js is also good for animating svg images.
As for as scrolling is concerned, you can find many plugins including the one which is mentioned in the question.
Just use a parallax scrolling type js library such as Skrollr. It's very easy to just make the lines a div with a background color, and then as you scroll the page the div grows in length.
The effect you are describing makes me think you are looking for something like flow or organization chart "connectors" which anchor arrows in a chart to glue points on each element. In more general graphics terminology these are likely just known as "line anchor points" or something similar.
JointJS is a great charting/drawing library for HTML5 and SVG that could make what you are doing fairly easy to do, but a simpler "CSS only" might be all you need. If you are you really looking to animate the image then the more sophisticated javascript library approach might be worthwhile. JointJS uses Raphael and Backbone.js so you get a lot of power tools in the box.
You can use this library for drawing SVG lines, its quite configurable and well documented. You basically need to specify your "From" and "To" elements and a line will connect them for you.
Then you can play with the line's stroke-dasharray and stroke-dashoffset properties on scroll to achieve effect of the line being drawn.
More of SVG animation here
I have used this approach and its quite cool looking, hope this helps
I think the best way to implement this depends greatly on what animation you're going for. To reproduce something similar as in your example, you could just stack different images (one for the crocodile and one for each component). Then as you scroll, you could change the z-index of the crocodile and use css animation to "wobble" the size of the element you just revealed. Put all of the images in one div together, to make sure they scale together and align nicely and you're done.
But for something else the work might be completely different of surprisingly similar, I really don't think there's one solution that fits all needs, except if you want to use the canvas as already suggested, but that depends on the complexity of the graphics you want to reveal.
If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.
But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.
Here's the link:
https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=
And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.
Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.
Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.
Thanks in advance for all your suggestions ;)
that takes a lot of skills. I believe its achievable with processing.js
http://processingjs.org/
Take a look at this [quote]:
So, how is this eye candy accomplished? Through over 6000 lines of
(unminified) JS. MobileMe usually uses SproutCore for its
applications, but after looking through the source code, I didn’t find
a single reference to it. There did appear to be some resemblance of
a library being used in the login page, however, but I think it is
pretty custom. There appeared to be a class for each of the visual
components on the screen, at least one if not two separate animation
libraries (one 2d and one 3d), a particle rendering library, and
libraries for dealing with canvas drawing and DOM manipulation.
So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js
I hope this helps.
I'm looking into a solution for work, where you have a two page spread of the book to preview. Either side of this, you can hover in the corner to create a pseudo-flip and then click the mouse button to actually turn the page. I know there is many Flash solutions out there, but in this case we cannot use it... So we are looking for a possible solution that can work across all major browsers (yes, including IE6)...
I looked a few canvas solutions, but with Google's canvas extension for IE, these will terribly slow. So was thinking about an SVG/VML solution, like Raphael Javascript library. This could be good, but then trying to look into how to code this, without examples, could be a challenge with the time constraint.
Is there a solution out there that fits (or almost fits) this problem?
How about the SVG Flip solution by Paul Brunt? It seems to do exactly what you ask for, using svg and javascript.
Here are a few demos for different browser generations:
Book flip via CSS3 transforms
Book flip via CSS2.1 absolute positioning
Book flip via DHTML
What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?
I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.
jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.
There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.
The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.