EDIT: Link to code added
I feel like it'd be good to give the context of the code since it seems to work without the ajax part.. here's the CodePen link to the project:
http://codepen.io/judysmilingeyes/pen/dNpxow
I am currently working on a project (a mini search engine) and got stuck on a jQuery question.
In theory it should work like this:
Upon click
- if the search field is empty, displays error message
- else append search result to the page, and display an animation which prompts the users to scroll down to check the results
I wrote the animation in CSS and it's working fine without JS/jQuery. To toggle on/off I first hide the HTML element and once the function enters the else statement I wrote a .show(), but in this case the loop of the animation is interrupted (it only runs once). Could anyone explain to me why this is happening/how to modify the code?
Here are the relevant HTML, CSS and JS/jQuery code. Much thanks in advance for any help/suggestions!
HTML
<div class="animation"><p>Scroll down for results</p></div>
CSS
#-webkit-keyframes results {
from{
top: 160px;
opacity: 1;
}
to{
top: 180px;
opacity: 0;
}
}
.animation {
-webkit-animation: results 1.5s linear infinite;
-moz-animation: results 1.5s linear infinite;
-o-animation: results 1.5s linear infinite;
animation: results 1.5s linear infinite;
position: relative;
text-align: center;
top: 160px;
}
jQuery
$(document).ready(function(){
$('.animation').hide();
$('#submit').click(function(){
var search = $('#search-field').val();
//error message when the entry is empty
if (search == ""){
$('ul').empty();
$('.main-body').append('<p class="error-message">Oops - did you forget to put in something?</p>');
}
else {
//clear old results
$('ul').empty();
$('.error-message').empty();
//get search results
$.ajax({
...
});
$('.animation').show();
}
});
});
Related
I am trying to create this animation where the title is visible in the page initially then when you scroll down you trigger the title to slowly fade away and a subtitle fades in right after. I have the title part working but I can't seem to get the subtitle to appear with a smooth transition. At first I have my subtitle at "visibility:hidden" then when I scroll and the javascript adds the transition in class, it just abruptly comes in disregarding the transition property I gave it. Here is the fiddler I set up. Below is the javascript and css (respectively) i'm using to get this animation to work. Of course if there area any easier ways to achieve this feel free to let me know. Any advice or help will be GREATLY appreciated I have been researching and trying things to no avail.
Javascript
const element = document.getElementById('title');
const element2 = document.getElementById('subtitle');
window.onscroll = function() {
console.log("document element");
console.log(document.documentElement.scrollTop);
console.log("scrolling elemnent");
if (window.scrollY > 0) {
element.classList.add('fadeout');
element2.classList.add('fadein');
console.log("hello");
}
}
.fadeout {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
.two {
visibility: hidden;
}
#subtitle {
transition: opacity 2s linear;
}
.fadein {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
Currently your subtitle is at full opacity when you are fading it in (Because the visibility property does not set the opacity it just makes the element invisible)
Add opacity:0; to the .two CSS so that it will fade in.
Updated fiddle https://jsfiddle.net/s2cban6q (line 32 of CSS changed)
I have a page that has an input field and a "next" button. When the user clicks next, I want to shrink the input field and remove the "next" button. I have it mostly working as seen in this Bootply. My CSS animations look like this:
.default {
transition: all 1.0s ease;
}
.exit {
padding-left:5rem;
padding-right:5rem;
}
.remove-button {
animation: animate-remove-button 1.0s;
}
#keyframes animate-remove-button {
from {
transform:scaleX(1.0);
opacity: 1.0;
}
to {
transform:scaleX(0);
opacity: 0;
}
}
The animation runs. However, after the animation has completed, the button reappears. In addition, I basically want the width of the button to shrink all the way to 0 so that the text field grows. But, as you can see in the Bootply, that's not really happening, even though it kind of looks like it is.
What am I missing?
.remove-button {
animation: animate-remove-button 1.0s;
animation-fill-mode: forwards;
}
animation fill mode: forwards tell to keep the last state of animation.
Documentation: https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode
is it possible to detect where a user scrolls on a page to trigger a keyframe using pure javascript ?
.animations {
opacity: 0;
animation: animations-keyframes 2s ease forwards;
-webkit-animation: animations-keyframes 2s ease forwards;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#keyframes animations-keyframes {
to {
opacity: 1;
}
}
#-webkit-keyframes animations-keyframes {
to {
opacity: 1;
}
}
I want javascript to trigger this event when the user gets to a certain part of a page for example a content section. I don't know where to start
Using javascript, you could add the class animations to an element on mouseenter event and remove the class on mouseleave. Since you didn't mention jQuery, I will use simple JS, but I recommend using jQuery if you plan on doing a bunch of DOM manipulation since it is easier to maintain.
EXAMPLE:
http://jsfiddle.net/dirtyd77/z6xmuwse/2/
JAVASCRIPT:
var el = document.getElementById("animation");
el.onmouseenter = function (){
this.classList.add("animations");
};
el.onmouseleave = function (){
this.classList.remove("animations");
};
However, you can also accomplish this using just CSS and the pseudo :hover.
EXAMPLE:
http://jsfiddle.net/dirtyd77/z6xmuwse/3/
CSS:
.animations:hover {
opacity: 0;
animation: animations-keyframes 2s ease forwards;
-webkit-animation: animations-keyframes 2s ease forwards;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#keyframes animations-keyframes {
to {
opacity: 1;
}
}
#-webkit-keyframes animations-keyframes {
to {
opacity: 1;
}
}
Hope this helps and let me know if you have any questions!
Waypoints can be used to trigger events when scrolling to certain parts of a page.
http://imakewebthings.com/waypoints/
In simple terms, event listeners are created for scroll events - The distance scrolled down the page and distance of the element from the top of the page are compared. Events are triggered if the user has scrolled beyond the element ( distance scrolled > distance of element from top of page )
So a friend and I are having a bit of trouble with webkit. We're trying to animate a specific div to do a 720° rotation and using transition to animate the container itself, with the rotation being triggered by a javascript function.
This works absolutely fine in Firefox and IE, but once we switch over to a webkit-based browser, the rotation transition doesn't work.
When monitoring the page through the developer tools, we can see that the specific properties are assigned to the div, only the transition isn't being rendered.
The javascript is as such:
function projtheme() {
var proj_title = document.getElementById("ring_1");
proj_title.style.animation = "none";
proj_title.style.WebkitAnimation = "none";
proj_title.style.transform = "rotate(720deg)";
proj_title.style.WebkitTransform = "rotate(720deg)";
proj_title.style.opacity = "0.1";
}
function projtheme_exit() {
var proj_title = document.getElementById("ring_1");
proj_title.style.animation = "spin_cw 60s linear infinite";
proj_title.style.WebkitAnimation = "spin_cw 60s linear infinite";
proj_title.style.transform = "rotate(0deg)";
proj_title.style.WebkitTransform = "rotate(0deg)";
proj_title.style.opacity = "0.6";
}
And said javascript functions are called in this way:
<span id="projbtn" onmouseout="projtheme_exit();" onmouseover="projtheme();"></span>
The CSS of the animated div has the properties it needs set to it (namely the transition properties):
#ring_1{
position: absolute;
top: 50%;
left: 50%;
margin-top: -160px;
margin-left: -150px;
opacity: 0.6;
display:block;
animation: spin_cw 60s linear infinite;
-webkit-animation: spin_cw 60s linear infinite;
transition: all 0.5s ease;
}
Help on this would be much appreciated, thanks!
UPDATE: Removing the animation function on said div seems to fix the issue, and the transition runs. The problem is, that animation needs to stay.
UPDATE 2: Inserting an alert between the lines that set the animation styles and those that set the transform properties inside of the script seems to make the transition work.
I'm trying to create a CSS animation that when a user clicks an element it animates to the right then when they click it again it animates to the left. The problem I have is that it is introducing flickering. I know the reason, but I'm not sure the best way to fix it. I want the most elegant solution for this problem.
I setup a jsFiddle (WebKit only) here: http://jsfiddle.net/4Ad5c/2/
The CSS:
.animateRight{
-webkit-animation: goRightLeft 1s;
-webkit-animation-fill-mode: forwards;
}
.animateLeft{
-webkit-animation: goRightLeft 1s;
-webkit-animation-fill-mode: backwards;
-webkit-animation-direction: reverse;
}
#-webkit-keyframes goRightLeft {
0%{margin-left: 0px;}
100%{margin-left: 100px;}
}
The JavaScript:
this.animateBox = function(className){
var box = document.getElementsByClassName('box')[0];
box.className = "box";
setTimeout(function(){
box.className = "box " + className;
},1);
};
When you click the Animate Right it works as expected, but when you click the Animate Left it will flicker to the left and then animate as expected. The reason is that you have to remove the class and add another in order to get the animate to run again, but I don't know the best way to get this working. I figure I could add a class when removing the previous animation that has it in its current state, but that seems wrong to me.
Thanks for the help!
Reason for flickering:
You are applying class box on click before setting the next animationClass which makes the box go to left abruptly. and then you are applying the animation to go reverse. So it causes flickering while it abrupty goes left (removal of class) and adding class in timeout causes revereses animation according to the fillmode and direction in animateLeft class and makes it even more worser as goRightLeft again adds margin pulls it to right due to the margin in the rule and webkit-animation-fill-mode: backwards; pushes to to the left. So one approach i mentioned here is to do the reverse (adding/reducing) the margin.
Here is one solution for this:
For real reverse animation you need to apply margin decresing from 100px to 0 as you do while forward animation. So just add keyframes for LeftToRight and apply that in animation.
Css
.animateRight{
-webkit-animation: goRightLeft 1s;
-webkit-animation-fill-mode: forwards;
}
.animateLeft{
-webkit-animation: goLeftRight 1s; /* Note the goLeftRight animation */
-webkit-animation-fill-mode: backwards;
}
#-webkit-keyframes goRightLeft {
0%{margin-left: 0px;}
100%{margin-left: 100px;}
}
#-webkit-keyframes goLeftRight { /* Note the new keyframes rule for reverse animation*/
0%{margin-left: 100px;}
100%{margin-left: 0px;}
}
Script
this.animateBox = function(className){
var box = document.getElementsByClassName('box')[0];
box.className = "box " + className;
};
Demo