Changing CSS animations visibility with Javascript - javascript

I've been following directions from Justin Aguilar's Site to add some CSS Animations to my website. It's well put together and seems fairly straightforward. However I've been having a major problem triggering entrance animations.
Being fairly new to this I understand this question can be completely inane, but I've been toying with it for the last few days with no success.
To create an entrance the element's visibility is initially set to 'hidden'. Then javascript is supposed to trigger the animation by adding the .pullUp class which causes the element to become visible and animate.It seems pretty simple, but all of my elements begin animating as soon as the page loads or they remain invisible.
I could really use some help. Here is a Link to the code on JFiddle.
<img src="img/apple.png" id="apple" class="pullUp" />
<script= "text/css">
.pullUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
visibility: visible !important;
}
</script>
<script>
$(window).scroll(function() {
$('#apple').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+150) {
$(this).addClass(".pullUp");
}
});
</script>
Basically I just need my image to become visible and animate when the image is scrolled to.
It's possible that my site's Bootstrap Frameworks could be the source of the problem, but I don't see why it would. Also please know that I use External Style Sheets and just included all of the code here for convenience. Any insight or help is much appreciated!

I forked your JSFiddle
You were missing }); at the end of your code block. That's why jQuery wasn't working.
Your image had the pullUp class already added, so the animation was starting right away.

I noticed in your CSS where you have floats you did not specify a position (i.e position:relative or position:absolute). That's crucial for this type of thing (edit: apparently not, as show by the answer below).
After adding in position:relative to those elements it seems to work, however you might need to modify the animation as the effect seems quite minimal.

Related

Lazyload and Masonry

I'm trying to get this layout working the way I want for WordPress blog. I can't figure out why Lazyload is causing the entire masonry to overlap and load in the same spot instead of a grid. When I remove the Lazyload, the layout functions as a masonry grid, along with the overlay hover.
The second issue is that this code:
.fade {
animation-name: fade;
animation-duration: 2s;
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
I can't figure out why I can't remove the unused bracket at the bottom. When I remove it, the entire masonry does not work, it becomes a complete broken mess.
Can anyone enlighten these two problems? Thank you!
Additionally, if you resize the window or flip your mobile device to the side and back, the masonry grid displays fine.
Update: So I found out WordPress 5.5, releasing in August, is including LazyLoad! Will reimplement LazyLoad again by that time.
For your lazyload and mansory problem, it might be a possible solution for you to "fake" or "simulate" the resize of the window. The grid works fine after resize, so it can be a way to trigger that event to make your code work.
You can use pure javascript, in wordpress you can use the shorter jQuery version:
Using pure Javascript:
var simulateResize = new Event('resize');
window.dispatchEvent(simulateResize );
Using jQuery:
$(window).trigger('resize');
Make sure you put the code at the bottom of the page, especially you have to put it after the code where the grid elements and contents have been generated.
For your CSS problem, the correct way to use the #keyframes rule is:
#keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
So your code is correct and the last } is unnecessary. If removing it causes your code to crash, there might be some #media rule around your .fade code, like:
#media only screen and (max-width: 600px) {}
which causes the problem if it opens up but do not close.

CSS: Adding a Delay to Submenu Dropdown on Hover (Bootstrap 3 / MegaNavbar 2.2)

Now i am officially desperated. I bought a Script to use a MegaMenu on my Site.
The Script is MegaNavBar 2.2
http://preview.codecanyon.net/item/meganavbar-v-220-advanced-mega-menu-for-bootstrap-30/full_screen_preview/8516895?_ga=2.119686542.744579007.1495443523-2131821405.1495443282
I wanted the script to open the submenus on hover, so i configured it as described on the Demo-Page (see above).
This worked fine. But i wanted to add a delay, because its irritating users, if they move the mouse pointer from top to bottom, and everytime the menu is open immediately while hovering.
What i tried:
Asking the support - No Answer
Trying to add an animation and animation-delay
The Animation is working, but the delay is not working, i assume because of the "display:block"
Trying to add an transition
The Transition is not working, because Transition is not working with "display:block".
Is there anybody out there, who can help me with this stuff?
Here is my Bootply:
https://www.bootply.com/A50M0Wk9NK
(The assumed css rule is in line 29 of pasted css-code)
Best Regards,
Michael
You can try to use Visibility instead of Display, and thus use transitions.
e.g.:
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
transition-delay:2s; //set delay here
}

How to "zoom"/"scale" in div's content with css or jquery?

The effect I am trying to achieve needs to keep the center in its place and zoom in the content while still maintaining the width and height of the div.
An example:
before -> after
[x] [X]
Or if you don't mind links this site has it implemented on the homepage and its square containers
I have tried using the inspect element feature, but didn't really find any javascript calls or css on it. And google also didn't give me any tutorial, guess it's hard to name this effect.
Therefore, if someone could be so kind and forward me to a tutorial, function or give some tips I would greatly appreciate it.
Looking forward yo your replies.
You're looking for CSS Transforms.
On the website in question, this is implemented by way of
.view-tenth img {
/* [other directives omitted] */
transition: all 0.6s ease-in-out 0s;
}
.view-tenth:hover img {
/* [other directives omitted] */
transform: scale(1.1) rotate(0deg);
}

