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.
Related
I've tried a dozen libraries to achieve this effect but I must be making a mistake somewhere. I'm currently using this library:- zeusdeux/isInViewport.
In my css I have a style called .animated-element like so:-
.animation-element {
}
.in-view {
}
and I have several css elements that start an animation when the .in-view class is added:-
.trans-1 {
-webkit-transition: 2s;
transition: 2s;
}
.fade {
opacity: 0;
}
.fade.in-view {
opacity: 1;
}
In my html I have div elements with these classes for animating:-
<div class="fade trans-1 animation-element">
<h2 class="medium-subheader-bold">Header</h2>
</div>
Finally, the javascript checks whether an element is in the viewport using the library, and adds a class to the element if it is. Thereby changing the .fade to .fade.in-view (opacity 0 to 1):-
(function($) {
$(document).ready(function() {
$(window).scroll(function() {
$('.animation-element').removeClass('in-view');
$('.animation-element:in-viewport').addClass('in-view');
});
});
}(jQuery));
When I load the page in a browser, all the elements in the page are loaded immediately and animated. When I inspect the webpage to check elements that are not visible in the viewport, I can see that they are rapidly flickering between adding and removing the in-view class. I've also tried removing the $('.animation-element').removeClass('in-view'); line from the above javascript but the in-view class is still added immediately, even though elements are far out of the viewport.
I've tried this with several libraries and keep running into the same problem, so it must be the way I'm implementing it and not the fault of the library.
I should also say I'm using Pug to generate the html, regular css, and serving whole pages through node.js.
I finally figured out what the issue was. I spent a whole day trying to recreate it in JSFiddle and modifying different parts. In the end it was because I didn't put <!DOCTYPE html> at the top of the html document. Its crazy that everything else worked, even the animations when scrolling up, just not scrolling down, because of that one line.
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);
}
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.
I am producing an iPad app using phonegap, and in that connection I've taken a liking to jquery.transit which easily helps me with css3 animations.
However, I encountered an obstacle. I am making an online list that will add new users as they log in. There is no problem adding DOM elements while scrolling the page, however, when adding the css3 animation to "unfold" the element, the animation only works when not scrolling. As a result elements with height: 0; will not produce the desired height:56px; when running the animation on it.
--- EDIT ---
It appears this problem is related to scrolling in other divs than the one running the animations. If I scroll the div containing the friendList (which is fixed with overflow auto) it works fine while scrolling. It's only a problem when scrolling the actual page and iOS native scrolling kicks in.
--- EDIT ---
The code looks as follow:
<ul class="friendList">
<li class="friendElement">
<div class="friendWrapper">
(content here)
</div>
</li>
</ul>
where
.friendWrapper.entering{
height:0;
}
and on friend login:
var $friendTemplate = (... appropriate template goes here ...);
function friendLogsOn(){
var $newFriend = $friendTemplate.clone(),
$friendList = $(".friendList"),
nmbElements = $friendList.children().length,
rand = Math.floor(Math.random()*nmbElements);
$newFriend.find(".friendWrapper").addClass("entering");
$newFriend.insertAfter($friendList.children().eq(rand));
$newFriend.find(".friendWrapper").transition({ height: '56px' },function(){
$(this).removeClass("entering");
});
}
I haven't been able to make jquery.transition activate animations while the user is scrolling, does anyone have a similar experience?
It is not possible to animate while doing regular page scrolling, since iOS renders the whole page when scrolling starts.
This is done to improve performance. Other smartphones and tables also do the same thing.
You could use a plugin like iScroll4 to achieve the result. iScroll doesn't do regular scrolling, but listens to mouse/touch events, and then moves elements to simulate scrolling.
http://cubiq.org/iscroll-4
If you want to test if animation is halted on scroll i've made a simple jsfiddle you can try out. (on iPad, iPhone, android devices etc.)
http://jsfiddle.net/3ntKM/4/embedded/result/
<style>
#square {
width: 200px;
height: 200px;
margin: auto;
background: red;
-webkit-animation: rotate 4s infinite linear;
}
#-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
</style>
<div id="square"></div>
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.