I was looking for a way to rotate some basic text/sentences in my Blocs project, but couldn’t determine a simple way to do so using existing Blocs features. After looking around on the internet, I found a couple of rotators named Morphist and Morphext that I thought might work. They’re both based on jquery and animate.css, which Blocs also uses.
To make a long story short, I did get Morphist to work in my project and thought I’d mention here what I did in case anyone else might like to try using. Note that I’m not experienced with js/css coding. I just tried some different configurations in Blocs and got it to work with my project (see setup below). I did not use Morphext, but its workings are similar Morphist, so I think it should work too if you’re interested.
Fyi, I set up some simple demos of both Morphist and Morphext on my web site (see link below and click on test code).
http://bestofthebestdancesport.com/demo/
If you’d like to see how I used Morphist on my web site, please go to the main URL, right under the photo carousel.
If you see any errors/corrections/suggestions in what I did, please let me know.
Thx.
Paul
Morphist basic info: http://morphist.fyianlai.com
Morphist setup in Blocs:
-
Make sure animate.css is available in your Blocs project by either including an animation in your project or manually including animate.css in your Blocs project settings.
-
Include both morphist.css and morphist.js in your Blocs project settings.
-
Insert code widget in desired location of your project. For code part of widget, add Morphist HTML code segment with desired object list. In Page - Footer part of code widget, add Morphist initiate script segment. Make sure initiate segment is pointing at the correct jQuery js file, has the desired speed, and has the desired in/out animations.
Issues: You may see a bullet list of objects to be rotated for a fraction of a second when the page first loads and before the rotation animation occurs. This seems to be more of a problem if the animation is in top part of the displayed web page. If it’s in a lower part of the web page, this may not occur. Not sure how to eliminate this anomaly. Seems to affect Safari more than the other browsers.
Morphext basic info: http://morphext.fyianlai.com
Morphext setup in Blocs: Similar to Morphist setup above.
For a list of allowed Morphist/Morphext animations, see link below (in Animations section).