How do you store content or metadata within a css keyframe?

Does anyone know why I can't see the effects of the content property in my keyframe animation?
I tried something like
#-webkit-keyframes mymove {
0.000% {-webkit-transform: matrix(1,0,0,1,294,-135);
color:blue;
content:"test";
}
/*... more keyframes that changed the -webkit-transform property...*/
}
When I was watching my animated HTML div during the animation, I could see the effects of the -webkit-transform and color properties, but not the content property. It's as if the content property wasn't even applied during the animation. jQuery didn't return a value either when I did $(<my animated html element>).css("content"); However, repeatedly testing $(<my animated html element>).css("-webkit-transform") returned different values as the div moved across the screen.
I don't necessarily want to use the content property to display anything. I want to be able to store some meta data in the CSS keyframe rule so that I can refer back to the corresponding percentage at which the animation is at. I need to be able to run an animation on an infinite loop, and periodically query the animated HTML element to figure out how far along it is in the animation. I thought that I could use the content property to just put arbitrary strings, but it's not working on Chrome or Firefox. Does anyone have any ideas how I'd store metadata within the keyframe CSS rule?
I dont fully understand what you are trying to say when you are storing the metadata in keyframe.. In anyway, jquery or the javascript cannot read the css3 'content' data. Also I am pretty sure you cannot use content property inside the keyframe. you either need to use :after or :before. eg.
#box:before {
content: "test";
}
If you want the animation run infinte, you can use
-webkit-animation: mymove 5s infinite;
Let me know if this works.
Check this url http://msdn.microsoft.com/en-us/library/ie/jj680076(v=vs.85).aspx.
This article works good on Internet Explore 9+
For another browsers other than IE 9+, you need to copy and paste the css3 animation keyframe with vendor specific keywork.
for eg. for chrome you have to write the css in the article as:
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.TransformDemoDivFadeOut:hover {
animation-duration: 2s;
animation-name: fadeOut;
#-webkit-animation-duration: 2s;
#-webkit-animation-name: fadeOut;
}
#-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

How to optimize the jquery animate code

Hi I am doing a zoom in & out using jquery animate. The problem is it is too slow and takes too much of time. The animate function is going to zoom approximately 100's of divs. Can some one please tell me what should be done to make it optimized. Here is the code below
//Zoom In by clicking the plus button
$("div#explanation .plus").click(function(){
jsPlumb.repaintEverything();
/* var strongFont = parseFloat($("div.window strong").css('font-size'));
var newStrongFont = strongFont + 2;
//alert("the new font is"+strongFont);
*/
$("div#demo1").animate({'height':'+=20', 'width':'+=20'});
$("div.window ").animate({
'height':'+=20px', 'width':'+=20px'
},0,function(){
jsPlumb.repaintEverything();
});
/* $("div.window strong").animate({
fontSize:newStrongFont
},0,function(){
jsPlumb.repaintEverything();
});
*/
});
I am having similar to zoom out. Please guide me. Thanks!
First off, you have to realize that you're almost certainly not going to get good performance aniating hundreds of elements. It's just too much for the browser to handle. I would try to animate a single container element to achieve whatever effect you're going after.
That said, you might want to take a look at the animate-enhanced plugin. In browsers that support CSS animation, the plugin automatically translates .animate(...) calls into CSS animations, which are usually hardware-accelerated. This gives much better performance than animate's usual method of changing an element's properties on a set interval.
You might also try using CSS animation directly if the plugin doesn't help. I'm not sure whether you're really trying to animate the size of the box or if you're trying to animate an actual zoom (where the box and all of its contents get bigger), but here's an example that animates the latter:
div {
width:200px;
height:200px;
background:red;
color:white;
margin:20px 50px;
padding:5px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
}
div:hover {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-animation-name: popin;
-moz-animation-name: popin;
-webkit-animation-duration: 350ms;
-moz-animation-duration: 350ms;
}
#-webkit-keyframes popin {
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(1.4);
}
}
#-moz-keyframes popin {
from {
-moz-transform: scale(1);
}
to {
-moz-transform: scale(1.4);
}
}
The time for the animation to complete is something you can specify as the second argument to .animate(). You have not specified it so the default is 400ms. You can set it to whatever you want. The animation will always complete in approx the time that you set, but if there is too much work for the computer to do in that time to show you a smooth animation, you will get a jumpy one.
The only way to make an animation less jumpy is to optimize what you are animating or how you are animating it. Animating 100s of divs at the same time is probably more than anything but a very, very fast computer can do smoothly.
You will probably want to rethink what you are animating. One possible work-around in cases like this to animate an outline rather than the entire contents when the contents are really complex to animate with good performance.
If you want further help, you will have to show us more of the problem. We need to see the HTML you have so we can see what you're really trying to animate and we probably need to see the repaintEverything() function to see what it's doing.
If you're not too concerned about older browsers, you might be able to use css transform properties for this. They usually work quite quickly, allowing you to efficiently zoom in on a complicated section of the document. Here's a contrived example, which uses jQuery to zoom in on something whenever it's clicked. Animating would get more complicated: I don't believe jQuery's animate works with transform, but in theory you could repeatedly adjust the scale on a small level using timeouts.

Categories

Resources