i'm new in javascript and especially in animation. The challenge for me is to make a letter oscilate back and forth max 30 degrees from the sides. The picture i uploaded is an example of the the animation, the letter will move from the upper right corner or from the pin but i think that is harder.
I need some guidance into this if anyone can help please reply.
Thanks in advance
because i'm new i cannot post images so here is the link: http://i.stack.imgur.com/byzUC.png
Well, this took far longer than I care to admit, and is only reliable in (from my own limited testing) Chromium 12+ and Firefox 5+ on Ubuntu 11.04 (it does not work in Opera 11). That being the case I'll show only the excerpts to cover Firefox and Chromium, though the linked JS Fiddle has vendor prefixes to at least try with Opera (even if it fails). Using the following mark-up:
<img src="http://i.stack.imgur.com/byzUC.png" id="envelope" />
The following CSS produces an (infinitely) oscillating envelope for you to adjust to your preferences:
#envelope {
-webkit-animation-name: oscillate;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: infinite;
-moz-animation-name: oscillate;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: 10;
-moz-animation-direction: infinite;
}
#-webkit-keyframes oscillate {
0% {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 108px 23px;
}
33% {
-webkit-transform: rotate(15deg);
-webkit-transform-origin: 108px 23px;
}
100% {
-webkit-transform: rotate(-20deg);
-webkit-transform-origin: 108px 23px;
}
}
#-moz-keyframes oscillate {
0% {
-moz-transform: rotate(0deg);
-moz-transform-origin: 110px 26px;
}
33% {
-moz-transform: rotate(15deg);
-moz-transform-origin: 110px 26px;
}
100% {
-moz-transform: rotate(-20deg);
-moz-transform-origin: 110px 26px;
}
}
JS Fiddle demo.
Given the spectacular failure rate of this approach, though (it certainly doesn't work in Opera 11, and I can only imagine that it achieves nothing in IE...) I'd strongly suggest an animated gif for the sheer simplicity and cross-browser compliance.
Related
I want to rotate label with infinite iteration, currently it is working fine on iOS devices but on android it only rotates for 2 sec and then stop.
Below is my CSS code
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
font-weight: 900;
}
.spin {
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<Label text="rotate value" class="fas spin"></Label>
I'm not sure if its a bug, can't expect {N} to be inline with Browsers as we are dealing with native elements here. The hack below seems to work,
#keyframes rotate {
0% {transform: rotate(0deg);}
99.9% {transform: rotate(360deg);}
100% {transform: rotate(0deg);}
}
I have a figure that wraps a few paragraphs as siblings; the code for which is down below. Also, feel free to run the snippet and hover over the area.
I also have the following style rules to scroll the paragraphs up upon figure:hover...
figure p {
opacity:0;
}
figure:hover p {
opacity:1;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
margin: 0;
line-height: 50px;
text-align: center;
-webkit-transform:translateY(100%);
transform:translateY(100%);
-webkit-animation: scroll-up 5s linear infinite;
animation: scroll-up 5s linear infinite;
}
#-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
#keyframes scroll-up {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
50% {
opacity:1;
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity:0;
}
}
<figure class="fig_a">
<img src="my_url"/>
<figcaption>
<h2>Hover Somewhere Around Here</span></h2>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
View more
</figcaption>
</figure>
Note that the opacity style results in all the paragraphs becoming 100% transparent at the same time. As the post title suggests, I'm looking for a different style; one that allows for a more nuanced transition. Specifically:
Question: How can I have each paragraph follow its own opacity transition in tandem with its relative position in the scroll transition? In other words, paragraphs that are higher up on the page are more transparent. Likewise, paragraphs who are lower on the page are more opaque.
CSS, JS solutions are all welcome. However I am not working in a jquery environment, so I must use native JS (if JS is needed at all).
Right now I am using Rico St.Cruz brillant working query.transit library but now I have to change some things to do with classes instead though not being this firm in CSS transitions. I tried to
replace:
JS:
$("#target_element").mouseenter( function() {
$("#arr_left")
.transition( { x: 3 }, 300, 'easeOutSine' )
.transition( { x: 0 }, 300, 'easeInSine' );
};
}
with:
JS:
$("#target_element").mouseenter( function() {
$("#arr_left").addClass('hint');
}
CSS:
#arr_left.hint {
-webkit-animation: hint_left 600ms;
-moz-animation: hint_left 600ms;
-o-animation: hint_left 600ms;
animation: hint_left 600ms;
}
#keyframes hint_left {
0%, 100% {
-webkit-transform: translate(0);
-moz-transform: translate(0);
-o-transform: translate(0);
transform: translate(0);
-webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine */
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
50% {
-webkit-transform: translate(3px);
-moz-transform: translate(3px);
-o-transform: translate(3px);
transform: translate(3px);
-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); /* easeInSine */
animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715) ;
}
}
but this new code does not work.
1) What I am doing wrong here?
2) What is the shortest code (browser compatible) to reach this?
Addition: I’d like to keep the "hint" class generic to address via JS with each arrow has a specific own translation property. Thanks so much in advance!
EDIT:
http://jsfiddle.net/bg7w6jmh/61/
I added a fiddle. Note: I need the extra container for the arrow because it’s animated (rotated) in other places.
The aim is to make the little arrow smoothly move to the left 3px and back in to indicate the target_element being animated on click or swipe. For the values and easing see the keyframes. Thanks for help!
Happens to be ok now. While I was working endlessly on my fiddle I recognized that I missed a round bracket at the end of my event declaration…
I've checked CSS-TRICKS and any other site Google offered me up to page two of their list of links, so my only assumption is I'm misunderstanding how this works or doing it wrong.
What I want is for an image to slide in from its current position to the absolute center of the page. As it slides, I want it to rotate at its center, spinning like a perfectly-balanced wheel. As it slides and rotates, I want it to appear to come towards the user. I want to do this while still keeping the image flat and unskewed.
What it does instead is rotate the image clockwise around and down back towards the left side of the page and off of it.
Here's my code (borrowed from animate.css and changed to suit my needs):
#-webkit-keyframes rotOutZm {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
opacity: 0;
}
}
#keyframes rotOutZm {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
opacity: 0;
}
}
.rotOutZm {
-webkit-animation-name: rotOutZm;
animation-name: rotOutZm;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Currently, my code does not take into account the starting point of the image, which will be wrong/messy when I have a row of images. Is there a way to dynamically figure from their starting locations, if they need to slide up to the center, slide down to the center, etc? I'm pretty sure this is a job for JavaScript or jQuery but I'm not sure how to code that.
Am I simply expecting too much of the animation functions? Should I simplify my design to not do this due to complexity?
EDIT: Here is a JSFiddle showing the code in action. It's an image with a small delay to the animation so you can see the image and then watch how it animates to see my problem. My apologies for not providing this sooner.
JSFiddle
Sure you can do it:
FireFox Live example
#keyframes rotOutZm {
100% {
margin: -50px; /* image is 100x100px size so... */
transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
opacity: 0;
}
}
.rotOutZm {
transform-origin: center;
animation: rotOutZm 2s forwards 0.5s;
}
P.S: Expand the above also for -webkit- and other vendor prefixes
vw and vh are the Viewport sizes. 50vh is half the viewport height
Note that is extremly important the order you place your stack of transform, i.e: if you move translate3d to the end or the transform rule you might get unwanted results.
I'm trying to learn more about front end web dev and trying to see the page sources of different cool elements i find on the web. I came across this and was trying to understand how they did the css for the countdown. I only understand parts of the html and I've found where they keep the example:
<div class="countdown-container" id="main-example">
it would be much clearer if i was able to reproduce it in jsfiddle but i can't. Any insight is appreciated.
To achieve this "flip-down" effect you can use css animations or transitions.
Here's a quick look at how to do it with css animations(minus the styling). Transitions will work similarly, but will require a change in state(such as :hover).
#-webkit-keyframes flip-top {
0% {
transform: rotateX(0deg);
transform-origin: 50% 100%;
}
50% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(-90deg);
transform-origin: 50% 100%;
}
}
#-webkit-keyframes flip-bottom {
0% {
transform: rotateX(-90deg);
transform-origin: 100% 0%;
}
50% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(0deg);
transform-origin: 100% 0%;
}
}.top.curr {
z-index: 1;
-webkit-animation: flip-top 2s ease-in infinite;
}
.top.next {
z-index: 0;
}
.bottom.curr {
z-index: 0;
}
.bottom.next {
z-index: 1;
-webkit-animation: flip-bottom 2s ease-out infinite;
}
Here's an example to play around with: plnkr
note: I only prefixed for chrome, so you should open it with chrome or add additional prefixes.