Rotate Image on Slide Down - javascript

I'm currently trying to rotate an image on this site http://theflouringartisans.com/ The goal is to have the arrow images at the top rotate when the contact form is expanded and rotate again when the form is collapsed. This is the code I currently have:
$(document).ready(function(){
$("#contactbutton").click(function(){
if ($("#contact").is(":hidden")){
$("#contact").slideDown("slow");
$(".arrow").rotateRight(180);
}
else{
$("#contact").slideUp("slow");
$(".arrow").rotateRight(180);
}
});
});
function closeForm(){
$("#thankyou").show("slow");
setTimeout('$("#thankyou").hide();$("#contact").slideDown("slow")', 2000);
}
I would also like to have the div #thankyou to fade out after 5 seconds from the form being submitted.
Any help is greatly appreciated and I thank you for your time!

I never heard jQuery function called rotateRight(), but you can do this with css3 rotate and some jQuery mix.
here is css3 rotating animation example, mouse over the green box here.
jQuery:
$(document).ready(function(){
$("#contactbutton").click(function(){
if ($("#contact").is(":hidden")){
$("#contact").slideDown("slow");
$(".arrow").addClass('rotateRight');
}else{
$("#contact").slideUp("slow");
$(".arrow").removeClass('rotateRight');
}
});
});
css:
.rotateRight {
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-o-transform: rotate(180deg); /* Opera */
-moz-transform: rotate(180deg); /* Firefox */
/* if you want to do this move with animate use transition */
transition: .5s;
-moz-transition: .5s; /* Firefox 4 */
-webkit-transition: .5s; /* Safari and Chrome */
-o-transition: .5s; /* Opera */
}

Related

JavaScript Rotating Title

This script I am using creates a rotating text effect for a title on a site I am building. I am wanting to increase the speed in which they rotate gradually, so it starts off slow, gradually speeds up, holds the top speed of say 7x original and then slowly goes back to the starting pace and does this in a loop..
The time in which it takes to rotate is currently set at the end of the function in the '1200' area, so I assume it would need to come from a variable and have that behaviour stored in it within the function? Just lost on where to go next.
setInterval(() => {
const up = document.querySelector('.span-one[data-up]');
const show = document.querySelector('.span-one[data-show]');
const down = show.nextElementSibling || document.querySelector('.span-one:first-
child');
up.removeAttribute('data-up');
show.removeAttribute('data-show');
show.setAttribute('data-up', '');
down.setAttribute('data-show', '');
}, 1200);
Here is a code that can help you Though keep in mind, the styles are applied on a bare element. In your code you have to take into account the context as well.
/* Here you defined the animation. You can play around more and adjust the speed as you want */
#keyframes example {
/* Here are some options */
/* uncomment the sections to experiment */
/* 0% { transform: rotate(0deg); }
25% { transform: rotate(90deg); }
50% { transform: rotate(120deg); }
75% { transform: rotate(180deg); }
100% { transform: rotate(360deg); } */
/* 0% { transform: rotate(0deg); }
25% { transform: rotate(80deg); }
50% { transform: rotate(180deg); }
75% { transform: rotate(290deg); }
100% { transform: rotate(360deg); } */
0% { transform: rotate(0deg); }
50% { transform: rotate(100deg); }
75% { transform: rotate(300deg); }
100% { transform: rotate(360deg); }
/* You can google about the animations and how these percentages work, but actually its pretty simple */
}
.rotating {
/* This is optional, but needed if your title is block level element, just play around and see the differnce */
display: inline-block;
/* this is mandatory */
animation-name: example;
animation-duration: 5s;
animation-iteration-count: infinite;
}
<html>
<body>
<h1 class="rotating">My Dear Rotating Title</h1>
</body>
</html>
Stackoverflow is too strict on pasting the link to jsfiddle, so I embedded it here

Transition between desired amounts

