Adapt Learning Community: Parallax effects

Are there any existing plugins/extensions that could add some parallax effects to adapt? If not, how would I go about creating something to add some of the effects similar to those used in skrollr?

Hi Kevin,

You could take a look at the graphical background switcher that can be found here: https://github.com/cgkineo/adapt-background-switcher

Might offer what you need.

Thanks,
Paul

Show parent | Reply

Hi Paul,

Do you know if this switcher should work with the latest version of the framework? I got an error when trying to install.

Many thanks,
Stuart

Show parent | Reply

Hi Stuart,

Yes, we’ve tested B/Switcher against v2 of the framework.

Can I ask how you're trying to install? I’m not a techie but I think you need to go to the CG Kineo repo, unzip the plugin and then manually copy it into the extensions folder. If that doesn’t work I’m sure one of our tech consultants can advise.

Best,

Paul

Show parent | Reply

Hi Paul,

Thanks for your reply. Ok - i'll try installing it that way.

I tried to do it from the command line but it came up with a message saying it wasn't compatible with v2 of the framework but gave me the option to try installing anyway, which i did, but it then threw an error.

Thanks again,

Stuart

Show parent | Reply

Hi Stuart

I'm 99% certain it is v2 compatible. The error you're getting is probably just down to the file bower.json not having been updated to reflect that it is v2 compatible.

As Paul quite right suggests, manually copying it to your extensions folder should work.

Show parent | Reply

Hi Matt/Paul,

Thanks for the advice. I managed to get it added and (largely) working - the transitions aren't particularly smooth and the background image doesn't seem to switch back when i scroll back up the page so i'll need to have a play about with it and see what is what. Is great though - many thanks for sharing it.

Stuart

p.s. how are themes installed? i tried to install the adapt-kineo-theme but it wouldn't work using command line or by copying into the theme folder. is it just a case of copying and then updating a value in one or more of the json files to point to the new theme?

Show parent | Reply

Hi Stuart,

Any chance you can provide the path to the folder where I can manually install? I'm using the authoring tool and I'm not sure if I should be adding this to the extension folder in the temp folder or if there's another location.

thanks in advanced.

Show parent | Reply

Hi,

I don't have/use the authoring tool so don't know what the folder/file structure is like for that (or if/how third party extensions can be installed).

Using the framework the extensions folder is in the 'src' folder of the root course folder.

Stuart

Show parent | Reply

Hi,

For anyone using the framework and not sure how to install extensions manually, here's a guide.

Mike's extension works really well (and avoids the tiling or scaling issue with other background image options).

If you would like to install it manually, here's one way of doing it.

Fire up your command line tool (I used Terminal on OSX).
cd my-adapt-course/src/extensions/
git clone https://github.com/mike-st/parallax-background-switcher.git

This'll clone the repository into your extensions folder. You should then delete the hidden git folder:

cd parallax-background-switcher
rm -rf .git

You'll then need to check your dependencies by navigating to your 'adapt.json' file. Type cd.. (then Enter) twice to go back up to your "src" directory.

cd ..
cd ..
open adapt.json

Check that you have this line:

"adapt-parallax-background-switcher": "*"

If you'd tried installing it with the $ adapt install command then chances are it's already there even if it said that you can't install it. If not, copy and paste it taking care to add a comma at the end if it's the last dependency in the list.

Then add the JSON as per the example.json file and it should be apples.

All the best,

Cormac

Show parent | Reply

Hi I have made a parallax background switcher extension that works similar to cgkineo background switcher except you can choose if you want to use the original animation transition or use a parallax background effect instead on your page. Here is a link to the extension if anyone is interested in trying it out. Works with the authoring tool or the dev framework...

https://github.com/mike-st/parallax-background-switcher

Show parent | Reply

Cheers Mike, this is great. I've installed it in my Authoring Tool (v0.1.7) running in a Vagrant VM with Framework v2.0.10 and it works as advertised. This should make it easier for people to create Adapt pages similar to those in Kineo Pacific's ASADA/DrugFreeSportNZ Anti-doping course using just the Authoring Tool.

Show parent | Reply

Hi Mike,

Thanks for sharing this, it's really very good.

All the best,

Cormac

Show parent | Reply

Thanks so much! Really appreciate it. I had fun building it off of the Background switcher. It was my first attempt to build a component, though I realize it was not from scratch. I should mention, I made a fix to the backgrounds on the iOS version as the parallax effect was choking in that environment, so I thought it safer to make the BG's static similar to the original bg switcher.

Show parent | Reply

Hi Mike,

Thanks again for the parallax switcher.

I've noticed that when it's activated, it affects the 'retry' button for the assessment components. That is, when the button is pressed, it returns a blank page - when the page is reloaded it works fine, but it's an odd little glitch.

Would you have any ideas on why that might be?

All the best,

Cormac

Show parent | Reply