I'm making a product site in Adobe Edge. I have a circle div that needs to grow in a span of, let's say, 2 seconds when mouseover. Then a text has to appear in it. When mouseout, the text must disappear and do the reverse animation back to normal size. The circle has also to grow from its center, not the top left corner. I'v been trying to do this for hours with jquery and css3 animations but failed to get a satisfying result.
This is very easy with edge animate.
make your circle element.
set a key frame at 00:00 on the timeline for the circles width and height.
press Q (the transform tool) or select the icon at the top left of the screen just to the right of the arrow.
The transform tool scales things based on the origin point, which is repositionable but is automatically in the center of the selected object.
go to 02:00 on the timeline.
resize your circle.
set a keyframe for your text at 0 opacity.
go forward on the timeline.
set another keyframe for your text at 100% opacity.
group the circle and text into a div.
right click on that div and press 'convert to symbol'.
go back to the stage by clicking 'stage' on the top left of the preview window.
select the object that you want to use to trigger the animation.
open the actions for that object.
paste the following code into a mouseover event: var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").play();
now make a mouseout event and paste this code: var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").playReverse();
now what should happen is that onMouseOver, the timeline for that symbol plays forward, and onMouseOut, the timeline for that symbol plays in reverse. This way, if the animation is half way through and they mouse out, it will reverse from where it's at back to the beginning.
Probably you would like also to use mouseenter/mouseleave events rather than mouseover/mouseout, if you will nest text div inside circle div.
http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.html
Related
I'm trying to animate a PowerPoint slide, where I'd like the full five dot points to be present on the screen at all times, but on click, each bullet point would individually highlight.
I can get it so they appear on click and then dim after a click, but I'd like all the points to be on the screen at the start, rather than getting revealed one-by-one.
#JohnKorchok is correct - this is not programming. Use as Animation EMPHASIS -> OBJECT COLOR. Effect Options: PER PARAGRAPH. Than double click on each Animation and choose a highlight color AND the original color in the field AFTER ANIMATION.
I have a scrollrect object on a UI canvas that has a viewport object child, and the viewport object has a content object child that stores all of the items to be scrolled.
I have selected the viewport for reference. I want to resize the viewport rect relative to LevelScroller (see hierarchy) in order for there to be a margin around the scrollview, so that the scrolling items do not touch the edge of the gray LevelScroller rect. But the viewport rect is not resizeable. Right now the result is this:
See how the button at the top (1S-Levitation) is cut off by the grey panel. I want there to be a margin between the point where it is cut off and the gray box.
I have tried adding a horizontal layout group to LevelScroller to forcibly add a margin, but this did not work. Why is the viewport not resizeable?
Any help is appreciated
I believe that the viewport is not resizable because it is supposed to manage how your scroll will behave during the user interaction. As an example, you have only one cell in your content container and the user drag it down, once it is released it is supposed to move back to the top of your viewport, and if you put a margin in there it will not be capable of move entirely back to the top.
But hopefully you can do the following trick to have your margin:
Create an empty game object called Scroller and set it as the father of your LevelScroller. Then, set your LevelScroller RectTransform to stretch in both directions, and set the desired margin on the RectTransform Top, Bottom, Right and Left fields. You should have something like this:
LevelScroller as a child with 10 pixels of top and bottom margin
Then create another empty object child of your parent Scroller, and put it behind the LevelScroller. Lets call it BgImage. Now, set the RectTransform of BgImage to stretch in both directions and add an image to it. Ta daaa, you should have now your background with your margins on your viewport.
BgImage working as the background of the LevelScroller
I have an issue on triggering mouse event on a svg.
I am using the library d3.js to handle some graphic tasks. Specifically, when I manually click on a position on the svg, d3 draws a red or blue (depending on the path I am clicking on) circle on it and then returns the d3.mouse coordinates of the click.
Now, suppose I have a set of coordinates and want to trigger programmatically click on the corresponding point on the svg, so that it draws a red or blue circle automatically. How can I achieve that?
I read many solutions here but none allows to click on specific coordinates (while I can easily click on a specific path, for example).
My ideal function would be:
var svgd3 = d3.select('svg#id_svg')
function d3click(x,y,svgd3){
//does the click on [x,y, x,y are relative coord. depending only svg viewBox
...
}
Any idea?
Thanks a lot!
I'd like to achieve the same opening/closing animations as macOS' notifications center, basically having it slide from a side.
Is it possible to do this using electron?
I think it is possible. Electron has everything you need for it:
A Frameless Window is probably the way to go for this.
win.setPosition(x, y[, animate]), win.setSize(width, height[, animate]), win.hide() and win.show() is all you need to animate the window
screen and Display will help you put the window in the correct position
Initial state:
Place window at the side of the screen
Set to smallest possible width
Hidden
Opening:
Show window
Increase width and change position towards center of the screen until the window reaches the desired size
Closing:
Decrease width and change position towards side of the screen
Hide window when side is reached
The content of the window is then just CSS and JS magic, to make it look good.
Check out css animations here
You can position elements off screen with css and animate them in with css
No javascript required.
Here is what exactly I am trying to do.
I have an image with square elements inside it. When i click on top left and bottom right corners of those elements they are surrounded with divs with border. I then have functions to drag and resize those divs(once they are created by two clicks). I want to be able to record the resized coordinates of those divs in text boxes. For example if the image is with height=700 and width=500. Then if i create a square div inside it with coordinates top left(x=190,y=150) and bottom right(x=290,y=250). Then if i drag this div around the image i want those coordinates to change accordingly. Same thing to happen if i resize it.
Here i have added the code in a web site. laughter.free.bg/imagemapping/Img1.html What you need to do is click on top left and bottom right corners of one of the snack packs. Then you`ll see a box on the right with the coordinates of this Green bordered div. I want those coordinates to change when i drag or resize this div. You can see the code in the source of the page.
Thanks a lot in advance.
It is possible to bind functions to the resize event through jQuery.
For example, ur kiroid has a class of ui-resizable. You could use something like:
$('.ui-resizable').resize(function() {
// refresh your coords here from $('kiroid').css maby?
})