Comments (13)
bandali0
commented on August 15, 2024
I really like the fadeInDown effect of the animate.css library.
from pixyll.
johno
commented on August 15, 2024
I think I could get on board with binding a transition to an optional class on the body:
<body class="fade-in-down">
<!-- Stuff -->
</body>Looks like the CSS footprint would be pretty small since we can just grab a single class from animate.css.
from pixyll.
bandali0
commented on August 15, 2024
Yeah. I tried fadeInDown locally and it looked great, to me at least :)
from pixyll.
johno
commented on August 15, 2024
I'm thinking something similar to the following changes:
https://github.com/johnotander/pixyll/compare/optional-animation
Thoughts?
from pixyll.
bandali0
commented on August 15, 2024
Providing an option in _config is great.
So, pretty much only animating the post headers? I think animating the whole body looks better ? I had tried with adding animated fadeInDown classes to the body in default.html and really liked it. This is nice too, but somehow feels a bit awkward to me 😛
from pixyll.
johno
commented on August 15, 2024
I'm pretty impartial as to where the animation occurs, so if you feel strongly about animating the body instead -- we can do that.
from pixyll.
bandali0
commented on August 15, 2024
Great, so if you agree, let's go with animating the body for now and later we can always change to partial animations (or have an option haha).
from pixyll.
bandali0
commented on August 15, 2024
@johnotander OK, so I merged your animation PR into my branch, but for some reason, the animation feels different than when I was experimenting!
Here's what I had done before:
- add
//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.cssstylesheet todefault.html - add
animated fadeInDownclass to the body.
I was looking at your code, and seemed pretty much the same to me, but the animation I think is different than the one I got with my code yesterday. Maybe we are missing some styles or animation info in css?
from pixyll.
johno
commented on August 15, 2024
Hmmm. Strange. I will look into this later today.
from pixyll.
bandali0
commented on August 15, 2024
Any news @johnotander ? 😕
from pixyll.
johno
commented on August 15, 2024
My apologies, got sidetracked over the weekend.
I just looked into it, and it looks like the transition code hosted on the CDN was slightly different (I used a custom Gruntjs build from the animate.css repo), so I updated that to reflect what's on the CDN.
So, hopefully that works?
from pixyll.
bandali0
commented on August 15, 2024
No problems!
Yep, it's how I wanted it to be now, awesome and thanks!
from pixyll.
johno
commented on August 15, 2024
Awesomeness!
from pixyll.
Related Issues (20)
- Make old tags HOT 2
- Link tag in header without ending ">" HOT 1
- Update gh-pages HOT 2
- Use a GitHub Action to build the site HOT 1
- Sass variables for nav and header
- Python code syntax highlighting is a bit weird HOT 3
- Audit with Google Lighthouse HOT 1
- URL suffix problem HOT 1
- Site seems down on https://pixyll.com/ HOT 4
- New posts are not placed in the correct directory HOT 4
- Add web manifest for PWA
- Support comments with Utterances
- Quotes in titles break Disqus comments HOT 2
- Forked site does not load Jekyll Theme HOT 6
- Why does the pop-up window show "localhost" when attempting to share a blog post on Facebook? HOT 12
- Add support for Google Snippets
- actions/setup-ruby is deprecated HOT 1
- Update embed snippet for Disqus HOT 1
- Pixyll Pagination.html broken?
- Website is down HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixyll.