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.
Related
I'm hoping to build out a simple landing page that is a little bit different. Here's a mockup I've quickly put together:
It's pretty simple:
A large text heading in the middle (say, the name of the website / business)
Surrounded by lots of elements, SVG images of varying size (In the mockup, represented by coloured rectangles and circles).
The first effect I'd like to add that sets this website apart is that the elements "float" they slowly move in random directions.
If they collide with each other, they change direction, such that they do not overlap.
Finally, the mouse/cursor/point has a similar displacement effect when hovering over elements.
Here is my attempt at capturing this behaviour in a gif:
I've never embarked to build something quite like this before, is there a javascript library best suited to help me achieve something like this?
In my own research I've found TwoJS who's particle sandbox demo seems to showcase somewhat of the functionality I'm looking to build.
How does one implement functionality similar to the one shown in this gif in a website?
Specifically, the part where the user clicks on a (non-rectangular) area of the image and that area then changes colour.
A long, long time ago when the internet was still young, there was something called image maps. Is that still the preferred approach? I heard about svg, does that provide this type of functionality? What about canvas?
I don't know about image maps to get them in this shape of hit areas.
But I recommend using canvas for these type of applications.
You have multiple options for doing that, being image maps one of them. However, I wouldn't do it with it, nowadays, there are better solutions.
You can either use canvas, as suggested before, for example using a canvas library like http://fabricjs.com/ or, maybe a bit easier, using SVG elements.
The benefit of SVG is that they render as normal DOM elements in a website, so you can debug then in the inspector, attach normal click events to them, style them using CSS, etc.
multiple options for this.
SVGs + CSS
CANVAS animations
FLASH( wouldn't recommend this option.,Pretty outdated)
Plain html css (But this wont be customisable in future for different shapes, a lot of time consuming when compared to other ways and confusing unless written with good documentation.)
html+css way: you can always make most of the geometrical shapes with css and html. But, curves we have svgs to go for and use css/svg transitions for visuals
I'm trying to make my webpage more interactive by making a small town-like map, with different buildings that are clickable and lead to different pages on my site, but I'm having a lot of difficulty animating the webpage with just HTML/JS and also making it stay the same even after resizing the window.
This is my test site right now, for clarity: https://people.ucsc.edu/~anlin/test#
(I am currently just switching between a png of the map and a gif of the buildings moving when the mouse is hovering)
How can I accomplish this, and should I be using something other than plain html/js to do this?
Thanks!
Probably svg would help you out. You can do awesome interactive stuff with svg. Meanwhile, you can also use css to create great animations. It really depends on what you need.
Check this out: https://medium.freecodecamp.org/a-guide-to-svg-on-web-c5932dadca03
Some examples:
https://codepen.io/search/pens/?q=svg%20animations&limit=all&order=popularity&depth=everything&show_forks=false
You can use an <svg> , which is a "scalable vector graphic"
Here is almost an exact example of what you described
https://codepen.io/dudleystorey/pen/ltpmv
i am building a workout website that tracks exercises. Each exercise has a mapping to a certain part of the body (bench press --> Chest)
I am trying to figure out a way to visualize this and i thought of the idea of putting an image of a person "highlighting" the affected muscles. Sort of like This:
(source: aquaviews.net)
Assuming i have found a good picture without any areas highlighted, is there anyway to dynamically "highlight" areas in a picture (the red section) with javascript (client side) or C# (server side) or do i need a seperate picture for every exercise?
You COULD overlay the the base image with SVG or a <canvas> element.
But then you have cross-browser issues, possible alignment problems, and probably a cheesy look.
I'd have an artistically inclined person do the highlights as a separate graphic for each exercise.
But rather than have these as separate images, keep/combine them in a single file -- as a CSS Sprite. Then you get a professional appearance, great cross-browser support and easy, minimal coding.
You can use css to position your links over said muscle group and use a rollover to show the highlighed part...
Edit:
Sorry I guess I should have elaborated. You can absolutely position the elements with CSS and use an image rollover to swap out that section of the image to the highlighted section of that image. You can either do this by putting each muscle group into it's own div and putting an image of the corresponding muscle group into the background image. Then swap it out on rollow over. or you can use z-index and absolutely position the rollover elements where they need to be and change the z-index when needed.
Interestingly enough, I used to be a personal trainer and I did this same thing but did it in flash. That's my recommendation.
However, if you want to do it with JS and CSS, Brock's suggestion of the sprites is likely the way to go.
What you could do, very simply, would be to have an image map that for certain areas called a js function to swap about the background image with the same version of that image with the highlighted sections. Rather than several small images, you have the same image but with one part highlighted.
One question though, will you be doing compound exercises that would require you to have two sections highlighted? For instance, an incline press would highlight part of the chest and part of the delts. This makes the whole proposition more complicated due to the specificity of your roll overs.
i think you seeking a way to do this without requiring separate images, and if so - the answer is No - you are going to need to create separate images for at least the highlighted areas. Short of perhaps using a CANVAS element which has cross-browser issues, I don't believe there is any way to impose a filter to an arbitrary region of an image element.
And even if you Could apply an alpha filter, you would still need the geometry of every shape, so the effort/work is perhaps the same...
Once you have the various images there are sundry ways to approach the problem after that...
This is a simple implementation as i have done this highlighting with a county map. Use an image map. Then find a highlighting script like (mapper.netzgesta.de) mapper.js. All you need to do is have a properly set up image map (image must be suuounded by a div) and a link to this script. The highlighting starts immediately. Please check the license. Ther are several other that scripts that use javascript css and jquery to achieve this same effect. Just research highlight image map in google. Sorry i cant give you a link to my implementation of this as it is on a secure site for work. Good Luck.
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.)