An element has class slider-item:
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
When i click on a button ,i want the element to transition between translateY(-100%) and translateY(0).
I add classes prev-version and next by javascript respectively:
.slider-item.prev-version{
transform: translateY(-100%);
transition: none;
}
.slider-item.next{
transform: translateY(0);
transition: transform 100s ease;
transition-delay: 800ms;
}
But i see transition happens between translateY(100%) and translateY(0). next class overrides transform: translateY(-100%); in prev-version class. Please help me what should i do?
The best thing to try would probably be to use Vanilla JavaScript, jQuery, or some other type of framework to directly edit and change the CSS attributes.
So for example the jQuery version would be:
$("#slider-item.next").css("transform:translateY(0)");
Keep in mind you would need to add logic so that if the attribute was 100 it would change it back to 0 and then if it was 0 it would change it back to 100.
w3schools.com/jquery/jquery_css.asp
I might didn't understand your question but seems that you can use css animation for this:
document.querySelector('button').addEventListener('click', function () { document.querySelector('.slider-item').classList.add('example'); });
button {position: fixed; bottom: 10vh} /* just for demo */
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
.example {
animation: example 3s ease-in-out;
}
#keyframes example {
from {transform: translateY(-100%);}
to { transform: translateY(100%);} /* should be the same as the value declared initial on .slider-item */
}
<div class="slider-item">Slider Item</div>
<button>Click</button>

How can I fix this JQuery animation so it isn't choppy?

This JQuery animation looks very choppy, can I fix it? If not, how can I use CSS to do it? Maybe I use JQuery to edit the CSS?
<h1>Test</h1>
<button onclick="anim()">Start Animation</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
function anim() {
$("h1").animate({fontSize: '50px'});
}
h1 {
font-size: 30px;
}
This is the example code
Here's the project (you can also go to j0rdan.me)
With CSS3 you can use transitions to animate the font-size:
h1 {
font-size: 30px;
transition: font 1s ease;
}
h1.bigger {
font-size:50px;
}
fiddle: https://jsfiddle.net/z6ztfgcg/3/
But to me it's not looking choppy with javascript from your example.
if you want to use only CSS then try this
h1 {
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}
h1:hover {
-webkit-transform: scale(1.5); /* Safari and Chrome */
-moz-transform: scale(1.5); /* Firefox */
-ms-transform: scale(1.5); /* IE 9 */
-o-transform: scale(1.5); /* Opera */
transform: scale(1.5);
}
There are a few reasons why the animation is "choppy"
Animating structural properties such as font-size are generally choppy
Because the structure is changing, elements around the animated element will also be affected
jQuery animations aren't as smooth as css animations
I recommend animating with css not jQuery by using transform: scale(1.5) as this will not affect surrounding elements and gives a smoother animation.
h1 {
font-size: 30px;
transition: all 0.4s ease;
}
h1.larger {
transform: scale(1.5);
}
If this is not possible and you want to animate the font-size I recommend setting the line-height to the size of the end animation size and having a fixed margin. This will hopefully prevent the surrounding elements from being affected.
h1 {
font-size: 30px;
transition: all 0.4s ease;
line-height: 50px; // Matches end animation size
margin: 20px 0;
}
h1.larger {
font-size: 50px;
}
Working examples of both solutions:
https://jsfiddle.net/z6ztfgcg/4/
Animating font-size will always be choppy because the transformation will skip keyframes. Best way would be to use CSS3 transition but with scale. This will ensure a smooth animation as you pretend.
<button onclick="anim()">Start Animation</button>
<h1 class="title">Test</h1>
<style>
.title {
position: absolute;
transform: scale(1);
transform-origin: 0 0;
-moz-transform-origin: 0 0;
transition: all 5s;
font-size: 30px;
}
.title.animate {
transform: scale(2);
}
</style>
<script>
function anim() {
$('h1').addClass('animate');
}
</script>
You can then decide how many seconds you want the transition to be and change the scaling factor. (in this case I put 5 seconds and 2 times the original size)
You can use css to add simple animations to your html:
.animClass {
transition: 1000;
font-size: 50px;
}
(Transition specifies the duration of animation in milliseconds)
Then just add the animClass when you need the animation to occur:
function anim(){
document.getElementsByTagName("h1").classList.add("animClass");
}
Or in jQuery:
function anim(){
$("h1").addClass("animClass");
}
I'm currently using my phone, so I wasn't able to check whether it works properly. Please inform me if further problems occur.
It does not seem that choppy on my end as well. You can try adding transform: translateZ(0); to the h1 CSS class: https://jsfiddle.net/z6ztfgcg/3/
This trick triggers GPU acceleration in modern desktop and mobile browsers, which should really smooth things out. There are plenty of other methods which accomplish similar tasks found here.

