Comments (6)
Yeah this is a known issue and a side-effect of what OriDomi does to compensate 3D transform glitches. When rotating two elements that are aligned flush with each other, you'll see small 1 pixel gaps between the two at certain rotation values which ruins the illusion of the composition being a single contiguous element being folded. Even with the compensation OriDomi does to counteract it, you can see this behavior more often in Firefox with a lot of the demos.
OriDomi nudges each panel 1 pixel back so it overlaps its predecessor sibling to prevent these gaps. You'll notice in your own example that the offset gradually increases with each panel.
Here's the relevant spot in the source (notice the translate
variable): https://github.com/dmotz/oriDomi/blob/master/oridomi.coffee#L665
If you change it to zero, you'll notice the "gap effect" much more often.
I don't have a good solution for this issue right now. It's currently a tradeoff between dimension accuracy and avoiding this ugly effect. I might make the nudging amount configurable in the API if that would help your situation.
I'll keep this issue open if anyone has an idea for a solution.
from oridomi.
As a simple hack-based workaround, you could manually set the width of the overlaying OriDomi element to be slightly larger than 100% of the element underneath so it correctly lines up.
from oridomi.
I forked the code and started to hack at it after posting this issue – I had an idea to conditionally skip the translate[X/Y] +/- 1 if the angle was 0, thinking that the aforementioned gaps wouldn't occur when the transformation was flat, but then the width of the OriDomi element and its panels was actually more (rather than less) than the original! If I have a moment, I might keep digging on that.
from oridomi.
Can anyone watching this flesh out an idea I had on fixing the flicker / gaps. I was wondering if / how border animations to each section to allow the gaps to appear less obvious?
from oridomi.
@Gabrielmtn What are the details of your idea?
from oridomi.
To quote the solution the folks who created the HexaFlip project: "You may notice that the height is set to 100.5%. This is done to add some extra “bleed” to the size of each face to mitigate a common issue seen during 3D CSS transforms where edges don’t match up perfectly and “cracks” appear in the object. Each face is given absolute positioning so they stack on top of each other before they’re transformed in 3D space."
So the idea would be to create some kind of border bleed for each panel to distract from the gaps.
(referenced project) http://tympanus.net/codrops/2013/03/07/hexaflip-a-flexible-3d-cube-plugin/
from oridomi.
Related Issues (20)
- unfold doesn't appear to be doing anything HOT 1
- The anchor to fold in latest version HOT 2
- Height responsive on close HOT 1
- Calculation of width HOT 1
- save the image file HOT 3
- Currently unable to fold up in vertical direction. HOT 1
- folded dives behind elements in chrome, but is a-okay in firefox. HOT 2
- jQuery: oriDomi is not a function HOT 2
- oridomi worse now in android lollipop? HOT 3
- how to remove oriDomi by click? HOT 3
- Center a OriDomi element? HOT 1
- How to apply the oridomi functions to all the edges
- Button and Input do not work on a oriDomi paper HOT 1
- Blurred text contents HOT 3
- Targeting multiple elements, or individual elements within .each() HOT 2
- Using without Random Generation
- can i use this lib in react or vue? HOT 2
- hPanels issue HOT 2
- Google Map integration HOT 1
- Unable to fold up in vertical direction HOT 1
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 oridomi.