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>
Related
Hello and thank you in advance for reading my question.
GOAL: Set image so that once it's scrolled into view it transitions smoothly into a set position - but still reacts to :hover. Using #keyframes and a little JavaScript, I set the image to opacity: 0 and it's final opacity to opacity: .85. Then I added a hover effect in CSS to make it's opacity: 1
The issue is once it's finished with it's transition - it disappears - reverting to it's original opacity which is zero. I managed to make it freeze at .85 with animation-fill-mode: forwards, rather than animation-fill-mode: none, but then it won't respond to :hover
And here's a test snippet of the problem in action:
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
}
/* APPEND-CHILD */
.shift_frame_center_img {
animation: center_img 1s 0.5s none;
}
/* CHILD ON HOVER */
.features-img-wrapper img:hover {
opacity: 1;
transform: scale(1.035);
}
/* KEYFRAMES */
#keyframes center_img {
0% {
transform: translateY(20rem);
}
100% {
transform: translateY(0);
opacity: .85;
}
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>
If I could get a hand with this that would be wonderful, I'm a bit of a beginner and have already spent a few hours on this, all feedback welcome. Thank you very much.
Solution 1
To understand why the hover effect was not working with the animation-fill-mode: forwards, read this answer.
You can fix that by adding !important property to the hover styles:
.features-img-wrapper img:hover {
opacity: 1 !important;
transform: scale(1.035) !important;
}
The problem, in this case, is that the transition will not work for hover.
Solution 2
You could remove the animation entirely and add the final state styles to the shift_frame_center_img class.
But you would still need to use the !important property because of the CSS Specificity.
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
transform: translateY(20rem);
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
}
/* APPEND-CHILD */
.shift_frame_center_img {
transform: none !important;
opacity: .85 !important;
}
/* CHILD ON HOVER */
.features-img-wrapper img:hover {
opacity: 1 !important;
transform: scale(1.035) !important;
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>
This snippet removes the need for fill-mode forwards by setting the img to have opacity 1 as its initial state so it will revert to that at the end of the animation.
The animation itself is altered to take 1.5s rather than 1s with the first third simply setting the img opacity to 0 so it can't be seen. This gives the delay effect.
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
opacity: 1;
}
/* APPEND-CHILD */
.features-img-wrapper img {
animation: center_img 1.5s 0s none;
}
/* CHILD ON HOVER */
.shift_frame_center_img:hover {
opacity: 1;
transform: translateY(0) scale(1.035);
}
/* KEYFRAMES */
#keyframes center_img {
0% {
transform: translateY(20rem) scale(1);
opacity: 0;
}
33.33% {
transform: translateY(20rem) scale(1);
opacity: 0;
}
100% {
transform: translateY(0) scale(1);
opacity: .85;
}
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>
Note: as each transform setting will reset anything that isn't included both tranlateY and scale are included in each setting.
Outside the SO snippet system it was possible to leave the animation settings untouched by chaining another animation to the front which ran for 0.5s and just set the img to opacity: 0. This did not work in the snippet system (it got into a loop of flashing on and off) hence the introduction of one but extended animation.
I created a marquee-like effect on the top of this page. The text is coded to continuously scroll horizontally. The text should continuously scroll with no gaps. It's working in Safari and Firefox, but for some reason in Chrome, after a few seconds, it just cuts off. The weird thing is, if I highlight the area where I know the text is, it reappears. Do you all know why this is happening? Any insight/help would be appreciated as I am a student learning how to code! I've attached screenshots, of how it first looks when the text disappears, and the other screenshot shows it reappearing after I highlight the area.
Screenshot of Text Disappearing
Screenshot of me Highlighting the area of the scrollable text, makes the text visible again on the page
I am using MacOS Catalina Version 10.15.7 and my Chrome version is Version 87.0.4280.88 (Official Build) (x86_64). I showed this code to a friend as well, and they experienced the same issue in Chrome.
UPDATE: Looks like this issue is related to overflow:hidden
Below is my html
<section class="intro section section-pad bg-cover" id="intro">
<div class="copy container">
<div class="marquee">
<!-- Here we add the title in multiple repeating times using javascript -->
<span>Event -- January 1-2, 2020, Zoom</span>
</div>
</section>
Here is the CSS:
.section {
/*each section will take 100% of the height of browser */
min-height: 100vh;
/* Will help to vertically align container box */
display: flex;
position: relative;
}
/* Provide padding to left and right of section */
.section-pad {
padding-left: 5vw;
padding-right: 5vw;
}
.container {
/* Take the width of widest content box */
max-width: 780px;
/* Center our box horizontally and vertically using flex on .section */
margin: auto;
}
.marquee {
position: absolute;
top: 3vh;
left: 0;
width: 100%;
/*Each letter will be 5% of viewport width */
font-size: 5vw;
/* As tall as text */
line-height: 1;
text-transform: uppercase;
/*no scrollbars */
overflow: hidden;
}
.marquee span {
transform: translate3d(0, 0, 0);
-webkit-animation-name: moveLeft;
animation-name: moveLeft;
-webkit-animation-duration: 500s;
animation-duration: 500s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/*This will ensure the text stays all on the same line */
white-space: nowrap;
/* Our span is inline by default, so change it to block */
display: block;
/*Help with animation */
position: relative;
}
#keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
#-webkit-keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
And Finally here is the Javascript used
function makeMarquee () {
const title ='Event -- January 1-2, 2021, Zoom'
//use Array constructor to create an empty list with a length of 50 that is filled with the title.
//We can join all the contents of array using dash
const marqueeText = new Array(500).fill(title).join(' -- ')
//query Selector same as $ jquery, grab the span tags
const marquee = document.querySelector('.marquee span')
//set the text of span to be the marqueeText
marquee.innerHTML = marqueeText
}
makeMarquee()
Below is a Snippet as well
function makeMarquee () {
const title ='Event -- January 1-2, 2021, Zoom'
//use Array constructor to create an empty list with a length of 50 that is filled with the title.
//We can join all the contents of array using dash
const marqueeText = new Array(500).fill(title).join(' -- ')
//query Selector same as $ jquery, grab the span tags
const marquee = document.querySelector('.marquee span')
//set the text of span to be the marqueeText
marquee.innerHTML = marqueeText
}
makeMarquee()
.section {
/*each section will take 100% of the height of browser */
min-height: 100vh;
/* Will help to vertically align container box */
display: flex;
position: relative;
}
/* Provide padding to left and right of section */
.section-pad {
padding-left: 5vw;
padding-right: 5vw;
}
.container {
/* Take the width of widest content box */
max-width: 780px;
/* Center our box horizontally and vertically using flex on .section */
margin: auto;
}
.marquee {
position: absolute;
top: 3vh;
left: 0;
width: 100%;
/*Each letter will be 5% of viewport width */
font-size: 5vw;
/* As tall as text */
line-height: 1;
text-transform: uppercase;
/*no scrollbars */
overflow: hidden;
}
.marquee span {
transform: translate3d(0, 0, 0);
-webkit-animation-name: moveLeft;
animation-name: moveLeft;
-webkit-animation-duration: 500s;
animation-duration: 500s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/*This will ensure the text stays all on the same line */
white-space: nowrap;
/* Our span is inline by default, so change it to block */
display: block;
/*Help with animation */
position: relative;
}
#keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
#-webkit-keyframes moveLeft {
0% {
/* transform: translate(0);*/
-webkit-transform: translatex(0);
transform: translatex(0);
}
100% {
/* transform: translateX(-3000vw); */
-webkit-transform: translatex(-3000vw);
transform: translatex(-3000vw);
}
}
<section class="intro section section-pad bg-cover" id="intro">
<div class="copy container">
<div class="marquee">
<!-- Here we add the title in multiple repeating times using javascript -->
<span>Event -- January 1-2, 2020, Zoom</span>
</div>
</div>
</section>
The gap in Chrome (and Edge) is caused by setting overflow: hidden on the marquee. The browsers seem to sense that they have shown enough (I am not sure what enough means in this context as the max-width is set quite low at 768px) and that they must not show the overflow but they carry on with the animation so after 50 seconds it starts again from the beginning.
Why the other browsers (Firefox, Safari) don't honor the overflow I have not been able to discover.
If you change the .marquee to have overflow: visible then all these browsers will continue the animation with no gaps.
UPDATE: in addition section is given overflow: hidden and the timing and distance travelled has been altered to prevent an x-overflow bar showing.
function makeMarquee () {
const title ='Event -- January 1-2, 2021, Zoom'
//use Array constructor to create an empty list with a length of 50 that is filled with the title.
//We can join all the contents of array using dash
const marqueeText = new Array(500).fill(title).join(' -- ')
//query Selector same as $ jquery, grab the span tags
const marquee = document.querySelector('.marquee span');
//set the text of span to be the marqueeText
marquee.innerHTML = marqueeText
// setTimeout(function () {marquee.style.animationName = 'moveLeft';},1000);
}
makeMarquee()
.section {
/*each section will take 100% of the height of browser */
min-height: 100vh;
/* Will help to vertically align container box */
display: flex;
position: relative;
overflow: hidden; /* added to prevent 'gap' appearing on Chrome/Edge */
}
/* Provide padding to left and right of section */
.section-pad {
padding-left: 5vw;
padding-right: 5vw;
}
.container {
/* Take the width of widest content box */
max-width: 780px;
/* Center our box horizontally and vertically using flex on .section */
margin: auto;
}
.marquee {
position: absolute;
top: 3vh;
left: 0;
width: 100%;
/*Each letter will be 5% of viewport width */
font-size: 5vw;
/* As tall as text */
line-height: 1;
text-transform: uppercase;
/*no scrollbars */
/* but - make visible otherwise Chrome/Edge stop showing overflowed bits so get a gap */
overflow: visible; /* was hidden not visible */
}
.marquee span {
transform: translate3d(0, 0, 0);
animation-name: moveLeft;
animation-duration: 550s; /* altered from 50s as have longer for the text to travel now */
animation-timing-function: linear;
animation-iteration-count: infinite;
/*This will ensure the text stays all on the same line */
white-space: nowrap;
/* Our span is inline by default, so change it to block */
display: block;
/*Help with animation */
position: relative;
width: 4000vw; /* this is a bit hacky but does the trick - fools Chrome etc into thinking overflow is OK */
}
#keyframes moveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);/* was 3000vw */
}
}
<section class="intro section section-pad bg-cover" id="intro">
<div class="copy container">
<div class="marquee">
<!-- Here we add the title in multiple repeating times using javascript -->
<span>Event -- January 1-2, 2020, Zoom</span>
</div>
</div>
</section>
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.
I’m wondering if it’s possible to have the text content of a div increase and decrease in font size repeatedly every second. This would give an effect where the text seems to move closer to the viewer before moving back, ideally it would be a smooth transition and wouldn’t look like a 2 frame gif.
This is my attempt using Javascript to change the font size every second:
<div id="textdiv">ZOOM</div>
<script>
function zoomtext(){
var textdiv = document.getElementById("textdiv");
textdiv.style.fontSize = "20px";
textdiv.style.fontSize = "25px";
setTimeout(zoomtext, 1000);
}
</script>
This isn’t working, and I’m not sure that this code would result in a smooth transition.
Perhaps it’s possible to make a smooth transition by changing the font by tenths of a pixel (for example: 20px, 20.1px, 20.2px …and so on until 25px, and then decreasing it back to 20px in the same way).
I’m worried that method might result in a Javascript function running constantly, which might slow down my page.
Is there a better way to get this effect?
Use CSS transitions with scale transformation. Font-size transitions are never smooth, and transitions on transform are cheap.
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.5);
}
Repetition can be accomplished through CSS3 animations:
.grow {
width: 100px;
text-align: center;
animation: grow-animation 2s linear infinite;
}
#keyframes grow-animation {
0% { transform: scale(1); }
50% {transform: scale(2); }
100% {transform: scale(1); }
}
You can achieve the same effect using CSS Animations. It's pretty easy, too, and far better than using Javascript for that.
You need to assign your element the animation property, which you then define.
#textdiv {
animation: textgrowth 1s infinite alternate;
}
#keyframes textgrowth {
0% {
font-size: 20px;
}
100% {
font-size: 25px;
}
}
Be sure to add alternate at the end of your CSS rule to make the animation go back and forth.
if it is only zoom at screen , and not growing the container too, then scale(); should be what you look for:
#textdiv {
-webkit-animation: zoom1-2 infinite 1s;
animation: zoom1-2 infinite 1s;
-webkit-transform-origin:0 0 ;
transform-origin:0 0 ;
font-size:20px;
}
#-webkit-keyframes zoom1-2 {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes zoom1-2 {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
<div id="textdiv">ZOOM</div>
<div>don't push me</div>
Instead of javascript you could use CSS animations.
Some example HTML:
<!DOCTYPE html>
<head>
<title>keyframes text size animation test</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p id="textdiv">ZOOM</p>
</body>
</html>
And the CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
#textdiv {
-webkit-animation: adjustText 1s infinite alternate;
-moz-animation: adjustText 1s infinite alternate;
-o-animation: adjustText 1s infinite alternate;
animation: adjustText 1s infinite alternate;
}
#keyframes adjustText {
from {
font-size: 20px;
}
to {
font-size: 25px;
}
}
Here's a working codepen of this example
Try this one:
function zoomtext(){
var textdiv = document.getElementById("textdiv");
var fontSize = textdiv.style.fontSize;
if (fontSize !== '48px') {
textdiv.style.fontSize = '48px';
}
else {
textdiv.style.fontSize = '21px';
}
setTimeout(zoomtext, 1000);
}
zoomtext();
<div id="textdiv">ZOOM</div>
I am making a popup message that when it is set to style.display = "block"; (by pressing a button), it will fade to invisible. I have a button on the popup that hides the popup by setting the style.display = "none"; how can I make it fade out?
here is the css
#note {
position: absolute;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: #fde073;
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
#-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(-50px); }
10%, 90% { -webkit-transform: translateY(0px); }
}
#-moz-keyframes slideDown {
0%, 100% { -moz-transform: translateY(-50px); }
10%, 90% { -moz-transform: translateY(0px); }
}
.cssanimations.csstransforms #note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideDown 2.5s 1.0s 1 ease forwards;
}
.cssanimations.csstransforms #close {
display: none;
}
here is the javascript
<script>
close = document.getElementById("close");
close.addEventListener('click', function() {
note = document.getElementById("note");
note.style.display = 'none';
}, false);
</script>
and here is the html
<div id="note" style="display: none;">
Form has been sent. If you would like to fill out another suggestion, feel free but remember that there is an Anti-spam system running. <a id="close">[close]</a>
</div>
Use jQuery, cause it is much simpler, download is from here Click Here.
Include jquery.js & write your code in <script> tags.
To show popup use,
$("#btn_id").click(function(e){
$('#note').fadeIn();
});
To hide popup use,
$("#close").click(function(e){
$('#note').fadeOut();
});
CSS display property doesn't have a 'hidden' value (you probably made a mistype). You should set it to 'none'. Then you should specify transition for display property for #note in css, e.g.
#note {
display: block;
-webkit-transition: display 2s; /* For Safari 3.1 to 6.0 and don't forget other browsers */
transition: display 2s;
}
then, in JS all have to do is just set display property to 'none':
document.getElementById("close").onclick(function () {
document.getElementById('note').style.display = 'none';
});
If you use CSS transitions, you should check browser compatibility list. As possible workaround, you can try CSS visibility property ('visible' to 'hidden').
But this is wrong path, because display and hidden will not give you a smooth vanishing. Try opacity property and then hide the popup by setting display to none, when transition finished.
You can use jQuery or pure JS, but it is much slower than CSS transitions. I would strictly recommmend using CSS. On the other hand, CSS transitions have worse browser compatibility, so you should use it if it fits your browser compatibility requirements.