Animate marginLeft to element's -width

I have element with long inline text and want to make animation that will move this text from off-screen right (whole text behind right border of window) to the left off-screen.
My idea is to move element by setting margin-left to minus(width) of element:
var element = $(this);
$("p").animate({
'marginLeft': - element;
}, 4000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>
But this does not work. Any ideas?
In that context, as far as I can tell, $(this) is the window. You want to animate the $("p") itself, and you need to specify you're animating based on it's width, not the general DOM element. There also was a rogue ; in your object that you were sending to the animate function (you can see errors like this in your Developer Tools Console).
var $element = $("p");
$element.animate({
'marginLeft': -($element.outerWidth())
}, 4000);
body {
margin: 0;
font-family: sans-serif;
font-size: 12px;
overflow-x: hidden; /* no horizontal scrollbar */
}
p {
white-space: nowrap;
background: #ccc;
display: inline-block;
margin-left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>
EDIT
Or, here it is with pure CSS. This is the more effective route to take, if the browsers you're developing for support it. It causes the browser to "repaint" less, and runs on the GPU instead of CPU like JS does.
body {
margin: 0;
font-family: sans-serif;
font-size: 12px;
overflow-x: hidden; /* no horizontal scrollbar */
}
#-webkit-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#-moz-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#-o-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
p {
white-space: nowrap;
background: #ccc;
display: inline-block;
padding-left: 100%; /* translate uses the inner width of the p tag, so the thing pushing it offscreen needs to be *inside* the p, not outside (like margin is) */
-webkit-animation: offscreenLeft 4s forwards; /* Safari 4+ */
-moz-animation: offscreenLeft 4s forwards; /* Fx 5+ */
-o-animation: offscreenLeft 4s forwards; /* Opera 12+ */
animation: offscreenLeft 4s forwards; /* IE 10+, Fx 29+ */
}
<p>element with long long long long inline text....</p>
If I were you, I would toggle a class on the element and using CSS's transform: translateX() combined with transition to move the element off screen.
codepen
css
p {
transform: translateX(0);
transition: transform 0.3s ease;
}
p.off-screen-right {
transform: translateX(100%)
}
js
$(document).ready(function () {
$('button').click(function () {
$('p').toggleClass('off-screen-right')
})
})
Steps
Get the <p> width and save it in a variable.
Then, sets the initial margin-left to the $(window).width()
After that, you can call the animate function to set the margin-left to the negative value of the width you've saved in the variable initially
Working code
$(function() {
var width = $("p").width();
$("p")
.css('margin-left', $(window).width())
.animate({ 'margin-left': -width }, 4000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>

retaining the final postion after rotation css3 animation

is there a way to make this css3 javascript animation smooth and fine please see the linkjsfiddle
css animation i use is given below
.pageanim
{
/* Safari and Chrome */
-webkit-animation:nextpage 1s;
-webkit-animation-timing-function:linear;
-webkit-transform-origin: left;
-webkit-transform-style: preserve-3d;
}
.hideface
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
#-webkit-keyframes nextpage /*Safari and Chrome*/
{
from {-webkit-transform:rotatey(0deg); }
to {-webkit-transform:rotatey(-180deg);
}
}
.revpageanim
{
/* Safari and Chrome */
-webkit-animation:prepage 1s;
-webkit-animation-timing-function:linear;
-webkit-transform-origin: 100% 0% 0px;
}
#-webkit-keyframes prepage
{
from {-webkit-transform:rotatey(0deg);}
to {-webkit-transform:rotatey(90deg);}
}
By adding the animation-fill-mode property, you can choose whether it is the first or last frame of the animation that should be kept at the end of the animation:
animation-fill-mode: forwards;
https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode

Categories

Resources